ChipChip

Chip se používá k usnadnění zadávání informací uživatelem, provádění výběrů, filtrování obsahu nebo provádění souvisejících akcí.

Způsob použití

Importujte komponentu podle potřeby:

import 'mdui/components/chip.js';

Importujte TypeScript typy komponenty podle potřeby:

import type { Chip } from 'mdui/components/chip.js';

Příklad použití:

Chip

<mdui-chip>Chip</mdui-chip>

Po přidání atributu deletable se na pravé straně chipu objeví ikona odstranění. Kliknutím na tuto ikonu se spustí událost delete. Název ikony Material Icons pro ikonu odstranění lze určit pomocí atributu delete-icon nebo prvku ikony odstranění v slotu delete-icon.

Chip

<mdui-chip deletable>Chip</mdui-chip>
<mdui-chip deletable delete-icon="backspace">Chip</mdui-chip>
<mdui-chip deletable>
  Chip
  <mdui-icon slot="delete-icon" name="backspace"></mdui-icon>
</mdui-chip>

Zdrojový kód

API

Vlastnosti

Atribut	Vlastnost	Typ	Výchozí
`variant`	`variant`	`'assist' \| 'filter' \| 'input' \| 'suggestion'`	`'assist'`
Varianta chipu. Možné hodnoty: `assist`: Používá se pro zobrazení pomocných akcí souvisejících s aktuálním kontextem, např. sdílení, ukládání do oblíbených na stránce objednávky jídla. `filter`: Používá se pro filtrování obsahu, např. filtrování výsledků vyhledávání. `input`: Používá se k reprezentaci informací zadaných uživatelem, např. kontaktů v poli „Komu“ v Gmailu. `suggestion`: Používá se pro poskytování dynamicky generovaných doporučení pro usnadnění uživatelských akcí, např. predikce zpráv, které chce uživatel odeslat v chatovací aplikaci.
`elevated`	`elevated`	`boolean`	`false`
Určuje, zda se má zobrazit stín.
`selectable`	`selectable`	`boolean`	`false`
Určuje, zda lze chip vybrat.
`selected`	`selected`	`boolean`	`false`
Určuje, zda je chip vybrán.
`deletable`	`deletable`	`boolean`	`false`
Určuje, zda lze chip odstranit. Pokud je `true`, zobrazí se na pravé straně chipu ikona pro odstranění.
`icon`	`icon`	`string`	-
Název ikony z knihovny Material Icons na levé straně. Lze také nastavit pomocí `slot="icon"`.
`selected-icon`	`selectedIcon`	`string`	-
Název ikony z knihovny Material Icons na levé straně ve vybraném stavu. Lze také nastavit pomocí `slot="selected-icon"`.
`end-icon`	`endIcon`	`string`	-
Název ikony z knihovny Material Icons na pravé straně. Lze také nastavit pomocí `slot="end-icon"`.
`delete-icon`	`deleteIcon`	`string`	-
Název ikony z knihovny Material Icons pro odstranění na pravé straně, pokud je chip odstranitelný. Lze také nastavit pomocí `slot="delete-icon"`.
`href`	`href`	`string`	-
Cílová URL odkazu. Pokud je tato vlastnost nastavena, komponenta se interně vykreslí jako prvek `<a>` a zpřístupní se vlastnosti pro odkazy.
`download`	`download`	`string`	-
Soubor ke stažení. Poznámka: Platí pouze, pokud je nastaven atribut `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Způsob otevření odkazu. Možné hodnoty: `_blank`: Otevře odkaz v novém okně nebo kartě. `_parent`: Otevře odkaz v nadřazeném okně. `_self`: Výchozí možnost. Otevře odkaz ve stejném okně. `_top`: Otevře odkaz v celém okně. Poznámka: Platí pouze, pokud je nastaven atribut `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Vztah mezi aktuálním dokumentem a odkazovaným dokumentem. Možné hodnoty: `alternate`: Alternativní verze aktuálního dokumentu. `author`: Autor aktuálního dokumentu nebo článku. `bookmark`: Trvalý odkaz na konkrétní část dokumentu. `external`: Odkaz vede na externí zdroj (mimo aktuální web/doménu). `help`: Odkaz na související nápovědu. `license`: Hlavní obsah aktuálního dokumentu je pokryt licencí odkazovaného dokumentu. `me`: Odkaz směřuje na profil vlastníka (rel="me"). `next`: Aktuální dokument je součástí série a odkazovaný dokument je následující v sérii. `nofollow`: Autor nebo vydavatel aktuálního dokumentu neschvaluje odkazovaný dokument. `noreferrer`: Neodesílá HTTP hlavičku `Referer`. Má podobný účinek jako `noopener`. `opener`: Pokud má odkaz atribut `target="_blank"`, atribut `rel="opener"` určuje, zda nové okno nebo karta bude mít přístup k původnímu oknu přes `window.opener`. `prev`: Aktuální dokument je součástí série a odkazovaný dokument je předchozí v sérii. `search`: Odkazuje na vyhledávací zdroj pro aktuální dokument a související stránky. `tag`: Poskytuje štítek vhodný pro aktuální dokument (identifikovaný danou adresou). Poznámka: Dostupné pouze při zadání atributu `href`.
`autofocus`	`autofocus`	`boolean`	`false`
Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
`tabindex`	`tabIndex`	`number`	-
Pořadí prvku při přepínání fokusu pomocí klávesy Tab.
`disabled`	`disabled`	`boolean`	`false`
Určuje, zda je prvek zakázaný.
`loading`	`loading`	`boolean`	`false`
Určuje, zda je prvek ve stavu načítání.
`name`	`name`	`string`	`''`
Název tlačítka, který se odešle spolu s daty formuláře. Poznámka: Tato vlastnost platí pouze, pokud není nastaven atribut `href`.
`value`	`value`	`string`	`''`
Počáteční hodnota tlačítka, která se odešle spolu s daty formuláře. Poznámka: Tato vlastnost platí pouze, pokud není nastaven atribut `href`.
`type`	`type`	`'submit' \| 'reset' \| 'button'`	`'button'`
Typ tlačítka. Výchozí typ je `button`. Možné typy: `submit`: Kliknutím na tlačítko se odešlou data formuláře na server. `reset`: Kliknutím na tlačítko se všechna pole ve formuláři resetují na počáteční hodnoty. `button`: Tento typ tlačítka nemá žádné výchozí chování. Poznámka: Tato vlastnost platí pouze, pokud není zadán atribut `href`.
`form`	`form`	`string`	-
Přidružený formulář `<form>`. Hodnotou by mělo být `id` prvku `<form>` na stejné stránce. Pokud není atribut zadán, musí být tento prvek potomkem `<form>`. Díky tomuto atributu jej však lze umístit kamkoli na stránku, nejen jako potomka `<form>`. Poznámka: Tato vlastnost platí pouze, pokud není zadán atribut `href`.
`formaction`	`formAction`	`string`	-
Adresa URL pro odeslání formuláře. Přepíše atribut `action` formuláře, pokud je nastaven. Poznámka: Tato vlastnost platí pouze, pokud není zadán atribut `href` a `type="submit"`.
`formenctype`	`formEnctype`	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	-
Typ obsahu při odesílání formuláře na server. Možné hodnoty: `application/x-www-form-urlencoded`: Výchozí hodnota, pokud atribut není zadán. `multipart/form-data`: Používá se, když formulář obsahuje prvek `<input type="file">`. `text/plain`: Přidáno v HTML5; používá se pro ladění. Přepíše atribut `enctype` prvku `<form>`, pokud je nastaven. Poznámka: Tato vlastnost platí pouze, pokud není zadán atribut `href` a `type="submit"`.
`formmethod`	`formMethod`	`'post' \| 'get'`	-
HTTP metoda pro odeslání formuláře. Možné hodnoty: `post`: Data formuláře jsou obsažena v těle požadavku a odeslána na server. `get`: Data formuláře jsou připojena k URI formuláře pomocí `?` jako oddělovače a výsledné URI je odesláno na server. Tato metoda se používá, když formulář nemá vedlejší účinky a obsahuje pouze ASCII znaky. Přepíše atribut `method` prvku `<form>`, pokud je nastaven. Poznámka: Tato vlastnost platí pouze, pokud není zadán atribut `href` a `type="submit"`.
`formnovalidate`	`formNoValidate`	`boolean`	`false`
Je-li nastaven, přeskočí se při odesílání formuláře validace. Přepíše atribut `novalidate` prvku `<form>`, pokud je nastaven. Poznámka: Tato vlastnost platí pouze, pokud není zadán atribut `href` a `type="submit"`.
`formtarget`	`formTarget`	`'_self' \| '_blank' \| '_parent' \| '_top'`	-
Určuje, kde se zobrazí odpověď po odeslání formuláře. Možné hodnoty: `_self`: Výchozí chování. Otevře se ve stejném okně. `_blank`: Otevře se v novém okně nebo kartě. `_parent`: Otevře se v nadřazeném okně. `_top`: Otevře se v celém okně. Přepíše atribut `target` prvku `<form>`, pokud je nastaven. Poznámka: Tato vlastnost platí pouze, pokud není zadán atribut `href` a `type="submit"`.
	`validity`	`ValidityState`	-
