CSS: form-field

.instui-form-field — He whakakapi-ā-pūnaha ā-wāhanga: he tapanga, āna mana whakahaere, me ngā whakaritenga ā-rārangi, me ngā arataki rānei, kāore e taea te whakatika.

Ka huna te karere hapa kia tae rā anō te mana whakahaere o te wāhanga ki te āhua :user-invalid (i muri i te hononga a te kaiwhakamahi) rānei ki te tāpiri koe i te karaehe -invalid. Whakamahia te -layout-inline ki te whakanoho i te tapanga ki taha o ngā mana whakahaere, ā, te -layout-stacked hei whakanoho i runga ake. Ka tautuhi hoki i tana ake gap i waenga i te tapanga, ngā mana whakahaere, me ngā karere; mā te here i tētahi kaitohu whakarahi -gap-* ka huri i taua uara tūturu.

Source: form-field.css

Wātea mō te katoa

Ka whakakapi te waahanga <label> i te mana whakahaere, nō reira ka tū ingoa taketake te kuputuhi tapanga; he whakapae noa te asteriski e tohu ana he herenga, me huna ia i te hangarau āwhina (aria-hidden), ā, ka puta te karere hapa ka tae te mana whakahaere ki te āhua :user-invalid rānei ka tāpirihia te karaehe -invalid.

Ngā Whakamahi

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

Ngā tauira

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

Hanganga

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

Ngā Kaitī

Kaiwhakatikatika	Whakamārama
.-inline	Whakakitenga ā-rārangi (kua poto mō -layout-inline).
.-invalid	Āhua hē (tapae).
.-label-align-end	Whakatika te kuputuhi tapanga ki te mutunga.
.-label-align-start	Whakatika te kuputuhi tapanga ki te tīmatanga.
.-layout-inline	Whakakitenga ā-rārangi: tapanga ki taha o ngā mana whakahaere.
.-layout-stacked	Whakakitenga tūru: tapanga i runga ake i ngā mana whakahaere.
.-readonly	Āhua pānui-anake.
.-v-align-bottom	Whakatika te tapanga kia taurite raro ki ngā mana whakahaere.
.-v-align-top	Whakatika te tapanga kia taurite runga ki ngā mana whakahaere.

Wāhanga

Wāhanga	Whakamārama
.controls	Te wāhi mana whakahaere kei te taha, kei raro rānei o te tapanga.
.label	Te tapanga wāhanga.

Ngā pseudo-kōwae

Pseudo-kōwae	Whakamārama
::after	Ka whakaatu i te asteriski whakapaipai e tohu ana he wāhanga taketake i muri i te kuputuhi tapanga ina he mea hiahia te wāhanga.

Ngā āhuatanga

Tūnga	Whakamārama
:required	—

Ngā tohu i whakamahia

Token	Momo	Uara
--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)

Tautoko pūtirotiro

• Kei roto āna momo kakano me te ture CSS @scope; e hiahiatia ana he Chromium, Firefox, rānei Safari hou.

Ngā wāhanga-iti

• form-field-messages
• text-input

Hono

• form-field-messages — Ka whakaatu i ngā aratohu, ngā hapa, me ngā karere angitu o te wāhanga.
• form-field-group — Ka rōpū i ngā wāhanga e hāngai ana i raro i tētahi ingoa āheinga tahi.