Skip to content

Label Specification

Stanimir Dimitrov edited this page May 12, 2017 · 1 revision

igxLabel should engage with input field and float above the input field when focused. igxLabel could be used as standalone component to represent some string.

Objectives

The igxLabel directive is intended to be used on single-line text elements to add additional CSS styles. It is especially useful when combined with igx-switch, igx-checkbox, and or igx-avatar components.

User Stories

Developer

As a developer I want to be able to easily transform element to a label by using angular directive principles. Also I want to combine that text with other components.

<target-element igxLabel [..options]>Click me</target-element>

In combination:

<div class="igx-form-group">
    <input type="text" igxInput [(ngModel)]="user.name"/>
    <label igxLabel>Username</label>
</div>

End user

  • Standalone text content.
  • With association with other components (example: input).

Acceptance criteria

  1. Show plain text (content).
  2. Floating inline Label that moves above certain field. When text is entered in some input, the label moves above the input field and changes its font-size and color.

Functionality

End User Experience

The Label should always display text or any other string representation.

Developer Experience

Use it as directive to span element for example:

<span igxLabel>Some text<span>
Clone this wiki locally