Barvna shema: Svetla
Trenutno dejavna stran: start » sl » Dokumentacija » Razširitve DokuWikija (WvdS) » FluentUI (knjižnica oblikovalskega sistema) » FluentUI: reference komponent » FluentUI: polja obrazca – predstavitveni pregled » Polja obrazca: Check box

Polja obrazca: Check box

Nazaj: predstavitveni pregled


Potrditveno polje pozna tri stanja, HTML le dve: indeterminate je čisti prikaz na strani odjemalca, poslana vrednost ostane binarna.

1. Pregled in namen

Stanje: [Live]. Referenca: DevExpress-ov ASPxCheckBox (dvo-/tristanjski model).

2. Predpogoji

skupna pogodba polj že razumljena.

3. Pojmi

Tristanjski model nima nativnega HTML-ustreznika – indeterminate je čisto stanje lastnosti DOM (ni nastavljivo prek atributa, ni pošiljano). Tristanjsko polje je zato vedno odvisno od JavaScripta za vizualni vmesni prikaz; vrednost POST ostane binarna (vklop/izklop) – strežnik nikoli samostojno ne razloči »nedoločeno«, to je čisti prikaz na strani odjemalca izpeljane skupine (izračunane s strani klicatelja, ne polja samega).

Kako se izriše vmesno stanje

Stanje ustvarijo štiri mesta v paketu: ta metoda ga označi v HTML-ju, obrazčni skript, drevo in podatkovna mreža pa za nadrejeno vrstico, katere podrejene vrstice se ne ujemajo, nastavijo lastnost DOM skupaj z aria-checked="mixed".

Preprosto potrditveno polje je nativen kontrolnik: brskalnik nariše svojo črtico. Namenoma ostane nativno in barvo dobi prek accent-color; če bi ga izdelali sami, bi morali prevzeti črtico, kljukico, fokusni obroč in obnašanje v vsiljenih barvnih načinih, ne da bi s tem kaj pridobili.

Stikalo nativni prikaz v celoti nadomesti. Če bi bil njegov ročaj levo, točno tam, kamor ga postavi »izklopljeno«, bi se nadrejena vrstica, ki sporoča »nekateri so izbrani«, brala kot »nobeden ni izbran«.

Zato stanje prikaže dvakrat: ročaj je na sredini (na polovici poti, ki jo opravi »vklopljeno«), tir pa je delno zapolnjen. Sam položaj bi bil pri 18 px širokem kontrolniku majhna razlika; sama zapolnitev ne bi preživela vsiljenega barvnega načina, ki zavrže ozadja. Tri stanja, tri zapolnitve, trije položaji ročaja.

4. Prvi koraki

echo $widgets->checkbox([
    'name'  => 'aktivno',
    'label' => 'Dostop aktiven',
    'value' => true,
]);

5. Uporaba

$opts['tristate'] Vedenje value
false (privzeto) nativen <input type="checkbox"> bool
true tretja ikona »nedoločeno« (indeterminate), npr. za »delno izbrano« pri nadrejeni skupini true|false|null

6. API referenca

Metoda checkbox(array $opts): string v helper_plugin_wkfluentui_widgets.

7. Parametri, možnosti in stanja

Ključ Tip Pomen
tristate bool glej odsek 5, privzeto false
switchStyle bool izriše se v videzu preklopnega stikala namesto potrditvenega polja (čist CSS na istem <input type="checkbox"> – brez spremembe vedenja, brez dodatne semantike)

8. Popolni primeri

echo $widgets->checkbox([
    'name'      => 'obvestila',
    'label'     => 'E-poštna obvestila',
    'value'     => false,
    'switchStyle' => true,
]);

9. Omejitve in robni primeri

Nobenih onkraj strani funkcij.

10. Dostopnost in združljivost

Celoten pregled: Accessibility.

11. Odpravljanje težav

Se ne uporablja.

12. Sorodne teme

sl/wiki/dwe/wkfluentui/component/form-fields/checkbox.txt · Zadnja sprememba: uporabnika Wolfgang van der Stille