CSS: alert

.instui-alert · stable — He karere ā-ipurangi me tētahi paepae tae tūnga me tētahi tohu tūnga huna mai i te kohinga tohu āwhina.

Ka whakawhitia e tētahi -icon-<name> ritenga te tohu tūnga engari ka mau tonu te paepae tae o te momo; ka whakahokia te whakakī o te paepae me te taumata motuhake kia kore e kaihia e te peintā tohu ā-roto. He taunoa ka iti te pātene kati tūmataiti; tāpiri he tohu rahi hei whakarereke.

Source: alert.css

TIP

Whakawhānui JS — Ka whakairohia tō CSS o tēnei wahanga ka mahi anō; tāparehia ki @pantoken/interactions hei tāpiri i te whanonga rorohiko. Ko tōna āhuatanga -timeout ka taraiwa e taua whanonga. Tirohia te tāpuu whakarerekētanga i raro.

Wātea mō te katoa

Mō tētahi karere hira, tāpiri role="alert", rānei he rohe aria-live kia whakamōhiotia e ngā taputapu āwhina; ko te mana whakakore he pātene kati kua tapaina (kei te tauira te .instui-close-button e mau ana i te aria-label="Close").

Ngā Whakamahi

css

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

Ngā tauira

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>

Hanganga

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;

Wāhi

Wāhi	Whakamārama
`content`	Te ihirangi karere o te whakatūpato; tērā pea ka whakauru i tētahi pātene whakakore.

Ngā Kaitī

Kaiwhakatikatika	Whakamārama
`.-color-danger`	He karere hapa.
`.-color-info`	Kōrero whakamōhio (taunoa).
`.-color-success`	He karere āwhina / whakau.
`.-color-warning`	He karere whakatūpato.
`.-has-shadow-false`	Alias — maps to `.-without-shadow`.
`.-icon-*`	Whakawhitihia te tohu tūnga mō tētahi tohu ritenga (hei tauira `-icon-megaphone`), kia pūtoiā ki te paepae tae o te momo.
`.-render-custom-icon-*`	Kua tukuna — The former `renderCustomIcon` prop; still works as an alias, but use `-icon-<name>` (or override `--pantoken-alert-glyph`) instead.
`.-screen-reader-only`	Kua huna ki te kanohi engari ka whakamōhiotia.
`.-timeout`	Interaction — The alert will automatically dismiss after a default of 5 seconds.
`.-timeout-1`	Tētehi hekona i mua i te whakakore aunoa.
`.-timeout-2`	Rua hēkona i mua i te whakakore aunoa.
`.-timeout-3`	Toru hēkona i mua i te whakakore aunoa.
`.-timeout-4`	Whā hēkona i mua i te whakakore aunoa.
`.-timeout-5`	Rima hēkona i mua i te whakakore aunoa.
`.-variant-error`	Kua tukuna — use `.-color-danger`.
`.-variant-info`	Kua tukuna — use `.-color-info`.
`.-variant-success`	Kua tukuna — use `.-color-success`.
`.-variant-warning`	Kua tukuna — use `.-color-warning`.
`.-without-shadow`	Tangohia te ārai tukunga āhua taunoa (InstUI `hasShadow={false}`).

Ngā pseudo-kōwae

Pseudo-kōwae	Whakamārama
`::after`	Te tohu tūnga mā, kua häuna me te tūturu i runga i te paepae.
`::before`	Te paepae tūnga tae momo mō aho, ka whakakīia ki te pito tīra whakawaho.

Ngā taonga ritenga

Rawa	Momo	Taunoa	Whakamārama
`--pantoken-alert-glyph`	`<url>`	—	Te puna tohu tūnga taumata-iti; ka whakaritea e `-icon-<name>` māu. Whakakapi mō tētahi tohu ritenga (he SVG tāpiri-ururua kua whai URL).
`--pantoken-alert-icon-bg`	`<color>`	—	Te whakakī i te paepae tūnga tae kei muri i te tohu; ia momo `-color-*` ka tautuhia tō ake.
`--timeout`	`<integer>`	—	Ngā miriona hēkona i mua i te whakakore aunoa; ka whakakorea e `0`. Me te kete whanonga whakatūpato kia mahi ai.

Ngā tohu i whakamahia

Token	Momo	Uara
`--instui-component-alert-background`	`<color>`	LightDark`light-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>`	LightDark`light-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-above`	`none \| <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`

Ngā wāhanga-iti

close-button

Hono

close-button — Ko te mana whakakore e taea ana e tētahi whakatūpato te whakauru.

tools

ai

platforms

renderers

packages

formats

design

bundlers

plugins

pantoken

postcss

typedoc

vite

Ngā Wāhanga

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

Ngā Utauta

Ngā Ture

Plugins

layout

CSS: alert

Wātea mō te katoa

Ngā Whakamahi

Ngā tauira

Hanganga

Wāhi

Ngā Kaitī

Ngā pseudo-kōwae

Ngā taonga ritenga

Ngā tohu i whakamahia

Ngā wāhanga-iti

Hono

pantoken

postcss

typedoc

vite

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

CSS: alert ​

Wātea mō te katoa ​

Ngā Whakamahi ​

Ngā tauira ​

Hanganga ​

Wāhi ​

Ngā Kaitī ​

Ngā pseudo-kōwae ​

Ngā taonga ritenga ​

Ngā tohu i whakamahia ​

Ngā wāhanga-iti ​

Hono ​

CSS: alert

Wātea mō te katoa

Ngā Whakamahi

Ngā tauira

Hanganga

Wāhi

Ngā Kaitī

Ngā pseudo-kōwae

Ngā taonga ritenga

Ngā tohu i whakamahia

Ngā wāhanga-iti

Hono