CSS: form-field

.instui-form-field — Pacáiste réimse foirme: lipéad, a rialuithe, agus leaganacha inlíne, riachtanach, nó léamh-aonair.

Fanann teachtaireacht earráide i bhfolach go dtí go mbeidh rialú an réimse :user-invalid (tar éis idirghníomhaíocht an úsáideora) nó go gcuirfidh tú an rang -invalid leis. Úsáid -layout-inline chun an lipéad a chur cois na rialuithe agus -layout-stacked chun é a chur os cionn. Socraíonn sé freisin a gap féin idir an lipéad, na rialuithe, agus na teachtaireachtaí; sáraíonn nascáil le hoiriúnóir spásála -gap-* an luach tógtha sin.

Source: form-field.css

Inrochtaineacht

Cuimsíonn eilimint <label> an rialú, mar sin tugann téacs an lipéid ainm dó go nadúrtha; is mais é an réalta riachtanach agus ba chóir í a cheilt ó theicneolaíochtaí chúnamh (aria-hidden), agus tagann an teachtaireacht earráide chun solais nuair a bhíonn an rialú :user-invalid nó má chuireann tú an rang -invalid leis.

Úsáid

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

Samplaí

<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>

Struchtúr

.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;

Modhnóirí

Modhnóir	Cur síos
.-inline	Leagan inlíne (gairid le haghaidh -layout-inline).
.-invalid	Stáit neamhdhleathach (earráid).
.-label-align-end	Déan téacs an lipéid a ailíniú ag an deireadh.
.-label-align-start	Déan téacs an lipéid a ailíniú ag an tús.
.-layout-inline	Leagan inlíne: lipéad cois na rialuithe.
.-layout-stacked	Leagan stacáilte: lipéad os cionn na rialuithe.
.-readonly	Stáit léamh-aon.
.-v-align-bottom	Ailíneáil an lipéid ag bun in éineacht leis na rialuithe.
.-v-align-top	Ailíneáil an lipéid ag barr in éineacht leis na rialuithe.

Codanna

Cuid	Cur síos
.controls	An limistéar rialaithe cois nó faoi bhun an lipéid.
.label	Lipéad an réimse.

Fo-eilimintí

Fo-eilimint	Cur síos
::after	Léiríonn sé an réalta maisithe a shonraíonn réimse riachtanach i ndiaidh téacs an lipéid nuair a éilítear an réimse.

Stáit

Stát	Cur síos
:required	—

Tóicíní a úsáideadh

Token	Cineál	Luach
--instui-component-form-field-layout-asterisk-color	<color>	LightDarklight-dark(#CF1F24, #FA917F)
--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>	LightDarklight-dark(#576773, #AAB0B5)
--instui-component-form-field-layout-text-color	<color>	LightDarklight-dark(#273540, #ffffff)

Tacaíocht bhrabhsálaí

• Áiríonn sé stíleanna a eilimint leis an riail at-@scope de CSS; teastaíonn Chromium, Firefox, nó Safari nuashonraithe.

Fo-chomhpháirteanna

• form-field-messages
• text-input

Gaolmhar

• form-field-messages — Léiríonn leid, teachtaireacht earráide, agus teachtaireacht ratha an réimse.
• form-field-group — Grúpálann réimsí gaolmhara faoi fhinscéal roinnte.