CSS: form-field
.instui-form-field — Egy form-field burkoló: egy címke, annak vezérlői és beágyazott, kötelező vagy csak olvasható elrendezések.
Egy hibaüzenet rejtve marad, amíg a mező vezérlője :user-invalid (miután a felhasználó interakcióba lép) vagy hozzáadod a -invalid osztályt. Használd a -layout-inline-t a címke mellett a vezérlőkhöz és -layout-stacked-t fölötte.
Forrás: form-field.css
Akadálymentesség
A <label> elem burkolja a vezérlőt, így a címke szövege natív módon nevezi azt; a szükséges csillag dekoratív és el kell rejteni az asszisztív technikák elől (aria-hidden), és a hibaüzenet akkor jelenik meg, amikor a vezérlő :user-invalid vagy hozzáadod a -invalid osztályt.
Használat
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/form-field.css";Példák
html
<label class="instui-form-field">
<span class="label">Email address</span>
<span class="controls"><input class="instui-text-input" type="email" placeholder="[email protected]"></span>
<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>
</label>Felépítés
text
.instui-form-field
.label
.controls
text-input (component)
form-field-messages (component)flowchart TD
n0[".instui-form-field"]:::cssdoc-root
n1(".label"):::cssdoc-part
n2(".controls"):::cssdoc-part
n3(["text-input"]):::cssdoc-component
n4(["form-field-messages"]):::cssdoc-component
n0 --> n1
n2 --> n3
n0 --> n2
n0 --> n4
click n3 "/api/css/text-input.md"
click n4 "/api/css/form-field-messages.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;
Módosítók
| Módosító | Leírás |
|---|---|
.-inline | Beágyazott elrendezés (rövidítés a -layout-inline-hoz). |
.-invalid | Érvénytelen (hiba) állapot. |
.-label-align-end | Véghez igazítsd a címke szövegét. |
.-label-align-start | Kezdethez igazítsd a címke szövegét. |
.-layout-inline | Beágyazott elrendezés: címke a vezérlők mellett. |
.-layout-stacked | Egymásra rakott elrendezés: címke a vezérlők felett. |
.-readonly | Csak olvasható állapot. |
.-v-align-bottom | Helyezd a címkét a vezérlőkhöz az alján. |
.-v-align-top | Helyezd a címkét a vezérlőkhöz felül. |
Részek
| Rész | Leírás |
|---|---|
.controls | A vezérlőterület a címke mellett vagy alatt. |
.label | A mező címkéje. |
Pszeudoelemek
| Pszeudoelem | Leírás |
|---|---|
::after | Megjeleníti a dekoratív szükséges mező csillagot a címke szövege után, ha a mező szükséges. |
Állapotok
| Állapot | Leírás |
|---|---|
:required | — |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-component-form-field-layout-asterisk-color | <color> | light-dark(#CF1F24, #FA917F)LightDark |
--instui-component-form-field-layout-font-family | [ <font-family-name> | <generic-font-family> ]# | Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif |
--instui-component-form-field-layout-font-size | <length> | 1rem |
--instui-component-form-field-layout-font-weight | <integer> | 400 |
--instui-component-form-field-layout-gap-inputs | <length> | 0.75rem |
--instui-component-form-field-layout-gap-primitives | <length> | 0.5rem |
--instui-component-form-field-layout-line-height | <length> | 1.125rem |
--instui-component-form-field-layout-readonly-text-color | <color> | light-dark(#576773, #AAB0B5)LightDark |
--instui-component-form-field-layout-text-color | <color> | light-dark(#273540, #ffffff)LightDark |
Böngészőtámogatás
- Tartalmazza az elem stílusait a CSS
@scopeszabállyal; szükséges egy friss Chromium, Firefox, vagy Safari.
Alkomponensek
Kapcsolódó
- form-field-messages — Megjeleníti a mező tippjét, hibáját és sikeres üzeneteit.
- form-field-group — Csoportosítja a kapcsolódó mezőket egy megosztott jelmagyarázat alatt.