blob: 0c9cc394735dcbd95adede709c3514e18379c239 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
# StatusIcon
The StatusIcon component is used to add an icon that represents one of the following statuses:
- success
- info
- warning
- danger
To use this component:
1. Import it into the single file component (SFC)
2. Add the `<status-icon />` tag
3. Add the optional status prop and set the value to one of the statuses
4. Add the translated text to associate with the icon
```vue
import StatusIcon from '@/components/Global/StatusIcon'
```
## Status icon with default status
```vue
<status-icon />
```
![StatusIcon default icon example](./secondary.png)
## Status icon with success status
```vue
<status-icon
:status="success"
/>
```
![StatusIcon success icon example](./success.png)
## Status icon with info status
```vue
<status-icon
:status="info"
/>
```
![StatusIcon info icon example](./info.png)
## Status icon with warning status
```vue
<status-icon
:status="warning"
/>
```
![StatusIcon warning icon example](./warning.png)
## Status icon with danger status
```vue
<status-icon
:status="danger"
/>
```
![StatusIcon danger icon example](./danger.png)
### Example of AppHeader with status icon
![AppHeader with status icon example](./appHeaderWithStatusIcon.png)
### Example of Event logs with status icon
![EventLogs with status icon example](./eventLogsWithSatusIcon.png)
|