Ukázka komponent (showcase)
Interní stránka s ukázkou všech komponent a jejich variant, které lze použít v článku. Slouží ke kontrole vzhledu po úpravách webu. Stránka nemá kategorii, nevede na ni žádný odkaz a vyhledávače ji neindexují.
Text a nadpisy
Odstavec s tučným textem, kurzívou, inline kódem, interním odkazem, odkazem na sekci, externím odkazem a e-mailem.
Systémový tag jako kód: #ORDER_STOREFRONT_DETAIL_BUTTON#.
Nadpis H3
Nadpis H3 je v obsahu článku vpravo, H4 ne.
Nadpis H4
Text pod nadpisem H4.
Nadpis s pevnou kotvou
Tento nadpis má kotvu #pevna-kotva, která se nezmění ani po přejmenování nadpisu: odkaz na pevnou kotvu.
Nadpis s ikonou
Ikona v nadpisu se škáluje s velikostí písma.
Seznamy
Odrážkový seznam:
- první položka
- druhá položka
- vnořená položka
- druhá úroveň vnoření
- vnořená položka
- třetí položka
Číslovaný seznam:
- první krok
- druhý krok
- vnořený krok
- další vnořený krok
- třetí krok
Kombinace:
- číslovaná položka
- odrážka uvnitř
- další odrážka
- další číslovaná položka
Blok kódu
<LOGISTIC>
<WEIGHT>1.5</WEIGHT>
</LOGISTIC>
Citace a oddělovač
Citace. V článcích se běžně nepoužívá, ukázka jen pro kontrolu stylu.
Text za vodorovným oddělovačem.
Alert
Barvy s výchozím nadpisem
Barva info: neutrální vysvětlení chování.
Barva success: tip nebo doporučení.
Barva warning: podmínky a omezení.
Barva danger: vážné riziko.
Vlastní nadpis
<Alert color="success" title="Příklad">
Dlouhý nadpis se zalomí vedle ikony.
Bohatší obsah
Tučný úvod k seznamu:
- první bod s odkazem,
- druhý bod s
inline kódem, - třetí bod s ikonou .
Druhý odstavec v boxu.
Bez barvy
Alert bez color nemá řádek s nadpisem ani ikonu.
Ikony
| Ikona | name |
|---|---|
alert | |
b2b | |
clipboard | |
cross | |
customer-note | |
document | |
document-add | |
education | |
face-negative | |
face-neutral | |
face-positive | |
fire | |
helpdesk | |
hidden | |
info | |
marketing | |
merchant-comment | |
merchant-note | |
next | |
notification | |
orders | |
pdf | |
plus | |
print | |
products | |
remove | |
rocket | |
settings | |
shoptet-symbol | |
shoptet-symbol-outline | |
tip | |
visible |
Po najetí myší se zobrazí výchozí titulek ikony z jazykového souboru.
Barvy ikon
Výchozí barva z adminu:
Barva okolního textu (color="inherit"):
Vlastní barva (color="#8a2be2"):
Ikona v odkazu: stáhnout doklad
Ikony v textu
Objednávku vytisknete ikonou , řádek odstraníte ikonou a nový přidáte tlačítkem Přidat (title="": dekorativní ikona, čtečka ji nepřečte).
Barevné tečky
| Tečka | color | Tvar |
|---|---|---|
success | zelené kolečko | |
error | červený šestiúhelník | |
warning | oranžový kosočtverec | |
info | světle modré kolečko | |
informative | indigové kolečko | |
default | šedé kolečko |
V textu: Vyřízena, Čeká, (tečka s label má titulek po najetí myší).
V Alertu:
Stav poznáte podle tečky a odkaz zkopírujete ikonou .
Obrázky
Se stínem (shadow):
Bez stínu:
S omezenou šířkou (maxWidth="280px"):
Bez popisku (caption chybí, obrázek má prázdný alt):
Tabulky
Standardní tabulka článku (responsive bordered, hlavička light):
| Cena | Do částky | Poznámka |
|---|---|---|
| 100 Kč | 1 500 Kč | Buňka s více odstavci. Druhý odstavec s kurzívou. |
| 0 Kč | neomezeno | Buňka s ikonou a tečkou |
Pruhovaná a kompaktní (striped size="small"), bez hlavičky:
| první řádek | hodnota |
| druhý řádek | hodnota |
| třetí řádek | hodnota |
Video
S poměrem 4:3 a omezenou šířkou (ratio={4/3}, maxWidth="480px"):