Polja obrazca: Button

Nazaj: predstavitveni pregled

Gumb nosi pomen v svoji različici: barvna semantika te knjižnice, ne brskalnika. Ta stran prikazuje različice, stanja in gumb s simbolom.

1. Pregled in namen

Stanje: [Live] – widgets::button() in osnovni CSS .wk-btn. Izvor in pogodba ARIA: vrstica »Button« v osnovnem katalogu gradnikov (role=„button“/aria-pressed/aria-disabled, stanja disabled/hover/focus/checked). Referenca: DevExpress ASPxButton (naštevni tip RenderMode Button/Link/Secondary/Outline/Danger).

2. Predpogoji

Poznate skupno pogodbo polj.

3. Pojmi

ASPxButton.RenderMode se skoraj dobesedno ujema z že uveljavljeno barvno semantiko Contract v3 te knjižnice (belo/modro/rdeče, glejte Množična dejanja → Gumbi) – pogodba to semantiko prevzame, namesto da bi izumljala četrto barvno lestvico.

4. Prvi koraki

echo $widgets->button([
    'name'  => 'do',
    'value' => 'delete',
    'label' => 'Izbriši povezavo',
    'variant' => 'danger',
]);

Napačno: uporabiti variant ⇒ 'danger' brez predhodnega pogovornega okna za potrditev (glejte odsek 7, Varnost).

5. Uporaba

Ton in način prikaza sta dve osi

Od 5. avgusta 2026 ima gumb dve neodvisni nastavitvi: ton pove, kako pomembno ali kako nevarno je dejanje, način prikaza pa, kako opazno je narisano.

`$opts['tone']`	Pomen
`neutral` (privzeto)	navadno, nedestruktivno dejanje
`primary`	glavno dejanje obrazca ali pogovornega okna
`danger`	destruktivno dejanje – zahteva potrditev
`success`	dejanje, ki nekaj zaključi ali potrdi

`$opts['appearance']`	Pomen
`filled` (privzeto)	zapolnjena površina v tonu
`outline`	le rob in pisava v tonu, površina ostane okoliška
`link`	podobno besedilu, brez okvira gumba

Osi je mogoče poljubno kombinirati. Tako je mogoče izraziti tudi »destruktivno, a zadržano« (tone ⇒ 'danger' skupaj z appearance ⇒ 'outline') – prej to ni bilo mogoče, ker sta bila ton in način prikaza na enem seznamu.

Kratka oblika ''variant'' še vedno velja

Vsaka njena vrednost je par tona in načina prikaza. Ustvarjeni HTML je za vseh pet nespremenjen; izrecno nastavljeni osi imata prednost pred kratko obliko.

`$opts['variant']`	ustreza	Primer uporabe
`primary`	`tone=primary`, `appearance=filled`	glavno dejanje obrazca/pogovornega okna
`secondary`	`tone=neutral`, `appearance=filled`	navadno, nedestruktivno dejanje
`outline`	`tone=neutral`, `appearance=outline`	zadržano stransko dejanje
`danger`	`tone=danger`, `appearance=filled`	destruktivno dejanje – zahteva potrditev
`link`	`tone=neutral`, `appearance=link`	dejanje znotraj tekočega besedila
`success`	`tone=success`, `appearance=filled`	novo od 5. avgusta 2026

Privzeta vrednost se je spremenila in je zdaj nevtralna. Do 5. avgusta 2026 je gumb brez nastavitve – in gumb z napačno zapisanim imenom – dobil najglasnejšo stopnjo sistema. To je napačna smer odpovedi: neznano ime pomeni, da namen klicatelja ni znan, varen prikaz neznanega namena pa je tih.

Sprememba ni imela posledic, in to je bilo izmerjeno vnaprej, ne predpostavljeno: vseh 19 klicateljev v hiši ton navaja izrecno, nobeden se ni zanašal na privzeto vrednost.

Prejšnje različice te strani so tone imenovale po barvah (»modro«, »rdeče«). Od prenove palete to ne drži več – poudarek ni več moder, poleg tega pa se spreminja z izbrano barvno shemo in barvo znamke. Odločilna je vloga, ne barvna vrednost.

6. API referenca

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

7. Parametri, možnosti in stanja

Ključ	Tip	Pomen
`tone`	string	glejte odsek 5, privzeto `neutral`
`appearance`	string	glejte odsek 5, privzeto `filled`
`variant`	string	kratka oblika za par obeh, glejte odsek 5. Privzeto: `neutral`/`filled` – tudi pri neznani vrednosti
`type`	`'submit'\|'button'\|'reset'`	nativni atribut `type` gumba, privzeto `submit`
`icon`	string	izbirna ikona pred oznako (zaupanja vreden HTML, kot `controlHtml` pri `propertyGrid()`)
`confirm`	string	če je nastavljeno: nativno besedilo `data-wk-confirm`, ki ga `scripts/formfields.js` pred oddajo obrazca prikaže kot potrditev `modal()` – brez JS se obrazec odda takoj, zavezujoče preverjanje ostane na strežniški obdelavi

Varnost: tako kot pri destruktivnih množičnih dejanjih (Množična dejanja) mora rdeč gumb bodisi sam odpreti pogovorno okno za potrditev modal() bodisi biti del obrazca, katerega strežniška obdelava dejanje znova preveri – destruktivnega dejanja nikoli ne izvedite neposredno ob kliku brez vprašanja. Besedilo confirm je le udobje na strani odjemalca, ne varnostna meja.

8. Popolni primeri

echo $widgets->button([
    'name'    => 'do',
    'value'   => 'save',
    'label'   => 'Shrani',
    'variant' => 'primary',
    'type'    => 'submit',
]);

9. Omejitve in robni primeri

Stanja

Stanje	Zapolnjen ton	`outline` in `link`
`hover`	poimenovana vrednost za hover (`primary`) oziroma stopnja svetlosti	ozadje, zmešano iz žetonov površin
`active`	stopnja svetlosti `--wk-state-press-dim`	mešanica s `--wk-state-press-tint`
`disabled`	`opacity`	`opacity`

Zakaj dva mehanizma. Gumb z lastno barvo (glavno dejanje, nevarnost, uspeh) se ob pritisku zatemni; če bi vanj vmešali njegovo pisavo, bi ga v svetli shemi posvetlili, medtem ko ga vrednost za hover zatemni – ena kretnja, dve smeri. Gumb, ki podeduje okoliško površino (nevtralen, obrobljen, podoben besedilu), nima lastne barve, ki bi jo lahko zatemnili, zato uporabi isto mešanico kot vnosna polja.

Do 5. avgusta 2026 noben gradnik v hiši ni prikazoval stanja pritiska. Klik je potrdilo šele tisto, kar se je zgodilo potem – pri oddaji obrazca torej nalaganje strani, na katero je uporabnik še čakal.

10. Dostopnost in združljivost

Celoten pregled: Accessibility.

11. Odpravljanje težav

Ni relevantno.

12. Sorodne teme

predstavitveni pregled – vse kategorije
FluentUI: osnovni katalog gradnikov – predstopnja CSS/ARIA (stopnja 2)
Styles Contract (--wk-*) – barvna semantika, ki ji sledi variant
DataGrid: Data Editing (množična dejanja) – živ zgled za destruktivno potrditev