FluentUI: osnovni katalog gradnikov

Nazaj: FluentUI (knjižnica oblikovalskega sistema)

Katalog osnovnih gradnikov: gumb, spustno polje, prikaz napredka, kartica, značka in preostali – kaj obstaja in kaj vsak od njih obljublja.

Stanje: od celovite razširitve (2026-07-14) je jedrni nabor kataloga dosledno stopnja 1 – Button, Dropdown, SelectBox, SplitView (primitiv CSS), ProgressBar, Hover/Tooltip, CountBadge, DeclarativeTable in Card/Tile so uveljavljeni kot metode helper_plugin_wkfluentui_widgets oz. pogodbe CSS/atributov (navedeno po vrstici); zavezujoča pogodba metod je v FluentUI: javni API pomočnika. Od razširitve Studia (2026-07-14) so tudi štirje gradniki, ki jih vodi Studio, v odseku spodaj (filter InputBox, vrstica zavihkov urejevalnika, paleta ukazov, maksimiranje podokna) stopnja 1 – prvi porabnik je SQLite Data Studio (wksqliteds).

Viri: VS Code (https://github.com/microsoft/vscode, pot src/vs/base/browser/ui/**, osnovni gradniki) in Azure Data Studio (https://github.com/microsoft/azuredatastudio, pot src/sql/**, razširitve obrazcev/pogovornih oken/mrež, ki jih v osnovnem VS Code ni) – oba javna, odprtokodna repozitorija.

Štirje gradniki, na katere se sklicuje inventar dejanj SQLite Data Studio (stran območja Studia) – prvotno opredeljeni kot pogodba [T2], uveljavljeni in vključeni v Studio od razširitve Studia (2026-07-14). Imena razredov (wk-*), ki so bila prej označena kot »predlog«, so z izvedbo postala zavezujoča. Odprta specifikacijska vprašanja po posameznem gradniku so zdaj odločena in dokumentirana v ustreznem odseku. Referenca mehanike: Azure Data Studio (https://github.com/microsoft/azuredatastudio) / VS Code (https://github.com/microsoft/vscode): navedeno kot rekonstruirana mehanika, ne prevzem kode.

stopnja 1 (widgets::listFilter($targetId, $opts) + scripts/listfilter.js) · Referenca: src/vs/base/browser/ui/tree/abstractTree.ts (filter drevesa prek InputBox), src/vs/base/browser/ui/list/listWidget.ts.

Namen + razmejitev. Enovrstično filtrirno polje pod naslovno vrstico Object Explorerja, ki vidne vozle drevesa zoži na zadetke (podniz, neobčutljivo na velike/male črke). Ni pogovorno okno za iskanje (brez podokna rezultatov, brez celobesedilnega iskanja po vsebini) in ni nadomestilo za iskanje na strani strežnika – le prikazuje/skriva že naložene vozle drevesa.

Anatomija.

<div class="wk-listfilter">
  <input type="search" class="wk-listfilter__input"
         aria-controls="objtree" placeholder="Filtriraj …">
  <span class="wk-listfilter__count" role="status" aria-live="polite">7 od 20</span>
</div>
<ul id="objtree" class="wk-tree"> … filtrirano drevo … </ul>

Stanja. prazno (brez filtra, vsi vozli vidni) · fokusirano · aktivno filtrira (nezadetki skriti) · no-match (prazno drevo + zamolklo vrstica »ni zadetkov«).

Tipkovnica + ARIA. Polje kot <input type=„search“> z aria-controls na id drevesa; število zadetkov je v območju role=„status“ aria-live=„polite“, tako da je zmanjšanje napovedano. Esc izprazni filter in vrne fokus na drevo, puščica dol skoči iz polja na prvi zadetek. Drevo ohrani svojo semantiko treeitem – filter spremeni le hidden.

Nadomestilo brez JS. Degradira na nič (brez JavaScripta se ne izriše oz. je brez učinka) – »najti vozel« ostane dosegljivo prek razširitve drevesa. Filter ni nikoli edini način dostopa do vozla.

Odločeno. (a) Brez poudarjanja zadetkov v besedilu vozla v v1 (namenoma minimalistično; naknadno nadgradljivo brez kršitve pogodbe). (b) Filter deluje na celotno drevo, povezano prek aria-controls; primerja se lastna oznaka vsakega vozla (neposredna povezava oz. povzetek skupine), ne besedilo poddrevesa – sicer bi vsak prednik štel kot zadetek. © Porabniki, ki zamenjajo ciljni DOM (npr. ponovno nalaganje auxbarja), sprožijo dogodek wk-listfilter-rescan na ovojnici; trenutni filter se nato znova uveljavi.

stopnja 1 (widgets::editorTabs($tabs, $opts) + scripts/editortabs.js; upravljanje medpomnilnikov Studia: wksqliteds/script.js) · Referenca: src/vs/workbench/browser/parts/editor/ (editorTabsControl.ts, tabsTitleControl.ts – vrstica zavihkov, indikator umazanega stanja, zapiranje).

Namen + razmejitev. Več hkrati odprtih poizvedb v delovnem prostoru kot zavihki urejevalnika s piko umazanega stanja (neshranjena sprememba). Razmejiti od zavihkov pogleda Table Designerja (stolpci/indeksi/tuji ključi/sprožilci – to je tabs()-role=tablist za preklop pogleda, glej FluentUI: Tab Control – predstavitveni pregled): vrstica zavihkov urejevalnika preklaplja dokumente (vsak zavihek lasten SQL medpomnilnik), ne poglede istega predmeta.

Anatomija.

<div class="wk-editortabs" role="tablist" aria-label="Odprte poizvedbe">
  <div class="wk-editortabs__tab is-active" role="tab" aria-selected="true">
    <span class="wk-editortabs__title">poizvedba1.sql</span>
    <span class="wk-editortabs__dirty" aria-hidden="true">•</span>
    <button class="wk-editortabs__close" aria-label="Zapri">×</button>
  </div>
  <div class="wk-editortabs__tab" role="tab" aria-selected="false"> … </div>
</div>

Stanja. active (v ospredju) · dirty (neshranjeno – pika namesto/nad × zaprtja) · disabled (ni preklopljivo, npr. med potekajočo izvedbo).

Tipkovnica + ARIA. role=„tablist“ z otroki role=„tab“, aria-selected; roving tabindex, puščica-levo/-desno preklopi, Delete/srednji klik zapre. Namenoma razmejeno od tablist zavihkov pogleda Designerja, da bralniki zaslona ne zamenjajo »zavihkov dokumenta« z »zavihki pogleda« (drugačen aria-label).

Nadomestilo brez JS. Degradira na eno poizvedbo (vrstica izgine, delovni prostor prikaže en sam SQL medpomnilnik) – izvedba ene poizvedbe prek POST-vračanja ostane nespremenjeno dosegljiva.

Odločeno (obstojnost: odločitev uporabnika 2026-07-14). (a) localStorage po prijavi pod wk-editortabs:<login> (kanonični ključ prek wkEditorTabs.storageKey()): zgolj preferenca prikaza – strežnik ostane brez stanja in še naprej vidi le en poslan medpomnilnik; vsebino medpomnilnikov upravlja porabnik (knjižnica upravlja vrstico in sproža dogodka wk-tabchange/wk-tabclose, slednjega je mogoče preklicati prek preventDefault). (b) Brez trde zgornje meje; vrstica se vodoravno drsi (overflow-x). © Po povezavi (povezovanje Studia: pripona ključa :<conn>) – SQL medpomnilniki so specifični za povezavo. Zadnjega preostalega zavihka ni mogoče zapreti.

stopnja 1 (widgets::commandPalette($opts) + scripts/cmdpalette.js) · Referenca: src/vs/platform/quickinput/browser/ (quickInput.ts), src/vs/workbench/contrib/quickaccess/.

Namen + razmejitev. Splošen preklop dejanj/navigacije (vzorec Ctrl+Shift+P): osrednje vnosno polje filtrira seznam vseh dosegljivih dejanj/ciljev skoka. Ni nadomestilo za menije/ukazno vrstico (ti ostanejo primarno, vidno upravljanje) in ni iskanje podatkov – naslavlja dejanja, ne vsebino.

Anatomija.

<div class="wk-cmdpalette" role="dialog" aria-modal="true" aria-label="Ukazi">
  <input class="wk-cmdpalette__input" role="combobox"
         aria-expanded="true" aria-controls="cmdlist" aria-activedescendant="cmd-3">
  <ul id="cmdlist" class="wk-cmdpalette__list" role="listbox">
    <li id="cmd-3" role="option" aria-selected="true">Izvozi tabelo …</li>
    <li role="option">Izberi povezavo …</li>
  </ul>
</div>

Stanja. prazno (vsa dejanja) · filtrirano · no-match (»Ni ustreznega dejanja«).

Tipkovnica + ARIA. Kombinacija pogovorno okno + listbox: role=„dialog“ aria-modal=„true“ okoli polja role=„combobox“, ki prek aria-activedescendant kaže na aktivno vrstico role=„option“ znotraj role=„listbox“. Puščica gor/dol se premika, Enter sproži, Esc zapre in vrne fokus na sprožilec; fokus ostane ujet v prekrivnem oknu. Predlagana tipka za odpiranje: Ctrl+Shift+P – označeno kot predlog (možen spor z brskalnikom/razširitvijo, preveriti pri izvedbi).

Nadomestilo brez JS. Degradira na nič – vsako dejanje palete je dodatno dosegljivo prek menija, ukazne vrstice ali raila modula (paleta je zgolj pospešek, nikoli edina pot).

Odločeno. (a) Tipka za odpiranje Ctrl+Shift+P kot predlagano – dokumentiran spor (Firefox: zasebno okno) ostaja, zato je vidni sprožilec (gumb data-wk-palette-trigger, ki ga script.js v Studiu vstavi v ukazno vrstico) pot brez spora. (b) Register dejanj nastane dinamično iz DOM-a ob vsakem odpiranju: vsak viden element z data-wk-cmd postane možnost (vrednost atributa = oznaka, prazna vrednost = besedilo elementa); Enter znova sproži izvirni element prek .click() – brez druge kodne poti, strežniško filtriranje ACL/samo-za-branje vidnega markupa ostaja merodajno. © Obseg = aktivni pogled (le tam obstaja viden, označen markup) – dejanja med moduli so zato namenoma izven obsega.

stopnja 1 (pogodba atributa data-wk-panelmax + scripts/panelmax.js + CSS-območje .wk-shell-panel) · Referenca: src/vs/workbench/browser/layout.ts (razred postavitve maximized, stikalo podokna); razredi vidnosti glej FluentUI: osnovna postavitev podrobno.

Namen + razmejitev. Začasno preklopiti podokno rezultatov delovnega prostora na polno višino vsebine (več vrstic brez drsenja). Ni celozaslonski način (brez fullscreen izven lupine) in ni novo okno – raste le območje podokna, ukazna vrstica/vrstica stanja/rail ostanejo.

Anatomija.

<div class="wk-shell-panel wk-shell-panel--max">
  <div class="wk-shell-panel__header">
    <span>Rezultati</span>
    <button class="wk-shell-panel__maximize is-active"
            aria-pressed="true" aria-label="Maksimiraj podokno">⤢</button>
  </div>
  <div class="wk-shell-panel__body"> … mreža rezultatov … </div>
</div>

Stanja. normalno · maksimirano (modifikator .wk-shell-panel--max na območju podokna; stikalni gumb dobi .is-active).

Tipkovnica + ARIA. Stikalni gumb z aria-pressed (vklop/izklop ohranjenega stanja) – namenoma ne aria-expanded (to bi opisovalo razširitev/skrčitev skrite vsebine; tu se le poveča vidna vsebina). Enter/Presledek preklopi, fokus ostane na gumbu.

Nadomestilo brez JS. Ne velja – brez JavaScripta ni maksimiranja; podokno ostane v normalni velikosti (povsem funkcionalno, le brez povečave).

Odločeno. (a) aria-pressed potrjeno – stikalo hrani stanje vklop/izklop vidne vsebine, aria-expanded bi opisoval razkrivanje skrite vsebine. (b) Da, kot preferenca prikaza po kontekstu: localStorage wk-panelmax:<context> (kontekst = vrednost atributa gumba; prazna vrednost = brez obstojnosti) – enak vzorec kot velikost pogovornega okna delovnega prostora. © Maksimirano podokno zapolni svoj pozicijski kontekst (.wk-shell-content, ki ima za to position:relative v CSS-ju knjižnice) in začasno prekrije notranjo delitev drsenja; ukazna vrstica, vrstica stanja in raili ostanejo vidni – smernica prilagoditve vidnemu polju velja nespremenjeno, brž ko se stikalo povrne.

En gradnik, generičen za vsak skrbniški vtičnik z AdminPlugin::getTOC() (ni vezan na Studio, drugače kot prejšnji odsek) – uveden ob poenotenju sistema oblikovanja (2026-07-17).

stopnja 1 (widgets::accordion($items, $opts), glej referenco API; prvi porabnik wkfluentui/action/admintoc.php) · referenca: družina WDX WdxNavigationControl (<workspace>/WvdS/php/packages/WvdS.Wdx.Ui/src/Navigation/), konkretno expandMode=„Single“ komponente WdxAccordion – prevzet je koncept (izključujoče odpiranje in zapiranje), ne koda (WDX je ogrodje za serializacijo lastnosti za izvajalno okolje JS, ta gradnik pa je na strežniku izrisan izvorni HTML).

Namen in razmejitev. Razdeli dolg, ploski skrbniški zaslon (npr. upravitelja konfiguracije z ~45–60 odseki obrazca) na izključujoče razširljive bloke – en klik pokaže natanko en odsek, drugi se samodejno zaprejo. To ni kontrolnik zavihkov (brez role=„tablist“, brez vodoravne glave – odseki ostanejo navpično zloženi) in ni nadomestek za tree() (ta ostane navigacija do odseka; Accordion je prikaz vsebine odseka).

Anatomija.

<div class="wk-accordion">
  <details class="wk-accordion__item" name="wk-accordion-admintoc" id="lang" open>
    <summary class="wk-accordion__summary">Jezik</summary>
    <div class="wk-accordion__body"> … polja obrazca … </div>
  </details>
  <details class="wk-accordion__item" name="wk-accordion-admintoc" id="title">
    <summary class="wk-accordion__summary">Naslov</summary>
    <div class="wk-accordion__body"> … polja obrazca … </div>
  </details>
</div>

Stanja. odprto/zaprto po odseku; izključujoče znotraj iste skupine name (izvorno vedenje brskalnika za <details name="…"> – JavaScript ni potreben).

Tipkovnica in ARIA. Lasten vzorec ARIA ni potreben – <summary> je izvorno fokusirljiv in upravljiv s tipkama Enter/Space, brskalnik sam upravlja stanje odprtja in izključljivost.

Nadomestilo brez JS. Brez izgube funkcije – <details> v celoti deluje brez JavaScripta. Edina omejitev ob manjkajoči podpori za izključljivost name (brskalniki, starejši od Chrome/Edge 120, Firefox 122, Safari 17.2, ~2023/24): vsi odseki lahko ostanejo hkrati odprti – enako kot pred uvedbo tega gradnika, brez regresije.

Sprejete odločitve. (a) Izključljivost na ravni strani, ne le znotraj skupine odsekov obrazca: wkfluentui/action/admintoc.php vsem blokom harmonike na isti strani dodeli isti context (admintoc), tudi če so vizualno ločeni z vmesnimi naslovi brez harmonike (<h1> na odsek getTOC()) – en sam odprt odsek čez vso stran, ne le znotraj enega odseka. (b) Privzeto odprt odsek: prvi v vrstnem redu dokumenta, razen če parameter poizvedbe ?section=<id> (pomemben le za začetno stanje ob nalaganju) izbere drugega – vsi poznejši kliki potekajo v celoti na odjemalcu prek <details name>, brez nove zahteve.

disabled, hover, focus/focused, active, checked/selected, error/warning/info, expanded/collapsed, dragging/drop-target.

Konvencija poimenovanja razredov: koren monaco-<widget> z modifikatorskimi razredi (brez formalnega BEM –modifier). Za wkfluentui analogno predlagano: koren wk-<widget> z istimi imeni modifikatorjev, da se uveljavljeni besednjak stanj prevzame 1:1.

Troslojni model: (1) osrednji register barv/velikosti s privzetimi vrednostmi za svetlo/temno/visok kontrast (registerColor()/registerSize()), (2) mehanska izpeljava imena domain.property → –vscode-domain-property, (3) EN generiran slogovni list, omejen na korenski vsebnik, ki materializira vrednosti aktivne teme. Uporablja se bodisi neposredno prek CSS var() bodisi prek tipiziranega »objekta slogov«, ki se posreduje konstruktorju gradnika (uporabno, kadar mora isti gradnik izrisovati v različnih barvnih prostorih). Glej FluentUI: oblikovalski žetoni za preprostejšo različico, dejansko uveljavljeno v wkfluentui (statični žetoni –wk-* brez ravni registra, stopnja 1).