jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 10:16:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added examples and corrected some text (#11156)

Browse Source
This commit is contained in:
Matthias de Baat 2022-01-19 18:02:22 +01:00 committed by GitHub
parent 68dd818f7a
commit d1f1309198
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 75 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
gallery/src/pages/components/ha-alert.markdown
View File

@ -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**