Objekt s informacemi o stavu validace formuláře; podrobnosti viz `ValidityState`.
	`validationMessage`	`string`	-
Pokud pole formuláře neprojde validací, tato vlastnost obsahuje chybovou zprávu. Při úspěšné validaci je výsledkem prázdný řetězec.

Metody

Název	Parametry	Vrací
`click`		`void`
Simuluje kliknutí myší na prvek.
`focus`	`options: FocusOptions` (Volitelné)	`void`
Nastaví fokus na aktuální prvek. Lze předat objekt jako parametr s vlastnostmi: `preventScroll`: Ve výchozím nastavení se po získání fokusu stránka posune tak, aby byl prvek viditelný. Pokud nechcete, aby se stránka posouvala, nastavte tuto vlastnost na `true`.
`blur`		`void`
Odebere fokus z aktuálního prvku.
`checkValidity`		`boolean`
Zkontroluje, zda pole formuláře prošlo validací. Pokud ne, vrátí `false` a spustí událost `invalid`; pokud ano, vrátí `true`.
`reportValidity`		`boolean`
Zkontroluje, zda pole formuláře prošlo validací. Pokud ne, vrátí `false` a spustí událost `invalid`; pokud ano, vrátí `true`. Při neúspěšné validaci se zobrazí chybová zpráva.
`setCustomValidity`	`message: string`	`void`
Nastaví vlastní chybový text. Dokud tento text není prázdný, znamená to, že pole neprošlo validací.

