CSS: alert

.instui-alert · stable — Ένα inline μήνυμα με μπάρα χρώματος κατάστασης και μια αποκρυπτογραφημένη γλυφίδα κατάστασης από το κοινό σύνολο εικονιδίων.

Floating είναι η προεπιλογή, με μια ανυψωμένη έγχρωμη επιφάνεια και ενέργειες με χρώμα κατάλληλο για την επιφάνεια. -inline χρησιμοποιεί μια παστέλ επιφάνεια, χωρίς σκιά, εικονίδιο με χρώμα κατάστασης, τυπικό κουμπί κλεισίματος, πρωτεύουσα ενέργεια και τριτογενή δευτερεύουσα ενέργεια. Ένα μόνο άμεσο κουμπί ενέργειας σχηματίζει μια σειρά μετά από μη περιτυλιγμένο κείμενο· τυλίξτε δύο ενέργειες σε .button-group, όπου γίνονται πρώτα δευτερεύουσες και μετά πρωτεύουσες. Οποιοσδήποτε τροποποιητής κουμπιού εξαιρείται από αυτήν την αυτόματη ανάθεση παραλλαγής. Ένα άμεσο κουμπί κλεισίματος έχει προεπιλογή το μικρό μέγεθος· προσθέστε έναν τροποποιητή μεγέθους για να το αντικαταστήσετε.

Source: alert.css

TIP

Ενίσχυση JS — Το CSS αυτού του component αποδίδει και λειτουργεί ανεξάρτητα· συνδυάστε το με @pantoken/interactions για να προσθέσετε την διαδραστική συμπεριφορά. Ο modifier -timeout ελέγχεται από αυτή τη συμπεριφορά. Δείτε τον πίνακα modifiers παρακάτω.

Προσβασιμότητα

Για ένα σημαντικό μήνυμα, προσθέστε role="alert" ή μια περιοχή aria-live ώστε οι βοηθητικές τεχνολογίες να το ανακοινώσουν· ο έλεγχος απόρριψης είναι ένα κουμπί κλεισίματος με ετικέτα (το .instui-close-button στο παράδειγμα φέρει aria-label="Close").

Χρήση

@import "@pantoken/components/components.css";
@import "@pantoken/components/alert.css";

Παραδείγματα

<div class="instui-alert -icon-megaphone --mb-md">
  Ένα προειδοποιητικό μήνυμα με την προεπιλεγμένη </div>
<div class="instui-alert -icon-megaphone -inline --mb-md">
  Ένα προειδοποιητικό μήνυμα με την προεπιλεγμένη </div>
<div class="instui-alert -color-success --mb-md">
  Συγχαρητήρια! Χρησιμοποιείτε το χρώμα "success".
  <button class="instui-button">Εντάξει</button>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-success -inline --mb-md">
  Συγχαρητήρια! Χρησιμοποιείτε το χρώμα "success".
  <button class="instui-button">Εντάξει</button>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-error --mb-md">
  Συγχαρητήρια! Χρησιμοποιείτε το χρώμα "success".
  <div class="button-group">
    <button class="instui-button">Ακύρωση</button>
    <button class="instui-button">Εντάξει</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-error -inline --mb-md">
  Συγχαρητήρια! Χρησιμοποιείτε το χρώμα "success".
  <div class="button-group">
    <button class="instui-button">Ακύρωση</button>
    <button class="instui-button">Εντάξει</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-warning --mb-md">
  Συγχαρητήρια! Χρησιμοποιείτε το χρώμα "success".
  <div class="button-group">
    <button class="instui-button">Ακύρωση</button>
    <button class="instui-button">Εντάξει</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-warning -inline --mb-md">
  Συγχαρητήρια! Χρησιμοποιείτε το χρώμα "success".
  <div class="button-group">
    <button class="instui-button">Ακύρωση</button>
    <button class="instui-button">Εντάξει</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>

Δομή

