erui je knihovna komponent ERPOWER nad headless knihovnou hui. Každá komponenta je zde se všemi stavy: značení i chování je přímo z hui, erui dodává jen vzhled. Použití na e-shopu ukazuje Storyboard.
Tlačítka a drobné prvky
Icon
DoplněnoIkony Lucide, tah 1,5. Jedna akce má všude stejnou ikonu.
Button
Z návrhuhui.Button. Každé tlačítko s akcí má vlevo ikonu, při čekání ji vystřídá spinner a text zůstane. Stavy jsou vykreslené natrvalo.
Spinner
DoplněnoPřevzatý z Parida: kroužek se točí s náběhem a jeho oblouk při tom roste a zkracuje se.
Tag a Status
Z návrhuŠtítek vždy na jednom řádku. Stav je tečka a slovo, barva nikdy nemluví sama.
EP-TW10K-BLK OBJ-26-004218 IČO:12345678Kbd
DoplněnoKaždá klávesa je vlastní prvek <kbd>, kombinace je obalí dalším <kbd>. Hranu klávesy dělá silnější spodní okraj, bez stínu. Klávesa ⌘ se mimo Mac sama přepíše na Ctrl.
Hledání otevřete zkratkou⌘Ka zavřete klávesouEsc
Carousel
Doplněnohui ho nemá, stojí na nativním posouvání se scroll-snap, takže na mobilu funguje tažení prstem. Automatické přehrávání se zastaví při najetí, při fokusu i tlačítkem a respektuje nastavení omezeného pohybu. Skryté snímky jsou inert, takže se na ně nedá dostat klávesnicí.
Separator
DoplněnoCard a Tile
Z návrhuKarta je obecný blok. Dlaždice je akční blok z návrhu.
Fakturační adresa
Použije se u další objednávky
Vídeňská 120/5
639 00 Brno
Pole a volby
Stav drží hui.Field, takže popisek, pole, nápověda i chyba mají vždy stejné atributy. Výška 42 px, mono 12,5 px a linka line-strong jsou z návrhu.
Field a TextInput
Z návrhuDopravce pošle SMS o doručení.
Zadejte e-mail ve tvaru vas@email.cz.
Platnost slevového kódu skončila.
Textarea
DoplněnoVýchozí výška 96 px, roste s textem.
Poznámka může mít nejvýš 200 znaků.
Select
DoplněnoNativní výběr hui. Vlastní vzhled seznamu umí zatím Chromium, ostatní prohlížeče ukážou systémový se stejnými hodnotami.
Vyberte zemi doručení.
Listbox
DoplněnoPlugin hui: šipky, Enter, Esc, psaní písmen, skupiny, více hodnot, hledání. V ukázce hledání filtruje demo.js místo serveru.
Vyberte důvod reklamace.
Combobox
DoplněnoPlugin hui: píšete přímo do pole. Filtruje server, v ukázce místo něj demo.js. Shoda se značí bez ohledu na diakritiku, zkuste napsat „ces“.
Vyberte výdejní místo.
Checkbox
DoplněnoVybraný stav má značkovou barvu jako aktivní mutace v hlavičce.
Akce a novinky jednou za 14 dní.
Bez souhlasu nelze objednat.
Radio a Fieldset
DoplněnoSkupinu drží hui.Fieldset, šipky a roving tabindex řeší plugin.
Switch
DoplněnoOkamžitá volba bez odeslání. Hranatý, plné zaoblení je v návrhu jen u teček.
Range
DoplněnoNativní posuvníky hui. Plugin hlídá, aby se jezdci nepřekřížili, a hodnoty vystavuje Alpine jako values.
Pro tuto cenu není žádný produkt.
FileUpload
DoplněnoPlugin hui: klik i přetažení, seznam vybraných souborů, filtr podle typu. Soubory se nikam neodesílají.
JPG, PNG nebo PDF
- poskozeny-konektor-usb-c-detail-zepredu.jpg
- faktura.pdf
Přiložte alespoň jednu fotku.
Quantity
DoplněnoSložené z hui.Button a hui.TextInput, stav drží Alpine. Mezní hodnota vypne tlačítko.
Okna, nabídky a oznámení
Všechny překryvy sdílejí jeden zásobník hui: Esc zavře jen ten horní, obsah se přesouvá do hui.Portals a kotví se v CSS. Návrh nemá stíny, takže je odděluje linka nebo tmavá plocha.
Modal
DoplněnoPast fokusu, inert okolí, Esc, klik mimo i zámek posouvání řeší plugin hui.
Dropdown
DoplněnoŠipky, Home, End, psaní písmen, návrat fokusu. Položka má fokus i při najetí, proto je zvýraznění :focus.
Tooltip
Doplněnohui nemá spouštěč, ovládací výrazy dostane libovolný prvek. Najetí, fokus i klepnutí. Tmavá plocha, bez stínu.
Toast
DoplněnoV ostré aplikaci je posílá jen server přes htmx. V ukázce je vkládá demo.js. Časovač se při najetí zastaví, chyba zůstává do zavření.
Alert
Doplněnohui.Alert: zpráva o celé stránce nebo formuláři. Stav nese ikona a barva, text říká, co se stalo. Chyba jednoho pole patří do Field.
Banka platbu odmítla. Objednávka je uložená, zkuste platbu zopakovat.
Objednávka se odešle až po naskladnění, nejpozději 4. 9.
Sleva QI2LETO je započítaná v košíku.
Účet má firemní cenovou skupinu.
Tabulka a stavy obsahu
Table
DoplněnoKompaktní, bez šedých řádků. Výběr řádku značí jen zaškrtávátko a značková linka vlevo. Řazení a výběr dělá v ostré aplikaci server přes htmx.
| Stav | Položky | ||||
|---|---|---|---|---|---|
| OBJ-26-004218 | 4. 11. 2026 | Odesláno | 3 | 2 489,00 Kč | |
| OBJ-26-004107 | 28. 10. 2026 | Čeká na platbu | 1 | 1 290,00 Kč | |
| OBJ-26-003954 | 12. 10. 2026 | Na cestě | 2 | 749,00 Kč | |
| OBJ-26-003802 | 30. 9. 2026 | Zrušeno | 1 | 449,00 Kč | |
| Celkem | 7 | 4 977,00 Kč | |||
| Neřadí se |
|---|
| Stav | Položky | |||
|---|---|---|---|---|
| OBJ-26-004218 | 4. 11. 2026 | Odesláno | 3 | 2 489,00 Kč |
| OBJ-26-004107 | 28. 10. 2026 | Čeká na platbu | 1 | 1 290,00 Kč |
| OBJ-26-003954 | 12. 10. 2026 | Na cestě | 2 | 749,00 Kč |
| OBJ-26-003802 | 30. 9. 2026 | Zrušeno | 1 | 449,00 Kč |
| Číslo | Celkem |
|---|---|
| OBJ-26-004218 | 2 489,00 Kč |
| OBJ-26-004218 |
| Číslo | Stav | Celkem |
|---|---|---|
| OBJ-26-004218 | Odesláno | 2 489,00 Kč |
| OBJ-26-004107 | Čeká na platbu | 1 290,00 Kč |
Meter
Doplněnohui.Meter: hodnota ve známém rozsahu. Barvu určuje stav, který spočítá hui z Low, High a Optimum.
EmptyState a Skeleton
DoplněnoNic neodpovídá filtrům
Zkuste odebrat některý filtr nebo hledat jiným výrazem.
Dlouhý text z CMS
Stačí obalit obsah do .prose, jednotlivé prvky žádné třídy nepotřebují.
Prose
DoplněnoNadpis kapitoly
Běžný odstavec s odkazem, tučným textem, kurzívou a kódem EP-TW10K-BLK. Šířka řádku je omezená, aby se dlouhý text dobře četl.
Podnadpis
Druhý odstavec navazuje stejnými rozestupy jako první.
- Položka seznamu
- Položka s vnořeným seznamem
- Vnořená položka
Menší nadpis
- Číslovaná položka
- Další číslovaná položka
- Klauzule označená písmenem
- Další klauzule
Citace nebo důležitá poznámka k textu.
Odstavec za oddělovačem.
Správce údajů
Text první kapitoly.
Účely zpracování
Text druhé kapitoly.
Úvodní ustanovení
- První klauzule kapitoly.
- Druhá klauzule kapitoly.
Objednávka
- Číslování začíná znovu podle kapitoly.