Události

Název
`focus`
Spustí se při získání fokusu.
`blur`
Spustí se při ztrátě fokusu.
`invalid`
Spustí se, pokud pole formuláře neprojde validací.
`change`
Spustí se při změně stavu výběru.
`delete`
Spustí se při kliknutí na ikonu odstranění.

Slots

Název
(výchozí)
Text chipu.
`icon`
Prvek na levé straně.
`end-icon`
Prvek na pravé straně.
`selected-icon`
Prvek na levé straně ve vybraném stavu.
`delete-icon`
Prvek pro odstranění na pravé straně, pokud je chip odstranitelný.

CSS Parts

Název
`button`
Interní prvek `<button>` nebo `<a>`.
`label`
Text chipu.
`icon`
Ikona na levé straně.
`end-icon`
Ikona na pravé straně.
`selected-icon`
Ikona na levé straně ve vybraném stavu.
`delete-icon`
Ikona pro odstranění na pravé straně, pokud je chip odstranitelný.
`loading`
Prvek `<mdui-circular-progress>` ve stavu načítání.

CSS Custom Properties

Název
`--shape-corner`
Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.

Předchozí kapitola

Checkbox Zaškrtávací políčko

Další kapitola

CircularProgress Kruhový indikátor průběhu

ChipChip

Způsob použití

Příklady

Tvar

Stín

Ikona

Odkaz

Zakázaný stav a stav načítání

Volitelné

Odstranitelné