.instui-alert
  ‹content›
  (choose one)
    bare-button
      button (component, 0..1)
    button-group
      .button-group
        button (component, 1..2)
  close-button (component, 0..1)

flowchart TD n0[".instui-alert"]:::cssdoc-root n1[/"‹content›"/]:::cssdoc-slot subgraph sg2 subgraph sg3 ["bare-button"] n4["@component button (0..1)"]:::cssdoc-root end subgraph sg5 ["button-group"] n6[".button-group"]:::cssdoc-root n7(["button"]):::cssdoc-component end end n8(["close-button"]):::cssdoc-component n0 --> n1 n6 -->|1..2| n7 n0 --> sg2 n0 -.->|0..1| n8 click n7 "/api/css/button.md" click n8 "/api/css/close-button.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Θέσεις (slots)

Θέση (slot)	Περιγραφή
content	Το περιεχόμενο του μηνύματος του alert· μπορεί να περιλαμβάνει κουμπί απόρριψης.

Τροποποιητές

Τροποποιητής	Περιγραφή
.-color-danger	Μήνυμα σφάλματος.
.-color-error	Alias — maps to .-color-danger.
.-color-info	Ενημερωτικό (προεπιλογή).
.-color-success	Θετικό/επιβεβαιωτικό μήνυμα.
.-color-warning	Προειδοποιητικό μήνυμα.
.-has-shadow-false	Alias — maps to .-without-shadow.
.-icon-*	Αντικαταστήστε τη γλυφίδα κατάστασης με προσαρμοσμένο εικονίδιο (π.χ. -icon-megaphone), το οποίο διατηρείται λευκό πάνω στη χρωματιστή μπάρα του variant.
.-inline	Μη ανυψωμένη παστέλ επιφάνεια για τοποθέτηση στη ροή του εγγράφου.
.-screen-reader-only	Οπτικά κρυφό αλλά ανακοινώσιμο.
.-timeout	Interaction — The alert will automatically dismiss after a default of 5 seconds.
.-timeout-1	Ένα δευτερόλεπτο πριν από την αυτόματη απόρριψη.
.-timeout-2	Δύο δευτερόλεπτα πριν από την αυτόματη απόρριψη.
.-timeout-3	Τρία δευτερόλεπτα πριν από την αυτόματη απόρριψη.
.-timeout-4	Τέσσερα δευτερόλεπτα πριν από την αυτόματη απόρριψη.
.-timeout-5	Πέντε δευτερόλεπτα πριν από την αυτόματη απόρριψη.
.-variant-error	Καταργημένο — use .-color-danger.
.-variant-info	Καταργημένο — use .-color-info.
.-variant-success	Καταργημένο — use .-color-success.
.-variant-warning	Καταργημένο — use .-color-warning.
.-without-shadow	Καταργημένο — use .-inline.

Μέρη

Μέρος	Περιγραφή
.button-group	Δοχείο για την παράθεση και την απόδοση.

Ψευδοστοιχεία

Ψευδοστοιχείο	Περιγραφή
::after	Το λευκό γλυφίδα κατάστασης, αποκρυπτογραφημένο και κεντραρισμένο πάνω στην μπάρα.
::before	—

Καταστάσεις

Κατάσταση	Περιγραφή
[aria-disabled="true"]	—
:disabled	—

Προσαρμοσμένες ιδιότητες

Ιδιότητα	Τύπος	Προεπιλογή	Περιγραφή
--pantoken-alert-glyph	<url>	—	Η χαμηλού επιπέδου πηγή της γλυφίδας κατάστασης· το -icon-<name> την ορίζει για εσάς. Αντικαταστήστε για προσαρμοσμένο εικονίδιο (ένα url-encoded SVG).
--pantoken-alert-icon-bg	<color>	—	Η χρωματιστή γέμιση της μπάρας κατάστασης πίσω από τη γλυφίδα· κάθε variant του -color-* ορίζει τη δική του.
--timeout	<integer>	—	Milliseconds πριν από την αυτόματη απόρριψη· το 0 το απενεργοποιεί. Απαιτεί το πακέτο αλληλεπίδρασης alert.

