CSS: form-field-messages

.instui-form-field-messages — Mező súgó és érvényesítési üzenetek — tipp, hiba, siker és csak képernyőolvasó — egy glyfa hibával és sikerrel.

Forrás: form-field-messages.css

Akadálymentesség

Egy -type-screenreader-only üzenet vizuálisan rejtett, de az akadálymentesség fában marad, így még mindig bejelentett; párosítsa a hiba és siker üzeneteket a mezővel az aria-describedby-on keresztül, hogy a kisegítő technológia olvassa el azokat a vezérléssel.

Használat

@import "@pantoken/components/components.css";
@import "@pantoken/components/form-field-messages.css";

Példák

<div class="instui-form-field-messages">
  <span class="instui-form-field-message -type-hint">We'll never share it.</span>
  <span class="instui-form-field-message -type-error">Enter a valid email address.</span>
</div>

We'll never share it.Enter a valid email address.

Felépítés

.instui-form-field-messages
  .instui-form-field-message

flowchart TD n0[".instui-form-field-messages"]:::cssdoc-root n1(".instui-form-field-message"):::cssdoc-part n0 --> n1 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Módosítók

Módosító	Leírás
.-type-new-error	Elavult — use .-type-error.

Részek

Rész	Leírás
.instui-form-field-message	Egy egyedi üzenet; annak -type-*-je kiválasztja a tipp, hiba, siker vagy csak képernyőolvasó változatot.

Pszeudoelemek

Pszeudoelem	Leírás
::before	A vezető állapot glyfa megjelenítése hibás és sikeres üzeneteken: egy riasztási kör hibákhoz és egy ellenőrző kör sikerhez.

Felhasznált tokenek

Token	Típus	Érték
--instui-component-form-field-layout-gap-primitives	<length>	0.5rem
--instui-component-form-field-message-error-text-color	<color>	light-dark(#CF1F24, #FA917F)LightDark
--instui-component-form-field-message-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-form-field-message-font-size	<length>	0.875rem
--instui-component-form-field-message-font-weight	<integer>	400
--instui-component-form-field-message-hint-text-color	<color>	light-dark(#273540, #ffffff)LightDark
--instui-component-form-field-message-line-height	<length>	1.25rem
--instui-component-form-field-message-success-text-color	<color>	light-dark(#037D37, #61C378)LightDark
--instui-icon-circle-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%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cline%20x1%3D%2212%22%20x2%3D%2212%22%20y1%3D%228%22%20y2%3D%2212%22%2F%3E%3Cline%20x1%3D%2212%22%20x2%3D%2212.01%22%20y1%3D%2216%22%20y2%3D%2216%22%2F%3E%3C%2Fsvg%3E')
--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')

Kapcsolódó

• form-field — Becsomagol egy címkét, vezérlőket és ezeket az üzeneteket.