Meddelande
En behållare som meddelar användaren att något har hänt på olika sätt med olika teman.
Information
Exempel
Lyckat
Detta är ett meddelande med ett tema som indikerar att något fick ett lyckat resultat.
Varning
Detta är ett meddelande med ett tema som indikerar att en varning har uppstått.
Fel
Detta är ett meddelande med ett tema som indikerar ett fel av något slag.
Mjuk
Lyckat
Detta är ett meddelande med ett tema som indikerar att något fick ett lyckat resultat.
Varning
Detta är ett meddelande med ett tema som indikerar att en varning har uppstått.
Fel
Detta är ett meddelande med ett tema som indikerar ett fel av något slag.
Konturerad
Lyckat
Detta är ett meddelande med ett tema som indikerar att något fick ett lyckat resultat.
Varning
Detta är ett meddelande med ett tema som indikerar att en varning har uppstått.
Fel
Detta är ett meddelande med ett tema som indikerar ett fel av något slag.
Solid
Lyckat
Detta är ett meddelande med ett tema som indikerar att något fick ett lyckat resultat.
Varning
Detta är ett meddelande med ett tema som indikerar att en varning har uppstått.
Fel
Detta är ett meddelande med ett tema som indikerar ett fel av något slag.
Upphöjd
Lyckat
Detta är ett meddelande med ett tema som indikerar att något fick ett lyckat resultat.
Varning
Detta är ett meddelande med ett tema som indikerar att en varning har uppstått.
Fel
Detta är ett meddelande med ett tema som indikerar ett fel av något slag.
Glas
Lyckat
Detta är ett meddelande med ett tema som indikerar att något fick ett lyckat resultat.
Varning
Detta är ett meddelande med ett tema som indikerar att en varning har uppstått.
Fel
Detta är ett meddelande med ett tema som indikerar ett fel av något slag.
Vänsteraccent
Lyckat
Detta är ett meddelande med ett tema som indikerar att något fick ett lyckat resultat.
Varning
Detta är ett meddelande med ett tema som indikerar att en varning har uppstått.
Fel
Detta är ett meddelande med ett tema som indikerar ett fel av något slag.
Egenskaper
| Egenskap | Typ | Standard |
|---|---|---|
| Tema | uppräkning<textsträng> | "success" |
| Bakgrundsfärg - Framgång | textsträng | "var(--ophixor-semantic-status-success-bg)" |
| Bakgrundsfärg - Varning | textsträng | "var(--ophixor-semantic-status-warning-bg)" |
| Bakgrundsfärg - Fel | textsträng | "var(--ophixor-semantic-status-danger-bg)" |
| Boxskugga | textsträng | "var(--ophixor-semantic-shadow-medium)" |
| Opacitet | textsträng | "1" |
| Bakgrundsfilter | textsträng | "none" |
| Transition | textsträng | "all 0.2s ease" |
| Bårdbredd | textsträng | "1px" |
| Bårdbredd - Topp | textsträng | "1px" |
| Bårdbredd - Höger | textsträng | "1px" |
| Bårdbredd - Botten | textsträng | "1px" |
| Bårdbredd - Vänster | textsträng | "1px" |
| Bårdradie | textsträng | "6px" |
| Bårdfärg - Framgång | textsträng | "var(--ophixor-semantic-status-success)" |
| Bårdfärg - Varning | textsträng | "var(--ophixor-semantic-status-warning)" |
| Bårdfärg - Fel | textsträng | "var(--ophixor-semantic-status-danger)" |
| Färg - Framgång | textsträng | "var(--ophixor-semantic-status-success-text)" |
| Färg - Varning | textsträng | "var(--ophixor-semantic-status-warning-text)" |
| Färg - Fel | textsträng | "var(--ophixor-semantic-status-danger-text)" |
| Flexbox-riktning | uppräkning<textsträng> | "column" |
| Flexbox-svep | uppräkning<textsträng> | "wrap" |
| Position | uppräkning<textsträng> | "relative" |
| Topp | textsträng | "auto" |
| Höger | textsträng | "auto" |
| Botten | textsträng | "auto" |
| Vänster | textsträng | "auto" |
| Z-index | textsträng | "auto" |
| Transformation | textsträng | "none" |
| Justera element längs tväraxeln | uppräkning<textsträng> | "stretch" |
| Justera element längs huvudaxeln | uppräkning<textsträng> | "stretch" |
| Vaddering | textsträng | "1rem 1.25rem" |
| Mellanrum | textsträng | "1rem" |
| Marginal | textsträng | "0px" |
| Bredd | textsträng | "auto" |
| Minsta bredd | textsträng | "0px" |
| Största bredd | textsträng | "100%" |
| Höjd | textsträng | "auto" |
| Minsta höjd | textsträng | "0px" |
| Största höjd | textsträng | "none" |
| Flexbox-växbarhet | textsträng | "0" |
| Flexbox-krympbarhet | textsträng | "1" |
| Överflöd | uppräkning<textsträng> | "visible" |
| Är synlig | boolesk | true |
| Selektorer | lista | [] |
Varianter
| Variant | Beskrivning |
|---|---|
| Mjuk | Kommer inom kort... |
| Konturerad | Kommer inom kort... |
| Solid | Kommer inom kort... |
| Upphöjd | Kommer inom kort... |
| Glas | Kommer inom kort... |
| Vänsteraccent | Kommer inom kort... |
| Kompakt rad | Kommer inom kort... |
| Banner | Kommer inom kort... |
| Toast | Kommer inom kort... |
| Flytande & Centrerad | Kommer inom kort... |