Chip

Díky své kompaktní podobě umožňuje efektivní práci s daty v omezeném prostoru. Chipy mohou být interaktivní – například s možností odebrání nebo výběru – a snadno se přizpůsobují různým kontextům použití, od štítků v seznamu po filtry ve vyhledávání.

Vlastnosti

Typy

Existují tři typy čipů s vlastním specifickým použitím a chováním. Bez ikony, s ikonou a s křížkem pro odstranění. Volitelnou úvodní ikonu lze použít, pokud přidává vizuální popis textu na štítek.

Velikosti

Chip má dvě velikosti. Small ve výšce 20px a Large ve výšce 36px. Small se používá uvnitř jiných form komponent (např. Multiselect) a na mobilním rozlišení.

Varianty

Chip máme ve třech variantách. Základní Base má jako jediný editovatelnou ikonu a lze tak nastavit dle potřeby. Další jsou varianty pro message stavy. Poslední varianty se používají pro označování produktových řad. Barevnost i ikony u message a produktových chipů jsou dané a není povoleno je měnit.

Chování

Přetékání textu

Šířka čipu závisí na délce jeho popisku. Snažte se omezit text na maximálně 1–3 slova (20 znaků) a není dovolené text zalamovat. Je možné použít vlastnost “truncate”. Neopravujte šířku čipu ani jeho text nezkracujte, abyste ho zmenšili.

Možnosti rozvržení

Čipy se mohou pohybovat buď po horizontální liště (1), nebo se mohou svisle zalamovat (2). Záleží na použití a na množstvím obsahu na stránce. Horizontální lišta čipů je výchozí rozvržení, které by mělo fungovat pro většinu případů. Svislé zarovnání použijete např. v modálním okně. Na menších screenech může horizontální zarovnání přetékat přes hranu rozlišení. Uživatel nabídku čipů pak posouvá gestem.

Vymazání vstupu

Samotné chipy se odstraňují tlačítem pro odstranění (1) Případně v rámci zobrazeného menu lze odstranit obsah hlavním checkboxem (2) u filtru.

LiteralView

Responsivita