Καταναλωμένα tokens

Token	Τύπος	Τιμή
--instui-color-background-interactive-action-primary-active	<color>	LightDarklight-dark(#061C30, #D5E2F6)
--instui-color-background-interactive-action-primary-base	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-background-interactive-action-primary-hover	<color>	LightDarklight-dark(#234465, #ffffff)
--instui-color-drop-shadow-shadow-color1	<color>	LightDarklight-dark(rgba(35,68,101,0.15), rgba(0,0,0,0.3))
--instui-color-icon-base	<color>	LightDarklight-dark(#273540, #ffffff)
--instui-color-icon-error	<color>	LightDarklight-dark(#C51F22, #FA917F)
--instui-color-icon-info	<color>	LightDarklight-dark(#2369A4, #7FB4F1)
--instui-color-icon-on-color	<color>	#ffffff
--instui-color-icon-success	<color>	LightDarklight-dark(#017533, #61C378)
--instui-color-icon-warning	<color>	LightDarklight-dark(#664800, #E0A300)
--instui-color-stroke-interactive-action-primary-active	<color>	LightDarklight-dark(#061C30, #D5E2F6)
--instui-color-stroke-interactive-action-primary-base	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-stroke-interactive-action-primary-hover	<color>	LightDarklight-dark(#234465, #ffffff)
--instui-color-text-base	<color>	LightDarklight-dark(#273540, #F2F4F5)
--instui-color-text-interactive-action-primary-base	<color>	LightDarklight-dark(#ffffff, #1D354F)
--instui-component-alert-border-radius	<length>	0.75rem
--instui-component-alert-border-style	—	solid
--instui-component-alert-border-width	<length>	0.0625rem
--instui-component-alert-content-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-alert-content-font-size	<length>	1rem
--instui-component-alert-content-font-weight	<integer>	400
--instui-component-alert-content-line-height	<percentage>	125%
--instui-component-alert-content-padding-horizontal	<length>	0.75rem
--instui-component-alert-content-padding-vertical	<length>	0.75rem
--instui-component-alert-danger-background	<color>	#E62429
--instui-component-alert-danger-background-inline	<color>	LightDarklight-dark(#FFE3DE, #750D0F)
--instui-component-alert-danger-border-color	<color>	#E62429
--instui-component-alert-danger-border-color-inline	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-alert-icon-padding-left	<length>	0.75rem
--instui-component-alert-icon-padding-vertical	<length>	1rem
--instui-component-alert-info-background	<color>	#2B7ABC
--instui-component-alert-info-background-inline	<color>	LightDarklight-dark(#DEEBFF, #123E62)
--instui-component-alert-info-border-color	<color>	#2B7ABC
--instui-component-alert-info-border-color-inline	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-alert-success-background	<color>	#03893D
--instui-component-alert-success-background-inline	<color>	LightDarklight-dark(#CAF4D0, #01451B)
--instui-component-alert-success-border-color	<color>	#03893D
--instui-component-alert-success-border-color-inline	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-alert-warning-background	<color>	LightDarklight-dark(#F0C16C, #8C6400)
--instui-component-alert-warning-background-inline	<color>	LightDarklight-dark(#F7E7CF, #4D3600)
--instui-component-alert-warning-border-color	<color>	LightDarklight-dark(#F0C16C, #8C6400)
--instui-component-alert-warning-border-color-inline	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-base-button-medium-height	<length>	2.5rem
--instui-component-base-button-primary-disabled-background-color	<color>	LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-primary-disabled-border-color	<color>	LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-primary-disabled-text-color	<color>	LightDarklight-dark(#F2F4F5, #273540)
--instui-component-base-button-primary-ghost-active-background	—	color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)
--instui-component-base-button-primary-ghost-border-color	—	color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 40%, transparent)
--instui-component-base-button-primary-ghost-color	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-primary-ghost-hover-background	—	color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 10%, transparent)
--instui-component-base-button-primary-inverse-active-background	<color>	#E2EAF7
--instui-component-base-button-primary-inverse-background	<color>	#ffffff
--instui-component-base-button-primary-inverse-border-color	<color>	#ffffff
--instui-component-base-button-primary-inverse-color	<color>	#213D5B
--instui-component-base-button-primary-inverse-ghost-active-background	<color>	rgba(255,255,255,0.1)
--instui-component-base-button-primary-inverse-ghost-border-color	<color>	#ffffff
--instui-component-base-button-primary-inverse-ghost-color	<color>	#ffffff
--instui-component-base-button-primary-inverse-ghost-hover-background	<color>	rgba(255,255,255,0.1)
--instui-component-base-button-primary-inverse-hover-background	<color>	#EEF4FD
--instui-component-base-button-primary-on-color-active-border-color	<color>	#B6CCEA
--instui-component-base-button-primary-on-color-active-text-color	<color>	#213D5B
--instui-component-base-button-primary-on-color-disabled-background-color	<color>	#8D959F
--instui-component-base-button-primary-on-color-disabled-border-color	<color>	#8D959F
--instui-component-base-button-primary-on-color-disabled-text-color	<color>	#4A5B68
--instui-component-base-button-primary-on-color-hover-border-color	<color>	#D5E2F6
--instui-component-base-button-primary-on-color-hover-text-color	<color>	#213D5B
--instui-component-base-button-secondary-on-color-active-border-color	<color>	#B6CCEA
--instui-component-base-button-secondary-on-color-active-text-color	<color>	#ffffff
--instui-component-base-button-secondary-on-color-disabled-border-color	<color>	#8D959F
--instui-component-base-button-secondary-on-color-disabled-text-color	<color>	#9EA6AD
--instui-component-base-button-small-font-size	<length>	0.875rem
--instui-component-base-button-small-height	<length>	2rem
--instui-component-base-button-small-padding-horizontal	<length>	0.75rem
--instui-component-base-button-tertiary-active-border-color	—	color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 30%, transparent)
--instui-component-base-button-tertiary-active-text-color	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-tertiary-disabled-border-color	<color>	LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-tertiary-disabled-text-color	<color>	LightDarklight-dark(#AAB0B5, #4A5B68)
--instui-component-base-button-tertiary-hover-border-color	—	color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)
--instui-component-base-button-tertiary-hover-text-color	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-shared-tokens-spacing-gap-buttons	<length>	0.75rem
--instui-component-shared-tokens-spacing-general-space-md	<length>	0.75rem
--instui-component-text-base-on-color	<color>	#ffffff
--instui-drop-shadow-blur-elevation4-dropshadow1	<length>	12px
--instui-drop-shadow-spread-elevation4-dropshadow1	<length>	6px
--instui-drop-shadow-y-elevation4-dropshadow1	<length>	8px
--instui-icon-circle-check	<image>	url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m16%209-5.5%205.5L8%2012%22%2F%3E%3C%2Fsvg%3E')
--instui-icon-circle-x	<image>	url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m15%209-6%206%22%2F%3E%3Cpath%20d%3D%22m9%209%206%206%22%2F%3E%3C%2Fsvg%3E')
--instui-icon-info	<image>	url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4%22%2F%3E%3Cpath%20d%3D%22M12%208h.01%22%2F%3E%3C%2Fsvg%3E')
--instui-icon-triangle-alert	<image>	url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%2F%3E%3Cpath%20d%3D%22M12%209v4%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E')
--instui-spacing-space-xs	<length>	0.25rem
--pantoken-alert-icon-color	<color>	#ffffff
--pantoken-glyph	<url>	url("data:image/svg+xml

Υποσυστατικά

• button
• close-button

Σχετιζόμενα

• close-button — Ο έλεγχος απόρριψης που μπορεί να περιλαμβάνει ένα alert.