CSS: checkbox
.instui-checkbox — Egy natív jelölőnégyzet és a címkéje, vagy egy kapcsoló -variant-toggle segítségével.
Állítsa be a el.indeterminate = true -t a JavaScriptben a vegyes állapotú kötőjel megjelenítéséhez; az ellenőrzött pipa automatikusan kontasztál a kitöltéshez képest — fehér sötét kitöltéshez, szinte fekete világos kitöltéshez.
Forrás: checkbox.css
Akadálymentesség
Egy natív <input type="checkbox"> meghajtja a :checked, :indeterminate, és :disabled elemeket; állítsa be a el.indeterminate = true -t a JavaScriptben a vegyes állapothoz, és vegye figyelembe, hogy -readonly csak stílus, mivel a jelölőnégyzeteknek nincs natív readonly attribútuma.
Használat
css
@import "@pantoken/components/components.css";
@import "@pantoken/components/checkbox.css";Példák
html
<label class="instui-checkbox"><input type="checkbox" checked> Checked</label>Módosítók
| Módosító | Leírás |
|---|---|
.-invalid | Érvénytelen (hiba) állapot. |
.-label-placement-end | Helyezze a címkét a vezérlő után. |
.-label-placement-start | Helyezze a címkét a vezérlő előtt. |
.-label-placement-top | Helyezze a címkét a vezérlő fölé. |
.-readonly | Csak olvasható állapot. |
.-size-large | Nagy. Hosszú forma alias a -size-lg. |
.-size-lg | Nagy. |
.-size-sm | Kicsi. |
.-size-small | Kicsi. Hosszú forma alias a -size-sm. |
.-variant-toggle | Rendereljen kapcsolóként a doboz helyett. |
Részek
| Rész | Leírás |
|---|---|
.asterisk | A kötelező mező csillag. |
Pszeudoelemek
| Pszeudoelem | Leírás |
|---|---|
::after | A -variant-toggle -n az állapot glifa a fogantyún: X amikor ki van kapcsolva, pipa amikor bekapcsolódik. |
::before | A maszk pipa vagy kötőjel glifa középen a dobozban; a -variant-toggle -n ezután csúszó fogantyúvá válik. |
Állapotok
| Állapot | Leírás |
|---|---|
:checked | — |
:disabled | — |
:indeterminate | — |
Egyéni tulajdonságok
| Tulajdonság | Típus | Alapértelmezett | Leírás |
|---|---|---|---|
--pantoken-cb-glyph | <url> | — | A doboz maszkglifa: pipa amikor be van jelölve, kötőjel amikor határozatlan. |
--pantoken-toggle-bw | <length> | — | A kapcsoló szegély szélessége. |
--pantoken-toggle-h | <length> | — | A kapcsoló kapcsoló magassága. |
--pantoken-toggle-handle | <length> | — | A számított fogantyú átmérője. |
--pantoken-toggle-inset | <length> | — | A fogantyú benyomása az egyes nyomvonal szélétől. |
--pantoken-toggle-w | <length> | — | A kapcsoló nyomvonal szélessége. |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--instui-border-width-sm | <length> | 0.0625rem |
--instui-color-background-muted | <color> | light-dark(#F2F4F5, #273540)LightDark |
--instui-color-stroke-base | <color> | light-dark(#8D959F, #6A7883)LightDark |
--instui-color-text-muted | <color> | light-dark(#576773, #AAB0B5)LightDark |
--instui-component-checkbox-asterisk-color | <color> | light-dark(#CF1F24, #FA917F)LightDark |
--instui-component-checkbox-background-checked-color | <color> | light-dark(#273540, #ffffff)LightDark |
--instui-component-checkbox-background-color | <color> | light-dark(#ffffff, #171B21)LightDark |
--instui-component-checkbox-background-disabled-color | <color> | light-dark(#E8EAEC, #334450)LightDark |
--instui-component-checkbox-background-hover-color | <color> | light-dark(#ffffff, #171B21)LightDark |
--instui-component-checkbox-background-readonly-color | <color> | light-dark(#C7CACD, #6A7883)LightDark |
--instui-component-checkbox-border-checked-color | <color> | light-dark(#273540, #ffffff)LightDark |
--instui-component-checkbox-border-color | <color> | light-dark(#7E8792, #5F6E7A)LightDark |
--instui-component-checkbox-border-disabled-color | <color> | light-dark(#C7CACD, #4A5B68)LightDark |
--instui-component-checkbox-border-hover-color | <color> | light-dark(#334450, #7E8792)LightDark |
--instui-component-checkbox-border-radius | <length> | 0.25rem |
--instui-component-checkbox-border-readonly-color | <color> | #8D959F |
--instui-component-checkbox-border-width | <length> | 0.0625rem |
--instui-component-checkbox-control-size-lg | <length> | 1.5rem |
--instui-component-checkbox-control-size-md | <length> | 1.5rem |
--instui-component-checkbox-control-size-sm | <length> | 1.5rem |
--instui-component-checkbox-control-vertical-margin | <length> | 0rem |
--instui-component-checkbox-error-border-color | <color> | light-dark(#CF1F24, #F56050)LightDark |
--instui-component-checkbox-error-border-hover-color | <color> | light-dark(#CF1F24, #FE7D6A)LightDark |
--instui-component-checkbox-font-family | [ <font-family-name> | <generic-font-family> ]# | Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif |
--instui-component-checkbox-font-size-lg | <length> | 1.25rem |
--instui-component-checkbox-font-size-md | <length> | 1rem |
--instui-component-checkbox-font-size-sm | <length> | 0.875rem |
--instui-component-checkbox-font-weight | <integer> | 400 |
--instui-component-checkbox-gap | <length> | 0.5rem |
--instui-component-checkbox-label-base-color | <color> | light-dark(#273540, #ffffff)LightDark |
--instui-component-checkbox-label-disabled-color | <color> | light-dark(#8D959F, #576773)LightDark |
--instui-component-checkbox-label-hover-color | <color> | light-dark(#273540, #ffffff)LightDark |
--instui-component-checkbox-label-readonly-color | <color> | light-dark(#273540, #ffffff)LightDark |
--instui-component-checkbox-line-height | <percentage> | 125% |
--instui-component-radio-input-toggle-background-success | <color> | #03893D |
--instui-component-radio-input-toggle-handle-text | <color> | #ffffff |
--instui-component-radio-input-toggle-medium-height | <length> | 2.5rem |
--instui-icon-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%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E') |
--instui-icon-minus | <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%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E') |
--instui-icon-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%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E') |
--instui-size-choice-control-height-md | <length> | 1.5rem |
Kapcsolódó
- radio — A single-select párja.