mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-22 08:46:35 +00:00
Added examples and corrected some text (#11156)
This commit is contained in:
parent
68dd818f7a
commit
d1f1309198
@ -5,15 +5,23 @@ title: Alerts
|
||||
# Alert `<ha-alert>`
|
||||
The alert offers four severity levels that set a distinctive icon and color.
|
||||
|
||||
<ha-alert alert-type="error">This is an error alert — check it out!</ha-alert>
|
||||
<ha-alert alert-type="error">
|
||||
This is an error alert — check it out!
|
||||
</ha-alert>
|
||||
|
||||
<ha-alert alert-type="warning">This is an warning alert — check it out!</ha-alert>
|
||||
<ha-alert alert-type="warning">
|
||||
This is an warning alert — check it out!
|
||||
</ha-alert>
|
||||
|
||||
<ha-alert alert-type="info">This is an info alert — check it out!</ha-alert>
|
||||
<ha-alert alert-type="info">
|
||||
This is an info alert — check it out!
|
||||
</ha-alert>
|
||||
|
||||
<ha-alert alert-type="success">This is an success alert — check it out!</ha-alert>
|
||||
<ha-alert alert-type="success">
|
||||
This is an success alert — check it out!
|
||||
</ha-alert>
|
||||
|
||||
**Note:** This component is by [MUI](https://mui.com/components/alert/) and is not documented in the [Material Design guidelines](https://material.io).
|
||||
**Note:** This component is by <a href="https://mui.com/components/alert/" rel="noopener noreferrer" target="_blank">MUI</a> and is not documented in the <a href="https://material.io" rel="noopener noreferrer" target="_blank">Material Design guidelines</a>.
|
||||
|
||||
1. [Guidelines](#guidelines)
|
||||
2. [Implementation](#implementation)
|
||||
@ -21,8 +29,8 @@ The alert offers four severity levels that set a distinctive icon and color.
|
||||
### Resources
|
||||
| Type | Link | Status |
|
||||
|----------------|----------------------------------|-----------|
|
||||
| Design | [Home Assistant DesignKit](https://www.figma.com/community/file/967153512097289521/Home-Assistant-DesignKit) (Figma) | Available |
|
||||
| Implementation | [Web Component](https://github.com/home-assistant/frontend/blob/dev/src/components/ha-alert.ts) (GitHub) | Available |
|
||||
| Design | <a href="https://www.figma.com/community/file/967153512097289521/Home-Assistant-DesignKit" rel="noopener noreferrer" target="_blank">Home Assistant DesignKit</a> (Figma) | Available |
|
||||
| Implementation | <a href="https://github.com/home-assistant/frontend/blob/dev/src/components/ha-alert.ts" rel="noopener noreferrer" target="_blank">Web Component</a> (GitHub) | Available |
|
||||
|
||||
## Guidelines
|
||||
### Usage
|
||||
@ -64,78 +72,93 @@ Actions must have a tab index of 0 so that they can be reached by keyboard-only
|
||||
### Example Usage
|
||||
**Alert type**
|
||||
|
||||
<ha-alert alert-type="error">This is an error alert — check it out!</ha-alert>
|
||||
<ha-alert alert-type="error">
|
||||
This is an error alert — check it out!
|
||||
</ha-alert>
|
||||
|
||||
<ha-alert alert-type="warning">This is an warning alert — check it out!</ha-alert>
|
||||
<ha-alert alert-type="warning">
|
||||
This is an warning alert — check it out!
|
||||
</ha-alert>
|
||||
|
||||
<ha-alert alert-type="info">This is an info alert — check it out!</ha-alert>
|
||||
<ha-alert alert-type="info">
|
||||
This is an info alert — check it out!
|
||||
</ha-alert>
|
||||
|
||||
<ha-alert alert-type="success">This is an success alert — check it out!</ha-alert>
|
||||
<ha-alert alert-type="success">
|
||||
This is an success alert — check it out!
|
||||
</ha-alert>
|
||||
|
||||
|
||||
```html
|
||||
<ha-alert alert-type="error">This is an error alert — check it out!</ha-alert>
|
||||
<ha-alert alert-type="warning">This is a warning alert — check it out!</ha-alert>
|
||||
<ha-alert alert-type="info">This is an info alert — check it out!</ha-alert>
|
||||
<ha-alert alert-type="success">This is a success alert — check it out!</ha-alert>
|
||||
<ha-alert alert-type="error">
|
||||
This is an error alert — check it out!
|
||||
</ha-alert>
|
||||
<ha-alert alert-type="warning">
|
||||
This is a warning alert — check it out!
|
||||
</ha-alert>
|
||||
<ha-alert alert-type="info">
|
||||
This is an info alert — check it out!
|
||||
</ha-alert>
|
||||
<ha-alert alert-type="success">
|
||||
This is a success alert — check it out!
|
||||
</ha-alert>
|
||||
```
|
||||
|
||||
**Title**
|
||||
|
||||
The `title ` option should not be used without a description.
|
||||
|
||||
<ha-alert alert-type="error" title="Error">
|
||||
This is an error alert — <strong>check it out!</strong>
|
||||
</ha-alert>
|
||||
|
||||
<ha-alert alert-type="warning">
|
||||
<title>Warning</title>
|
||||
This is an warning alert — <strong>check it out!</strong>
|
||||
</ha-alert>
|
||||
|
||||
<ha-alert alert-type="info">
|
||||
<title>Info</title>
|
||||
This is an info alert — <strong>check it out!</strong>
|
||||
</ha-alert>
|
||||
|
||||
<ha-alert alert-type="success">
|
||||
<title>Success </title>
|
||||
This is an success alert — <strong>check it out!</strong>
|
||||
<ha-alert alert-type="success" title="Success">
|
||||
This is an success alert — check it out!
|
||||
</ha-alert>
|
||||
|
||||
```html
|
||||
<ha-alert alert-type="error" title="Error">
|
||||
This is an error alert — <strong>check it out!</strong>
|
||||
</ha-alert>
|
||||
<ha-alert alert-type="warning">
|
||||
<title>Warning</title>
|
||||
This is an warning alert — <strong>check it out!</strong>
|
||||
</ha-alert>
|
||||
<ha-alert alert-type="info">
|
||||
<title>Info</title>
|
||||
This is an info alert — <strong>check it out!</strong>
|
||||
</ha-alert>
|
||||
<ha-alert alert-type="success">
|
||||
<title>Success </title>
|
||||
This is an success alert — <strong>check it out!</strong>
|
||||
<ha-alert alert-type="success" title="Success">
|
||||
This is an success alert — check it out!
|
||||
</ha-alert>
|
||||
```
|
||||
|
||||
**Dismissable**
|
||||
|
||||
*Documentation coming soon*
|
||||
<ha-alert alert-type="success" dismissable>
|
||||
This is an success alert — check it out!
|
||||
</ha-alert>
|
||||
|
||||
```html
|
||||
<ha-alert alert-type="success" dismissable>
|
||||
This is an success alert — check it out!
|
||||
</ha-alert>
|
||||
```
|
||||
|
||||
**Slotted action**
|
||||
|
||||
<ha-alert alert-type="success">
|
||||
This is an success alert — check it out!
|
||||
<mwc-button slot="action" label="Undo"></mwc-button>
|
||||
</ha-alert>
|
||||
|
||||
```html
|
||||
<ha-alert alert-type="success">
|
||||
This is an success alert — check it out!
|
||||
<mwc-button slot="action" label="Undo"></mwc-button>
|
||||
</ha-alert>
|
||||
```
|
||||
|
||||
**Slotted icon**
|
||||
|
||||
*Documentation coming soon*
|
||||
|
||||
**Slotted action**
|
||||
|
||||
*Documentation coming soon*
|
||||
|
||||
**Right to left**
|
||||
|
||||
*Documentation coming soon*
|
||||
<ha-alert alert-type="success" rtl>
|
||||
This is an info alert — check it out!
|
||||
</ha-alert>
|
||||
|
||||
```html
|
||||
<ha-alert alert-type="success" rtl>
|
||||
This is an info alert — check it out!
|
||||
</ha-alert>
|
||||
```
|
||||
|
||||
### API
|
||||
**Properties/Attributes**
|
||||
|
Loading…
x
Reference in New Issue
Block a user