mirror of https://github.com/hashicorp/consul
47 lines
880 B
Plaintext
47 lines
880 B
Plaintext
|
---
|
||
|
|
class: css
|
||
|
|
---
|
||
|
|
# inline-alert
|
||
|
|
|
||
|
|
CSS component for giving inline feedback to the user, generally used for form
|
||
|
|
element feedback like errors and suchlike.
|
||
|
|
|
||
|
|
```hbs preview-template
|
||
|
|
<label class="type-text">
|
||
|
|
<span>Input some text</span>
|
||
|
|
<input type="text" />
|
||
|
|
<strong class={{or this.type "info"}}>{{capitalize (or this.type "info")}}</strong>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<figure>
|
||
|
|
<figcaption>Provide a widget to change the <code>class</code></figcaption>
|
||
|
|
|
||
|
|
<select
|
||
|
|
onchange={{action (mut this.type) value="target.value"}}
|
||
|
|
>
|
||
|
|
<option>info</option>
|
||
|
|
<option>success</option>
|
||
|
|
<option>warning</option>
|
||
|
|
<option>error</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
</figure>
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
```css
|
||
|
|
strong.info {
|
||
|
|
@extend %inline-alert-info;
|
||
|
|
}
|
||
|
|
strong.success {
|
||
|
|
@extend %inline-alert-success;
|
||
|
|
}
|
||
|
|
strong.warning {
|
||
|
|
@extend %inline-alert-warning;
|
||
|
|
}
|
||
|
|
strong.error {
|
||
|
|
@extend %inline-alert-error;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|