mirror of https://github.com/hashicorp/consul
36 lines
607 B
Plaintext
36 lines
607 B
Plaintext
|
---
|
||
|
|
class: css
|
||
|
|
state: needs-love
|
||
|
|
---
|
||
|
|
# flash-message
|
||
|
|
|
||
|
|
CSS component for styling our flash messages
|
||
|
|
|
||
|
|
```hbs preview-template
|
||
|
|
<div class="flash-message">
|
||
|
|
<p
|
||
|
|
role="alert"
|
||
|
|
class={{or this.type 'success'}}
|
||
|
|
>
|
||
|
|
<strong>
|
||
|
|
{{capitalize (or this.type 'success')}}!
|
||
|
|
</strong>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<figure>
|
||
|
|
<figcaption>Provide a widget to change the <code>class</code></figcaption>
|
||
|
|
|
||
|
|
<select
|
||
|
|
onchange={{action (mut this.type) value="target.value"}}
|
||
|
|
>
|
||
|
|
<option>success</option>
|
||
|
|
<option>warning</option>
|
||
|
|
<option>error</option>
|
||
|
|
<option>exists</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
</figure>
|
||
|
|
```
|
||
|
|
|