CSS: alert ​

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

Ένα προσαρμοσμένο -icon-<name> αντικαθιστά τη γλυφίδα κατάστασης αλλά διατηρεί τη χρωματιστή μπάρα του variant· η γέμιση της μπάρας επανακαθορίζεται με υψηλότερη ειδικότητα ώστε ο κοινός painter εικονιδίων να μην την καταναλώνει. Ένα άμεσο κουμπί κλεισίματος έχει προεπιλογή μικρό μέγεθος· προσθέστε modifier μεγέθους για να το παρακάμψετε.

Source: alert.css

TIP

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

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

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

Χρήση ​

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

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

html
<div class="instui-alert -icon-megaphone --mb-md">
  An alert with the default <code>info</code> color, and a custom icon.
</div>
<div class="instui-alert -color-success">
  Congratulations! You're using the "success" color.
  <button class="instui-close-button" aria-label="Close"></button>
</div>

Δομή ​

text
.instui-alert
  ‹content›
  close-button (component, 0..1)
flowchart TD n0[".instui-alert"]:::cssdoc-root n1[/"‹content›"/]:::cssdoc-slot n2(["close-button"]):::cssdoc-component n0 --> n1 n0 -.->|0..1| n2 click n2 "/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-infoΕνημερωτικό (προεπιλογή).
.-color-successΘετικό/επιβεβαιωτικό μήνυμα.
.-color-warningΠροειδοποιητικό μήνυμα.
.-has-shadow-falseAlias — maps to .-without-shadow.
.-icon-*Αντικαταστήστε τη γλυφίδα κατάστασης με προσαρμοσμένο εικονίδιο (π.χ. -icon-megaphone), το οποίο διατηρείται λευκό πάνω στη χρωματιστή μπάρα του variant.
.-render-custom-icon-*Καταργημένο — The former renderCustomIcon prop; still works as an alias, but use -icon-<name> (or override --pantoken-alert-glyph) instead.
.-screen-reader-onlyΟπτικά κρυφό αλλά ανακοινώσιμο.
.-timeoutInteraction — 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Αφαιρέστε τη προεπιλεγμένη σκιά ανύψωσης (InstUI hasShadow={false}).

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

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

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

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

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

TokenΤύποςΤιμή
--instui-component-alert-background<color>LightDarklight-dark(#ffffff, #171B21)
--instui-component-alert-border-radius<length>0.75rem
--instui-component-alert-border-style—solid
--instui-component-alert-border-width<length>0.125rem
--instui-component-alert-color<color>LightDarklight-dark(#273540, #ffffff)
--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>1.5rem
--instui-component-alert-content-padding-vertical<length>0.75rem
--instui-component-alert-danger-border-color<color>#E62429
--instui-component-alert-danger-icon-background<color>#E62429
--instui-component-alert-icon-color<color>#ffffff
--instui-component-alert-info-border-color<color>#2B7ABC
--instui-component-alert-info-icon-background<color>#2B7ABC
--instui-component-alert-success-border-color<color>#03893D
--instui-component-alert-success-icon-background<color>#03893D
--instui-component-alert-warning-border-color<color>#CF4A00
--instui-component-alert-warning-icon-background<color>#CF4A00
--instui-component-base-button-medium-height<length>2.5rem
--instui-component-base-button-small-height<length>2rem
--instui-elevation-abovenone | <shadow>#—
--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%22m9%2012%202%202%204-4%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-glyph<url>url("data:image/svg+xml

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

Σχετιζόμενα ​

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