# Přehled Začněme s mdui přes CDN a s nejjednodušší šablonou stránky. > Čtete dokumentaci mdui 2! > > Chcete-li si přečíst dokumentaci mdui 1, navštivte [www.mdui.org/docs/](https://www.mdui.org/docs/). ## Rychlý start {#getting-started} Nejjednodušší způsob, jak používat mdui, je zavést soubory CSS a JS přímo z CDN. Pokud chcete nainstalovat mdui pomocí npm, nahlédněte do kapitoly [Instalace](/cs/docs/2/getting-started/installation). **Zavedení souborů** Přidejte následující kód do `` stránky: ```html ``` Pokud potřebujete použít atributy ikon komponent (např. atribut `icon` v ``), musíte také zavést soubor CSS ikon. Viz [Použití ikon Material Icons](/cs/docs/2/components/icon#usage-material-icons). mdui není závislé na žádných knihovnách třetích stran. Po zavedení výše uvedených souborů bude vše fungovat. ## Nejjednodušší šablona stránky {#template} Níže je nejjednodušší šablona stránky, do které můžete přidat další komponenty a obsah a vytvořit tak webovou stránku. ```html Ahoj, světe! Ahoj, světe! ``` # Instalace Můžete si vybrat instalaci mdui přes npm nebo jeho zavedení přes CDN. Doporučujeme instalaci přes npm. ## Instalace přes npm {#npm} ```bash npm install mdui --save ``` ### Úplný import {#full-import} Importujte následující dva soubory do vstupního souboru projektu a budete moci používat všechny komponenty mdui: ```js import 'mdui/mdui.css'; import 'mdui'; ``` Lze také importovat jen potřebné funkce přímo z mdui. Například funkci [`snackbar`](/cs/docs/2/functions/snackbar) můžete importovat takto: ```js import { snackbar } from 'mdui'; ``` Zobrazit všechny funkce podporující import z mdui 
import {
  $,
  dialog,
  alert,
  confirm,
  prompt,
  snackbar,
  getTheme,
  setTheme,
  getColorFromImage,
  setColorScheme,
  removeColorScheme,
  loadLocale,
  setLocale,
  getLocale,
  throttle,
  observeResize,
  breakpoint
} from 'mdui';
 ### Import podle potřeby {#cherry-picking} Pro optimalizaci velikosti projektu můžete importovat pouze potřebné komponenty a funkce. Pokud například potřebujete použít pouze komponentu [``](/cs/docs/2/components/button) a funkci [`snackbar`](/cs/docs/2/functions/snackbar), můžete je importovat následovně: ```js // Soubor CSS je vždy nutné importovat import 'mdui/mdui.css'; // Import komponenty import 'mdui/components/button.js'; // Import funkce snackbar import { snackbar } from 'mdui/functions/snackbar.js'; ``` Na stránce s dokumentací každé komponenty nebo funkce je podrobně vysvětleno, jak provést import podle potřeby. Zobrazit všechny komponenty a funkce podporující import podle potřeby 
import 'mdui/components/avatar.js';
import 'mdui/components/badge.js';
import 'mdui/components/bottom-app-bar.js';
import 'mdui/components/button.js';
import 'mdui/components/button-icon.js';
import 'mdui/components/card.js';
import 'mdui/components/checkbox.js';
import 'mdui/components/chip.js';
import 'mdui/components/circular-progress.js';
import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';
import 'mdui/components/dialog.js';
import 'mdui/components/divider.js';
import 'mdui/components/dropdown.js';
import 'mdui/components/fab.js';
import 'mdui/components/icon.js';
import 'mdui/components/layout.js';
import 'mdui/components/layout-item.js';
import 'mdui/components/layout-main.js';
import 'mdui/components/linear-progress.js';
import 'mdui/components/list.js';
import 'mdui/components/list-item.js';
import 'mdui/components/list-subheader.js';
import 'mdui/components/menu.js';
import 'mdui/components/menu-item.js';
import 'mdui/components/navigation-bar.js';
import 'mdui/components/navigation-bar-item.js';
import 'mdui/components/navigation-drawer.js';
import 'mdui/components/navigation-rail.js';
import 'mdui/components/navigation-rail-item.js';
import 'mdui/components/radio.js';
import 'mdui/components/radio-group.js';
import 'mdui/components/range-slider.js';
import 'mdui/components/ripple.js';
import 'mdui/components/segmented-button.js';
import 'mdui/components/segmented-button-group.js';
import 'mdui/components/select.js';
import 'mdui/components/slider.js';
import 'mdui/components/snackbar.js';
import 'mdui/components/switch.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';
import 'mdui/components/tabs.js';
import 'mdui/components/text-field.js';
import 'mdui/components/tooltip.js';
import 'mdui/components/top-app-bar.js';
import 'mdui/components/top-app-bar-title.js';
import { $ } from 'mdui/jq.js';
import { alert } from 'mdui/functions/alert.js';
import { breakpoint } from 'mdui/functions/breakpoint.js';
import { confirm } from 'mdui/functions/confirm.js';
import { dialog } from 'mdui/functions/dialog.js';
import { getColorFromImage } from 'mdui/functions/getColorFromImage.js';
import { getLocale } from 'mdui/functions/getLocale.js';
import { getTheme } from 'mdui/functions/getTheme.js';
import { loadLocale } from 'mdui/functions/loadLocale.js';
import { observeResize } from 'mdui/functions/observeResize.js';
import { prompt } from 'mdui/functions/prompt.js';
import { removeColorScheme } from 'mdui/functions/removeColorScheme.js';
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
import { setLocale } from 'mdui/functions/setLocale.js';
import { setTheme } from 'mdui/functions/setTheme.js';
import { snackbar } from 'mdui/functions/snackbar.js';
import { throttle } from 'mdui/functions/throttle.js';
 ## CDN {#cdn} Můžete použít značky `` a ` Klikněte na mě ``` ### Použití sestavení verze ES modulů {#es-module} Následující příklad ukazuje, jak používat sestavení verze ES modulů mdui. V této verzi můžete pomocí syntaxe ES modulů importovat mdui z CDN: ```html Klikněte na mě ``` # Rychlý start Všechny komponenty mdui jsou standardní Web Components. Komponenty mdui můžete používat stejně jako značku `
`. Dokumentace každé komponenty podrobně popisuje její kompletní API, včetně atributů, metod, událostí, slotů, CSS Partů, CSS Custom Property atd. Tato kapitola shrnuje, jak Web Components používat. ## Atributy {#attribute} Atributy se dělí na HTML atributy a JavaScript vlastnosti. Obvykle jsou v párovém vztahu a jsou synchronizovány. To znamená, že když aktualizujete hodnotu HTML atributu, aktualizuje se také odpovídající JavaScript vlastnost a naopak. HTML atributy lze nastavit přímo v HTML řetězci komponenty a číst a upravovat je pomocí metod `getAttribute` a `setAttribute`: ```html Klikněte na mě ``` JavaScript vlastnosti lze číst nebo nastavovat přímo na instanci komponenty: ```html Klikněte na mě ``` Některé vlastnosti jsou typu boolean. Pokud je HTML atribut těchto vlastností přítomen, je JavaScript vlastnost `true`, jinak je `false`. Aby však byla zajištěna kompatibilita s některými frameworky, mdui považuje řetězcovou hodnotu `false` také za boolean hodnotu `false`. ```html ``` Někdy jsou hodnotami vlastností pole, objekty nebo funkce. V takovém případě existuje pouze JavaScript vlastnost a žádný odpovídající HTML atribut. Například vlastnost [`labelFormatter`](/cs/docs/2/components/slider#attributes-labelFormatter) komponenty [``](/cs/docs/2/components/slider) je funkce, kterou lze nastavit pouze pomocí JavaScriptu: ```html ``` Níže je uveden příklad části dokumentace vlastností komponenty [``](/cs/docs/2/components/slider): | HTML atribut | JavaScript vlastnost | reflect | | ------------ | -------------------- | -------------------------------------------------------------------------------------- | | `name` | `name` | | | `value` | `value` | | | | `labelFormatter` | | U této komponenty má vlastnost `name` jak HTML atribut, tak JavaScript vlastnost a sloupec reflect označuje, že aktualizace JavaScript vlastnosti synchronizuje HTML atribut. U vlastnosti `value` se při aktualizaci JavaScript vlastnosti HTML atribut nesynchronizuje. Vlastnost `labelFormatter` má pouze JavaScript vlastnost. ## Metody {#method} Některé komponenty poskytují veřejné metody, které můžete volat k dosažení různých funkcí. Například metoda [`focus()`](/cs/docs/2/components/text-field#methods-focus) komponenty [``](/cs/docs/2/components/text-field) umožňuje zaměřit textové pole. ```html ``` Na stránkách dokumentace jednotlivých komponent naleznete všechny dostupné metody a jejich parametry. ## Události {#event} Některé komponenty při provádění určitých akcí spouštějí události. Například komponenta [``](/cs/docs/2/components/dialog) při otevření spouští událost [`open`](/cs/docs/2/components/dialog#events-open). Na tuto událost můžete naslouchat a provádět vlastní akce. ```html Dialog ``` Na stránkách dokumentace jednotlivých komponent naleznete všechny dostupné události a jejich parametry. Pokud používáte mdui v jiných frameworkách (např. Vue, React, Angular), můžete k navázání událostí použít syntaxi poskytovanou daným frameworkem. Některé frameworky (např. React) však mohou mít syntaxi pro navázání událostí pouze pro standardní události (např. `click`), nikoli pro vlastní události (např. `open`). Proto při navazování vlastních událostí v Reactu musíte nejprve získat referenci na prvek a poté použít metodu `addEventListener` k navázání události. Další informace o používání mdui v Reactu naleznete v části [Integrace s frameworky - React](/cs/docs/2/frameworks/react). ## Slot {#slot} Mnoho komponent poskytuje sloty pro vložení vlastního HTML obsahu do vnitřku komponenty. Nejčastější je výchozí slot, což je běžný HTML nebo prostý text uvnitř komponenty. Například výchozí slot komponenty [``](/cs/docs/2/components/button) slouží k nastavení textu tlačítka. V příkladu je "Klikněte na mě" obsahem výchozího slotu: ```html Klikněte na mě ``` Některé komponenty také poskytují pojmenované sloty. U pojmenovaných slotů je nutné v HTML atributu `slot` zadat název slotu. V následujícím příkladu komponenta [``](/cs/docs/2/components/icon) určuje `slot="start"`, což znamená, že se jedná o pojmenovaný slot s názvem [`start`](/cs/docs/2/components/button#slots-icon), a tato ikona bude vložena na levou stranu vnitřku komponenty: ```html Nastavení ``` Pokud komponenta používá více pojmenovaných slotů, pořadí jednotlivých pojmenovaných slotů není důležité, pokud jsou uvnitř komponenty, prohlížeč je automaticky umístí na správná místa. Na stránkách dokumentace jednotlivých komponent naleznete všechny podporované sloty. ## CSS Custom Property {#css-custom-properties} CSS Custom Property jsou proměnné v CSS. mdui definuje řadu [globálních CSS Custom Property](/cs/docs/2/styles/design-tokens), které jsou odkazovány uvnitř jednotlivých komponent. Proto můžete úpravou těchto CSS Custom Property globálně měnit styly komponent mdui. Například následující kód zmenší zaoblení rohů všech komponent: ```css :root { --mdui-shape-corner-extra-small: 0.125rem; --mdui-shape-corner-small: 0.25rem; --mdui-shape-corner-medium: 0.375rem; --mdui-shape-corner-large: 0.5rem; --mdui-shape-corner-extra-large: 0.875rem; } ``` CSS Custom Property můžete také upravovat v lokálním rozsahu. Například následující kód zmenší zaoblení rohů pouze v prvku s `class="sharp"` a jeho potomcích: ```css .sharp { --mdui-shape-corner-extra-small: 0.125rem; --mdui-shape-corner-small: 0.25rem; --mdui-shape-corner-medium: 0.375rem; --mdui-shape-corner-large: 0.5rem; --mdui-shape-corner-extra-large: 0.875rem; } ``` Některé komponenty také poskytují CSS Custom Property specifické pro danou komponentu. Rozsah těchto vlastností je omezen na konkrétní komponentu, a proto neobsahují předponu `--mdui`. Například následující kód pomocí úpravy vlastnosti `--z-index` komponenty [``](/cs/docs/2/components/dialog) mění styl `z-index`: ```css mdui-dialog { --z-index: 3000; } ``` Na stránkách dokumentace jednotlivých komponent naleznete CSS Custom Property podporované danou komponentou. ## CSS Part {#css-part} Komponenty mdui používají shadow DOM k zapouzdření stylů a chování, ale běžné CSS selektory nemohou vybrat prvky uvnitř shadow DOM. Proto některé komponenty přidávají atribut `part` prvkům shadow DOM. Pomocí selektoru `::part` můžete vybrat odpovídající prvek a přepsat část stylů. Například následující kód pomocí part [`button`](/cs/docs/2/components/button#cssParts-button) upravuje vnitřní odsazení tlačítka a pomocí part [`label`](/cs/docs/2/components/button#cssParts-label), [`icon`](/cs/docs/2/components/button#cssParts-icon), [`end-icon`](/cs/docs/2/components/button#cssParts-end-icon) upravuje barvu textu a levé/pravé ikony: ```html Tlačítko ``` Strukturu prvků shadow DOM komponenty a jejich výchozí styly můžete zobrazit pomocí vývojářských nástrojů prohlížeče. Před použitím CSS Part byste měli nejprve zvážit, zda vaše potřeby splňují globální CSS Custom Property a CSS Custom Property specifické pro danou komponentu. Pokud ano, měli byste upřednostnit použití CSS Custom Property pro přizpůsobení stylů. Na stránkách dokumentace jednotlivých komponent naleznete všechny vlastnosti `part`, které komponenta zpřístupňuje. ## Mechanismus aktualizace komponenty {#update-mechanism} Komponenty mdui jsou vyvinuty na základě [Lit](https://lit.dev/). Lit je lehká knihovna, která zjednodušuje vývoj Web Components. Při používání komponent mdui možná budete potřebovat znát mechanismus jejich vykreslování a aktualizace. Když upravíte vlastnost komponenty mdui, komponenta se znovu vykreslí. Tento proces opětovného vykreslování však není synchronní. Když upravíte více hodnot vlastností najednou, Lit tyto změny uloží do vyrovnávací paměti až do dalšího cyklu aktualizace, aby se zajistilo, že bez ohledu na to, kolikrát upravíte hodnoty vlastností, se každá komponenta vykreslí pouze jednou. Navíc se znovu vykreslí pouze změněné části shadow DOM. V následujícím příkladu nastavíme JavaScript vlastnost `disabled` tlačítka na `true` a poté okamžitě vyhledáme jeho HTML atribut. Protože však komponenta ještě nebyla znovu vykreslena, bude nalezený HTML atribut stále `false`: ```js const button = document.querySelector('mdui-button'); button.disabled = true; console.log(button.hasAttribute('disabled')); // false ``` Chcete-li počkat na dokončení opětovného vykreslení po změně hodnoty vlastnosti, můžete použít vlastnost `updateComplete` komponenty. Tato vlastnost vrací Promise. Když je Promise vyřešen (resolve), komponenta dokončila opětovné vykreslení: ```js const button = document.querySelector('mdui-button'); button.disabled = true; button.updateComplete.then(() => { console.log(button.hasAttribute('disabled')); // true }); ``` # Podpora TypeScriptu mdui je vyvíjeno v TypeScriptu, takže poskytuje dobrou podporu pro TypeScript. Všechny oficiální balíčky mdui obsahují deklarace typů a lze je používat přímo. ## Typ instance komponenty {#instance} Někdy možná budete potřebovat přetypovat proměnnou z JavaScriptu na instanci komponenty mdui. V takovém případě můžete importovat odpovídající typ komponenty přímo z mdui. Například import typu komponenty Tooltip ze souboru komponenty: ```ts import type { Tooltip } from 'mdui/components/tooltip.js'; ``` Nebo import typu komponenty Tooltip přímo z mdui: ```ts import type { Tooltip } from 'mdui'; ``` Poté můžete přetypovat proměnnou JavaScript na typ Tooltip: ```ts const tooltip = document.querySelector('mdui-tooltip') as Tooltip; ``` Vaše IDE nyní bude automaticky nabízet vlastnosti a metody proměnné `tooltip`. Pokud na proměnné `tooltip` přidáte posluchač události, bude také automaticky nabízen název události, typ události a to, na co odkazuje `this` v callback funkci: ```ts tooltip.addEventListener('open', function (event) {}); ``` ## Typ události {#event} Každá komponenta exportuje rozhraní, které mapuje názvy událostí komponenty a odpovídající typy objektů událostí. Název rozhraní je `${ComponentName}EventMap`. Například komponenta Tooltip exportuje rozhraní s názvem `TooltipEventMap`: ```ts export interface TooltipEventMap { open: CustomEvent; opened: CustomEvent; close: CustomEvent; closed: CustomEvent; } ``` Toto rozhraní můžete importovat ze souboru komponenty: ```ts import type { TooltipEventMap } from 'mdui/components/tooltip.js'; ``` Nebo toto rozhraní importovat přímo z mdui: ```ts import type { TooltipEventMap } from 'mdui'; ``` Upozorňujeme, že toto rozhraní obsahuje pouze události specifické pro danou komponentu. Komponenty mdui však dědí z `HTMLElement`, takže podporují také události `HTMLElement`. Pomocí průnikového typu můžete získat všechny typy událostí komponenty: ```ts type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap; ``` # Podpora pro IDE mdui je speciálně optimalizováno pro VS Code a WebStorm. V těchto IDE získáte funkce jako automatické dokončování kódu a nápovědu při najetí myší. ## VS Code {#vscode} ### mdui nainstalované přes npm {#vscode-npm} Pokud jste nainstalovali mdui přes npm, postupujte podle následujících kroků pro povolení podpory IDE VS Code v aktuálním projektu: 1. V kořenovém adresáři projektu vytvořte adresář `.vscode`. 2. V adresáři `.vscode` vytvořte soubor `settings.json`. 3. Do souboru `settings.json` přidejte následující kód: ```json { "html.customData": ["./node_modules/mdui/html-data.en.json"], "css.customData": ["./node_modules/mdui/css-data.en.json"] } ``` Pokud soubor `settings.json` již existuje, stačí přidat výše uvedené dva řádky do kořenového objektu JSON souboru. Po úpravě restartujte VS Code. ### mdui používané přes CDN {#vscode-cdn} Pokud jste mdui zavedli přes CDN, můžete získat podporu IDE instalací rozšíření VS Code pro mdui. Vyhledejte `mdui` v obchodě s rozšířeními VS Code a vyberte první výsledek k instalaci, nebo klikněte [zde pro instalaci](vscode:extension/zdhxiong.mdui). Po instalaci bude podpora IDE pro mdui povolena ve všech projektech. Doporučujeme upřednostnit instalaci přes npm a nastavení souboru `settings.json` před instalací rozšíření VS Code, aby byla zajištěna shoda podpory IDE s aktuálně používanou verzí mdui. ## WebStorm {#webstorm} ### mdui nainstalované přes npm {#webstorm-npm} Pokud jste nainstalovali mdui přes npm, postupujte podle následujících kroků pro povolení podpory IDE WebStorm v aktuálním projektu: 1. Do kořenového uzlu souboru `package.json` v kořenovém adresáři projektu přidejte následující kód: ```json { "web-types": ["./node_modules/mdui/web-types.en.json"] } ``` Pokud v kořenovém uzlu souboru `package.json` již existuje vlastnost `web-types`, stačí přidat `./node_modules/mdui/web-types.en.json` do pole `web-types`. Po úpravě restartujte WebStorm. ### mdui používané přes CDN {#webstorm-cdn} Pokud jste mdui zavedli přes CDN, můžete získat podporu IDE instalací pluginu WebStorm pro mdui. Vyhledejte `mdui` v obchodě s pluginy WebStorm a vyberte první výsledek vyhledávání k instalaci. Po instalaci bude podpora IDE pro mdui povolena ve všech projektech. Doporučujeme upřednostnit instalaci přes npm pro získání podpory IDE před instalací pluginu WebStorm, aby byla zajištěna shoda podpory IDE s aktuálně používanou verzí mdui. ## Rozdíly v podpoře mezi VS Code a WebStorm {#difference} Podpora mdui pro VS Code a WebStorm se mírně liší. Následující tabulka uvádí podrobné rozdíly: | Kde je k dispozici automatické dokončování kódu a zobrazení nápovědy při najetí myší | VS Code | WebStorm | | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | | Názvy HTML značek | | | | Názvy atributů v HTML značkách | | | | Výčtové hodnoty atributů v HTML značkách | | (nepodporuje zobrazování komentářů k výčtovým hodnotám) | | Názvy událostí v HTML značkách | | | | Hodnoty atributu `name` slotu v HTML | | | | Hodnoty atributu `part` selektoru `::part()` v CSS | | | | Názvy CSS Custom Property uvnitř komponenty v CSS | | | | Názvy globálních CSS Custom Property v CSS | | | | Názvy globálních tříd v CSS | | | # Lokalizace mdui interně používá angličtinu. Pokud potřebujete jiný jazyk, je nutné nastavit vícejazyčnou konfiguraci. ## Způsob použití {#usage} mdui nabízí tři funkce pro práci s lokalizací: - [`loadLocale`](/cs/docs/2/functions/loadLocale): Načte jazykový balíček. Parametrem je funkce, která přijímá kód jazyka jako parametr a vrací Promise. Když je jazykový balíček načten, Promise je vyřešen (resolve) na odpovídající jazykový balíček. Zavolejte tuto funkci ve vstupním souboru projektu. - [`setLocale`](/cs/docs/2/functions/setLocale): Přepne na zadaný jazyk. Parametrem je nový kód jazyka, návratovou hodnotou je Promise, který je vyřešen po načtení nového jazykového balíčku. - [`getLocale`](/cs/docs/2/functions/getLocale): Získá aktuální kód jazyka. Příklad použití: ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; import { setLocale } from 'mdui/functions/setLocale.js'; import { getLocale } from 'mdui/functions/getLocale.js'; // Na vstupu projektu zavolejte loadLocale pro načtení jazykového balíčku loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`)); // Když potřebujete přepnout jazyk, zavolejte tuto funkci. Po vyřešení (resolve) Promise je přepnutí jazyka dokončeno setLocale('zh-cn').then(() => { // Voláním getLocale získáte aktuální kód jazyka console.log(getLocale()); // zh-cn }); ``` ## Události stavu {#event} Na začátku, konci a při selhání přepínání jazyka se na `window` spustí událost `mdui-localize-status`. Můžete ji poslouchat a provádět vlastní akce, například zapsat kód jazyka do cookie po úspěšném přepnutí jazyka. Vlastnost `detail.status` události popisuje, k jaké změně stavu došlo. Možné hodnoty: `loading`, `ready`, `error`:
detail.status Popis
loading

Začíná se načítat nový jazykový balíček.

Objekt detail obsahuje:

  • loadingLocale: Kód jazyka nově načítaného jazykového balíčku.
ready

Nový jazykový balíček byl úspěšně načten.

Objekt detail obsahuje:

  • readyLocale: Kód jazyka nově načteného jazykového balíčku.
error

Načtení nového jazykového balíčku selhalo.

Objekt detail obsahuje:

  • errorLocale: Kód jazyka jazykového balíčku, jehož načtení selhalo.
  • errorMessage: Chybová zpráva při selhání načtení.
Příklad použití: ```js window.addEventListener('mdui-localize-status', (event) => { if (event.detail.status === 'loading') { console.log( `Začíná se načítat nový jazykový balíček: ${event.detail.loadingLocale}`, ); } else if (event.detail.status === 'ready') { console.log( `Nový jazykový balíček ${event.detail.readyLocale} byl úspěšně načten`, ); } else if (event.detail.status === 'error') { console.error( `Načtení nového jazykového balíčku ${event.detail.errorLocale} selhalo: ${event.detail.errorMessage}`, ); } }); ``` ## Způsoby načtení jazykového balíčku {#load-locale} ### Líné načítání {#lazy-load} Použití [dynamického importu](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) umožňuje stáhnout odpovídající jazykový balíček až při přepnutí na daný jazyk. Toto je nejdoporučovanější metoda. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`)); ``` ### Přednačítání {#pre-load} Při načítání stránky se předem stáhnou všechny potřebné jazykové balíčky. To znamená, že při přepínání jazyků není nutné další stahování, což činí přepínání jazyků rychlejším. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; const localizedTemplates = new Map([ ['zh-cn', import(`../node_modules/mdui/locales/zh-cn.js`)], ['zh-tw', import(`../node_modules/mdui/locales/zh-tw.js`)], ]); loadLocale(async (locale) => localizedTemplates.get(locale)); ``` ### Statický import {#static-imports} Tato metoda umožňuje zabalit všechny potřebné jazykové balíčky do jednoho souboru spolu s kódem vašeho projektu, takže již není nutné stahovat jazykové balíčky samostatně. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; import * as locale_zh_cn from 'mdui/locales/zh-cn.js'; import * as locale_zh_tw from 'mdui/locales/zh-tw.js'; const localizedTemplates = new Map([ ['zh-cn', locale_zh_cn], ['zh-tw', locale_zh_tw], ]); loadLocale(async (locale) => localizedTemplates.get(locale)); ``` ## Načtení jazykového balíčku přes CDN {#cdn} Pokud používáte mdui přes CDN, můžete jazykový balíček načíst přímo z CDN. Příklad použití: ```html ``` ## Podporované jazyky {#languages} mdui v současné době podporuje následující jazyky: | Jazyk | Kód jazyka | | ----------------------------- | ---------- | | arabština | ar-eg | | ázerbájdžánština | az-az | | bulharština | bg-bg | | bengálština (Bangladéš) | bn-bd | | běloruština | be-by | | katalánština | ca-es | | čeština | cs-cz | | dánština | da-dk | | němčina | de-de | | řečtina | el-gr | | angličtina | en-gb | | angličtina (americká) | en-us | | španělština | es-es | | estonština | et-ee | | perština | fa-ir | | finština | fi-fi | | francouzština (Belgie) | fr-be | | francouzština (Kanada) | fr-ca | | francouzština (Francie) | fr-fr | | irština | ga-ie | | galicijština (Španělsko) | gl-es | | hebrejština | he-il | | hindština | hi-in | | chorvatština | hr-hr | | maďarština | hu-hu | | arménština | hy-am | | indonéština | id-id | | italština | it-it | | islandština | is-is | | japonština | ja-jp | | gruzínština | ka-ge | | khmérština | km-kh | | severní kurdština | kmr-iq | | kannadština | kn-in | | kazaština | kk-kz | | korejština | ko-kr | | litevština | lt-lt | | lotyština | lv-lv | | makedonština | mk-mk | | malajálamština | ml-in | | mongolština | mn-mn | | malajština (Malajsie) | ms-my | | norština | nb-no | | nepálština | ne-np | | nizozemština (Belgie) | nl-be | | nizozemština | nl-nl | | polština | pl-pl | | portugalština (Brazílie) | pt-br | | portugalština | pt-pt | | rumunština | ro-ro | | ruština | ru-ru | | slovenština | sk-sk | | srbština | sr-rs | | slovinština | sl-si | | švédština | sv-se | | tamilština | ta-in | | thajština | th-th | | turečtina | tr-tr | | urdština (Pákistán) | ur-pk | | ukrajinština | uk-ua | | vietnamština | vi-vn | | zjednodušená čínština | zh-cn | | tradiční čínština (Hongkong) | zh-hk | | tradiční čínština (Tchaj-wan) | zh-tw | ## Odeslání nového překladu {#contribute} Chcete-li přispět novým překladem nebo vylepšit stávající překlad, vytvořte prosím Pull Request na Githubu. Jazykové balíčky se nacházejí v [`packages/mdui/src/xliff`](https://github.com/zdhxiong/mdui/tree/v2/packages/mdui/src/xliff). Můžete je upravovat přímo na Githubu. # Často kladené otázky Zde jsou uvedeny některé často kladené otázky a oficiální odpovědi z komunity mdui. Než položíte otázku, doporučujeme vyhledat podobné problémy. ## Proč se komponenta nezobrazí při použití samouzavírací značky? {#no-self-closing} mdui je knihovna komponent založená na Web Components. Specifikace Web Components nepodporuje samouzavírací značky, proto prosím zajistěte, aby komponenty mdui měly uzavírací značku. ```html ``` ## Jak skrýt komponentu před dokončením jejího načtení? {#waiting-load} Protože komponenty mdui jsou registrovány pomocí JavaScriptu, mohou se před načtením a registrací souboru js komponenty dočasně zobrazovat bez stylů. Následující dva způsoby tento problém řeší: Jedním ze způsobů je použít CSS pseudotřídu [`:defined`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:defined) ke skrytí neregistrovaných komponent mdui. Následující CSS kód skryje všechny neregistrované komponenty mdui a zobrazí je ihned po registraci: ```css :not(:defined) { visibility: hidden; } ``` Druhým způsobem je použít JavaScript metodu [`customElements.whenDefined()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined). Tato metoda vrací promise, který je vyřešen (resolve) po dokončení registrace zadané komponenty. Pro zpracování případů, kdy se některou komponentu nepodaří načíst, můžete použít metodu [`Promise.allSettled()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled). Následující příklad nejprve skryje `` pomocí `opacity: 0` a poté po dokončení registrace komponent stránku plynule zobrazí. Použitím `Promise.allSettled()` se čeká na dokončení všech promise, aby se zajistilo, že se stránka zobrazí i v případě, že se některou komponentu nepodaří načíst: ```html ``` # LLMs.txt mdui poskytuje `llms.txt` a `llms-full.txt` pro poskytování přesného a citovatelného kontextu LLM (velkým jazykovým modelům), což pomáhá AI spolehlivěji odpovídat na otázky týkající se mdui. ## Použití llms.txt pro poskytnutí kontextu AI {#context} Dva vstupní body: - `llms.txt`: https://www.mdui.org/cs/docs/2/llms.txt - `llms-full.txt`: https://www.mdui.org/cs/docs/2/llms-full.txt `llms.txt` je stručný index, vhodný pro modely s přístupem k internetu, aby mohly podle odkazů načíst potřebné Markdown stránky, nebo pro poskytnutí přehledu projektu. `llms-full.txt` obsahuje úplný kontext, včetně veškerého obsahu stránek z `llms.txt`, a je vhodný pro modely, které nemají přístup k internetu, nebo když je potřeba poskytnout úplný kontext najednou. ## Markdown verze dokumentace {#md-mirror} Každá stránka dokumentace má odpovídající Markdown verzi: stačí na konec URL stránky přidat `.md` (na úvodní stránku přidejte `index.md`). Například: https://www.mdui.org/cs/docs/2/components/button → https://www.mdui.org/cs/docs/2/components/button.md https://www.mdui.org/cs/docs/2/ → https://www.mdui.org/cs/docs/2/index.md Tento odkaz na Markdown nebo jeho prostý text můžete přímo použít jako kontext pro získání přesnějších odpovědí. ## Jak používat v ChatGPT, Claude a dalších LLM {#how-to-use} Podle toho, zda model podporuje přístup k internetu / nahrávání souborů, vyberte jednu z následujících možností nebo jejich kombinaci: 1. Přímé vložení: Vložte obsah `llms-full.txt` jako systémovou výzvu nebo první zprávu. Příklad: "Následuje kontext mdui. Přísně se jím řiďte při odpovídání na další otázky; v případě nejasností má přednost tento kontext:\n\n[vložit obsah llms-full.txt]". 2. Nahrání souboru: Nahrajte soubor `llms-full.txt` (nebo `llms.txt`) a v první zprávě upřesněte, že hlavním kontextem je příloha. Příklad: "Na základě dokumentace mdui v příloze uveďte použití a nejčastější chyby ``". 3. Online čtení: V konverzaci zadejte odkaz na `llms.txt` nebo `llms-full.txt`. Příklad: "Přečtěte si prosím a řiďte se https://www.mdui.org/cs/docs/2/llms-full.txt jako kontextem a odpovězte na mé otázky o mdui". 4. Odkaz na konkrétní stránku: Pokud diskutujete pouze o konkrétní komponentě/funkci, zadejte přímo Markdown adresu této stránky. Příklad: "Přečtěte si prosím https://www.mdui.org/cs/docs/2/components/button.md a na základě tohoto dokumentu uveďte tři osvědčené postupy". **Tip**: Klikněte na ikonu v pravém horním rohu stránky, která podporuje zkopírování výše uvedeného odkazu, otevření Markdown verze aktuální stránky nebo otevření aktuální stránky či `llms-full.txt` jako kontextu v ChatGPT. # MCP server mdui poskytuje vyhrazený [MCP (Model Context Protocol)](https://modelcontextprotocol.io/) server `@mdui/mcp` pro poskytování schopností dotazování na komponenty, ikony, CSS vlastní vlastnosti a dokumentaci pro AI agenty lokálně. Lze jej použít ve spojení s vývojovými nástroji jako Claude Code, Cursor, GitHub Copilot pro usnadnění generování kódu a lepší využití komponent a stylů mdui. ## Nástroje {#tools} MCP server mdui vystavuje AI agentům následující nástroje: - `list_components`: Vypíše všechny komponenty mdui. - `get_component_metadata`: Získá podrobná metadata API pro jednu komponentu. - `list_css_classes`: Vypíše globální názvy CSS tříd. - `list_css_variables`: Vypíše globální CSS vlastní vlastnosti. - `list_documents`: Vypíše všechny dokumenty. - `get_document`: Získá úplný obsah jednoho dokumentu. - `list_icon_codes`: Vypíše kódy ikon použitelné v atributech nebo API. - `list_icon_components`: Vypíše samostatné komponenty ikon a jejich příkazy pro import ESM. ## Způsob použití {#usage} MCP server podporuje pouze [stdio přenos](https://modelcontextprotocol.io/specification/2025-06-18/basic/transports#stdio) a lze jej přímo používat v klientech jako VS Code, Cursor, Claude Code, Windsurf, Zed a v AI agentech podporujících stdio protokol. ### VS Code {#vscode} > Ujistěte se, že máte nainstalovaná rozšíření [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) a [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat). 1. V kořeni projektu vytvořte `.vscode/mcp.json` a přidejte následující konfiguraci: ```json { "servers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Klikněte na tlačítko "Spustit" v souboru `mcp.json`. 3. Začněte konverzaci v GitHub Copilot Chat. ### Cursor {#cursor} 1. V kořenovém adresáři projektu vytvořte nebo upravte `.cursor/mcp.json` a přidejte následující konfiguraci: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Přejděte do Settings > Cursor Settings > MCP & Integrations a povolte server mdui. 3. Začněte konverzaci v Cursor Chat. ### Claude Code {#claude-code} 1. V terminálu spusťte následující příkaz pro přidání MCP serveru mdui: ```bash claude mcp add mdui -- npx -y @mdui/mcp ``` 2. Poté spusťte `claude` pro zahájení relace. 3. Zadejte výzvu a začněte používat. ### Windsurf {#windsurf} 1. Přejděte do Settings > Windsurf Settings > Cascade 2. Klikněte na Manage MCPs, poté na "View raw config" a do konfiguračního souboru přidejte: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` > Pokud se MCP server neobjeví automaticky, klikněte na Refresh pro obnovení seznamu. 3. Zadejte výzvu a začněte konverzaci. ### Zed {#zed} 1. Otevřete Settings > Open Settings a do souboru `settings.json` přidejte následující konfiguraci: ```json { "context_servers": { "mdui": { "source": "custom", "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Zadejte výzvu a začněte používat. ### Vlastní MCP klient {#custom} Při použití vlastního MCP klienta v místním nebo vývojovém prostředí jednoduše přidejte tento server do konfiguračního souboru klienta. Například: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` # Tmavý režim Všechny komponenty mdui podporují tmavý režim a podporují automatické přepínání motivu podle nastavení operačního systému. Kdykoli můžete kliknout na ikonu v pravém horním rohu stránky dokumentace a přepínat motiv a prohlížet si vzhled jednotlivých komponent v různých motivech. Chcete-li použít tmavý režim, stačí přidat třídu `mdui-theme-dark` na prvek ``: ```html ``` Chcete-li, aby se motiv automaticky přepínal podle nastavení operačního systému, stačí přidat třídu `mdui-theme-auto` na prvek ``: ```html ``` Různé části stránky mohou mít také různé motivy. Například v následujícím příkladu je na `` nastaven tmavý režim, ale na jednom `
` na stránce je přidána třída `mdui-theme-light`, takže prvky v tomto div se zobrazí ve světlém režimu, zatímco zbytek stránky zůstane v tmavém režimu: ```html
``` Kromě přímého přidávání CSS tříd poskytuje mdui dvě funkce pro pohodlnější práci s motivy: - [`getTheme`](/cs/docs/2/functions/getTheme): Získá motiv aktuální stránky nebo zadaného prvku. - [`setTheme`](/cs/docs/2/functions/setTheme): Nastaví motiv aktuální stránky nebo zadaného prvku. --- Je důležité si uvědomit, že mdui nastavuje styly `color` a `background-color` na selektorech `:root`, `.mdui-theme-light`, `.mdui-theme-dark` a `.mdui-theme-auto`. Pokud se vám tyto výchozí styly nelíbí, můžete je přepsat. Následující příklad nastaví pozadí stránky ve světlém režimu na čistě bílou a text na čistě černou; v tmavém režimu nastaví pozadí stránky na čistě černou a text na čistě bílou: ```css :root, .mdui-theme-light { color: #000; background-color: #fff; } .mdui-theme-dark { color: #fff; background-color: #000; } @media (prefers-color-scheme: dark) { .mdui-theme-auto { color: #fff; background-color: #000; } } ``` # Dynamická barva mdui poskytuje funkci dynamické barvy. Stačí zadat hodnotu barvy a mdui automaticky vygeneruje kompletní barevné schéma. Kromě toho mdui také podporuje extrahování hlavní barvy ze zadané tapety a vygenerování barevného schématu na jejím základě. Kdykoli můžete kliknout na ikonu v pravém horním rohu stránky dokumentace a přepínat barevná schémata a prohlížet si vzhled jednotlivých komponent v různých barevných schématech. Barevné schéma je ve skutečnosti sada CSS Custom Property. Barvy v komponentách mdui odkazují na tuto sadu CSS Custom Property, takže lze aktualizovat barevné schéma všech komponent najednou. Úplný seznam CSS Custom Property naleznete v části [Designové tokeny - Barva](/cs/docs/2/styles/design-tokens#color). ## Vytvoření barevného schématu {#color-scheme} K vytvoření barevného schématu můžete použít funkci [`setColorScheme`](/cs/docs/2/functions/setColorScheme). Tato funkce přijímá hexadecimální hodnotu barvy jako parametr, vygeneruje barevné schéma a nastaví jej na prvek `` stránky. Například: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // Vygeneruje barevné schéma z barvy #0061a4 a nastaví jej na setColorScheme('#0061a4'); ``` V druhém parametru můžete také zadat vlastnost `target`, která určí, na kterém prvku se má barevné schéma nastavit. Například: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // Vygeneruje barevné schéma z barvy #0061a4 a nastaví jej na prvek .foo setColorScheme('#0061a4', { target: document.querySelector('.foo'), }); ``` Standardně vygenerované barevné schéma obsahuje pouze barvy uvedené v [Designové tokeny - Barva](/cs/docs/2/styles/design-tokens#color). V druhém parametru můžete zadat vlastnost `customColors` a mdui na základě názvů a hodnot vlastních barev, které zadáte vygeneruje sadu vlastních barevných skupin. Například: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // Vygeneruje barevné schéma z barvy #0061a4, upraví hodnoty stávající barevné skupiny error a přidá novou barevnou skupinu music setColorScheme('#0061a4', { customColors: [ { name: 'error', value: '#69F0AE', }, { name: 'music', value: '#FFC107', }, ], }); ``` Jedna vlastní barevná skupina obsahuje čtyři CSS Custom Property: - `--mdui-color-{name}` - `--mdui-color-on-{name}` - `--mdui-color-{name}-container` - `--mdui-color-on-{name}-container` `{name}` je název vlastní barvy, který jste zadali v `customColors`. Název vlastní barvy může být název stávající barvy ve výchozím barevném schématu, například `primary`, `secondary`, `tertiary`, `error` – to vše jsou názvy, které již výchozí barevné schéma obsahuje. Pokud zadáte tyto hodnoty jako názvy vlastních barev, pak se pro generování odpovídajících čtyř CSS Custom Property ve vygenerovaném barevném schématu použije vámi zadaná barva. Například v příkladu výše je zadána vlastní barva s názvem `error`. Protože `error` je již ve výchozím barevném schématu obsažena a její odpovídající CSS Custom Property se používají v komponentách mdui pro označení chybového stavu, nyní, když je hodnota barvy nastavena na zelenou, bude i chybový stav v komponentách mdui zelený. Název vlastní barvy může být také zcela nový, například `music` v příkladu výše, který ve výchozím barevném schématu neexistuje. Pak bude vygenerované barevné schéma obsahovat čtyři další CSS Custom Property. Na tyto CSS Custom Property můžete odkazovat ve svých vlastních stylech: ```html
Hudba
Hudební kontejner
``` K odstranění barevného schématu vytvořeného výše uvedeným způsobem můžete použít funkci [`removeColorScheme`](/cs/docs/2/functions/removeColorScheme). Můžete zadat parametr, který určí, ze kterého prvku se má barevné schéma odstranit. Standardně odstraní barevné schéma z ``. ## Extrahování barvy z tapety {#from-wallpaper} mdui poskytuje funkci [`getColorFromImage`](/cs/docs/2/functions/getColorFromImage), která extrahuje hlavní barvu z dané instance `Image`. Tato funkce vrací Promise, jehož hodnotou je extrahovaná hexadecimální hodnota barvy. Můžete použít barvu získanou touto funkcí a poté zavolat funkci [`setColorScheme`](/cs/docs/2/functions/setColorScheme) popsanou výše k nastavení barevného schématu. Například: ```js import { getColorFromImage } from 'mdui/functions/getColorFromImage.js'; import { setColorScheme } from 'mdui/functions/setColorScheme.js'; const image = new Image(); image.src = 'image1.png'; getColorFromImage(image).then((color) => setColorScheme(color)); ``` # Typografie mdui poskytuje CSS třídy `mdui-prose` a `mdui-table`, které jsou speciálně navrženy pro optimalizaci stylů článků a tabulek. ## Typografie článků {#prose} Na nadřazený prvek článku můžete přidat třídu `mdui-prose`, která optimalizuje styl zobrazení celého článku, včetně stylu tabulek `` v článku. Například: ```html

Nadpis

Text

``` ## Styly tabulek {#table} Přidáním třídy `mdui-table` na prvek `` optimalizujete styl zobrazení tabulky. Například: ```html
``` Pokud chcete, aby se tabulka mohla vodorovně posouvat v rámci svého nadřazeného prvku, přidejte třídu `mdui-table` na nadřazený prvek prvku ``. Například: ```html
``` # Designové tokeny Designové tokeny jsou způsob správy designového systému. Převádějí znovupoužitelné prvky v designovém systému (např. barvy, písma, mezery) na samostatné proměnné, aby je bylo možné jednotně spravovat a používat napříč celým systémem. mdui používá k implementaci designových tokenů globální CSS Custom Property. To znamená, že stačí upravit CSS Custom Property a můžete globálně měnit styly všech komponent mdui. Zároveň se doporučuje, abyste ve svých vlastních stylech co nejvíce odkazovali na CSS Custom Property, aby vaše styly zůstaly jednotné se styly komponent mdui. Kromě toho, při úpravě dynamického barevného schématu se vaše vlastní styly také synchronně aktualizují. ## Barva {#color} mdui poskytuje sadu CSS Custom Property pro světlý režim a sadu pro tmavý režim. Ve světlém režimu je název CSS Custom Property `--mdui-color-{name}-light`, kde `{name}` je název barvy; v tmavém režimu je to `--mdui-color-{name}-dark`. Kromě toho mdui poskytuje také sadu CSS Custom Property s názvem `--mdui-color-{name}`, která ve světlém režimu odkazuje na `--mdui-color-{name}-light` a v tmavém režimu na `--mdui-color-{name}-dark`, takže se automaticky přepíná podle světlého a tmavého režimu. Pokud potřebujete upravit hodnoty některých barev CSS Custom Property, musíte upravit obě vlastnosti `--mdui-color-{name}-light` a `--mdui-color-{name}-dark`. Při čtení CSS Custom Property použijte přímo vlastnost `--mdui-color-{name}`. Hodnotou CSS Custom Property jsou tři barevné složky RGB oddělené čárkami. Následující příklad ukazuje použití CSS Custom Property pro barvy: ```css /* Úprava hodnoty barvy primary */ :root { --mdui-color-primary-light: 103, 80, 164; --mdui-color-primary-dark: 208, 188, 255; } /* Nastavení barvy pozadí prvku foo na primary */ .foo { background-color: rgb(var(--mdui-color-primary)); } /* Nastavení barvy pozadí prvku bar na primary s neprůhledností 0.8 */ .bar { background-color: rgba(var(--mdui-color-primary), 0.8); } ``` Pokud potřebujete vytvořit zcela nové barevné schéma, doporučujeme použít funkci [`setColorScheme`](/cs/docs/2/functions/setColorScheme), která na základě zadané barvy vygeneruje celou sadu barev.
Název barvy CSS Custom Property Výchozí hodnota Příklad
Primary --mdui-color-primary-light 103, 80, 164
--mdui-color-primary-dark 208, 188, 255
--mdui-color-primary
Primary container --mdui-color-primary-container-light 234, 221, 255
--mdui-color-primary-container-dark 79, 55, 139
--mdui-color-primary-container
On primary --mdui-color-on-primary-light 255, 255, 255
--mdui-color-on-primary-dark 55, 30, 115
--mdui-color-on-primary
On primary container --mdui-color-on-primary-container-light 33, 0, 94
--mdui-color-on-primary-container-dark 234, 221, 255
--mdui-color-on-primary-container
Inverse primary --mdui-color-inverse-primary-light 208, 188, 255
--mdui-color-inverse-primary-dark 103, 80, 164
--mdui-color-inverse-primary
Secondary --mdui-color-secondary-light 98, 91, 113
--mdui-color-secondary-dark 204, 194, 220
--mdui-color-secondary
Secondary container --mdui-color-secondary-container-light 232, 222, 248
--mdui-color-secondary-container-dark 74, 68, 88
--mdui-color-secondary-container
On secondary --mdui-color-on-secondary-light 255, 255, 255
--mdui-color-on-secondary-dark 51, 45, 65
--mdui-color-on-secondary
On secondary container --mdui-color-on-secondary-container-light 30, 25, 43
--mdui-color-on-secondary-container-dark 232, 222, 248
--mdui-color-on-secondary-container
Tertiary --mdui-color-tertiary-light 125, 82, 96
--mdui-color-tertiary-dark 239, 184, 200
--mdui-color-tertiary
Tertiary container --mdui-color-tertiary-container-light 255, 216, 228
--mdui-color-tertiary-container-dark 99, 59, 72
--mdui-color-tertiary-container
On tertiary --mdui-color-on-tertiary-light 255, 255, 255
--mdui-color-on-tertiary-dark 73, 37, 50
--mdui-color-on-tertiary
On tertiary container --mdui-color-on-tertiary-container-light 55, 11, 30
--mdui-color-on-tertiary-container-dark 255, 216, 228
--mdui-color-on-tertiary-container
Surface --mdui-color-surface-light 254, 247, 255
--mdui-color-surface-dark 20, 18, 24
--mdui-color-surface
Surface dim --mdui-color-surface-dim-light 222, 216, 225
--mdui-color-surface-dim-dark 20, 18, 24
--mdui-color-surface-dim
Surface bright --mdui-color-surface-bright-light 254, 247, 255
--mdui-color-surface-bright-dark 59, 56, 62
--mdui-color-surface-bright
Surface container lowest --mdui-color-surface-container-lowest-light 255, 255, 255
--mdui-color-surface-container-lowest-dark 15, 13, 19
--mdui-color-surface-container-lowest
Surface container low --mdui-color-surface-container-low-light 247, 242, 250
--mdui-color-surface-container-low-dark 29, 27, 32
--mdui-color-surface-container-low
Surface container --mdui-color-surface-container-light 243, 237, 247
--mdui-color-surface-container-dark 33, 31, 38
--mdui-color-surface-container
Surface container high --mdui-color-surface-container-high-light 236, 230, 240
--mdui-color-surface-container-high-dark 43, 41, 48
--mdui-color-surface-container-high
Surface container highest --mdui-color-surface-container-highest-light 230, 224, 233
--mdui-color-surface-container-highest-dark 54, 52, 59
--mdui-color-surface-container-highest
Surface variant --mdui-color-surface-variant-light 231, 224, 236
--mdui-color-surface-variant-dark 73, 69, 79
--mdui-color-surface-variant
On surface --mdui-color-on-surface-light 28, 27, 31
--mdui-color-on-surface-dark 230, 225, 229
--mdui-color-on-surface
On surface variant --mdui-color-on-surface-variant-light 73, 69, 78
--mdui-color-on-surface-variant-dark 202, 196, 208
--mdui-color-on-surface-variant
Inverse surface --mdui-color-inverse-surface-light 49, 48, 51
--mdui-color-inverse-surface-dark 230, 225, 229
--mdui-color-inverse-surface
Inverse on surface --mdui-color-inverse-on-surface-light 244, 239, 244
--mdui-color-inverse-on-surface-dark 49, 48, 51
--mdui-color-inverse-on-surface
Background --mdui-color-background-light 254, 247, 255
--mdui-color-background-dark 20, 18, 24
--mdui-color-background
On background --mdui-color-on-background-light 28, 27, 31
--mdui-color-on-background-dark 230, 225, 229
--mdui-color-on-background
Error --mdui-color-error-light 179, 38, 30
--mdui-color-error-dark 242, 184, 181
--mdui-color-error
Error container --mdui-color-error-container-light 249, 222, 220
--mdui-color-error-container-dark 140, 29, 24
--mdui-color-error-container
On error --mdui-color-on-error-light 255, 255, 255
--mdui-color-on-error-dark 96, 20, 16
--mdui-color-on-error
On error container --mdui-color-on-error-container-light 65, 14, 11
--mdui-color-on-error-container-dark 249, 222, 220
--mdui-color-on-error-container
Outline --mdui-color-outline-light 121, 116, 126
--mdui-color-outline-dark 147, 143, 153
--mdui-color-outline
Outline variant --mdui-color-outline-variant-light 196, 199, 197
--mdui-color-outline-variant-dark 68, 71, 70
--mdui-color-outline-variant
Shadow --mdui-color-shadow-light 0, 0, 0
--mdui-color-shadow-dark 0, 0, 0
--mdui-color-shadow
Surface tint --mdui-color-surface-tint-color-light 103, 80, 164
--mdui-color-surface-tint-color-dark 208, 188, 255
--mdui-color-surface-tint-color
Scrim --mdui-color-scrim-light 0, 0, 0
--mdui-color-scrim-dark 0, 0, 0
--mdui-color-scrim
## Zaoblení rohů {#shape-corner} mdui poskytuje 7 různých velikostí zaoblení rohů. Následuje příklad použití těchto CSS Custom Property: ```css /* Úprava velikosti zaoblení extra-small */ :root { --mdui-shape-corner-extra-small: 0.3rem; } /* Nastavení zaoblení prvku foo na extra-small */ .foo { border-radius: var(--mdui-shape-corner-extra-small); } ``` | CSS Custom Property | Výchozí hodnota | Příklad | | --------------------------------- | --------------- | --------------------------------------------------------------------------------------------------------- | | `--mdui-shape-corner-none` | `0` |
| | `--mdui-shape-corner-extra-small` | `0.25rem` |
| | `--mdui-shape-corner-small` | `0.5rem` |
| | `--mdui-shape-corner-medium` | `0.75rem` |
| | `--mdui-shape-corner-large` | `1rem` |
| | `--mdui-shape-corner-extra-large` | `1.75rem` |
| | `--mdui-shape-corner-full` | `1000rem` |
| ## Typografie {#typescale} mdui poskytuje 15 různých stylů textu, včetně Display large, Display medium, Display small, Headline large, Headline medium, Headline small, Title large, Title medium, Title small, Label large, Label medium, Label small, Body large, Body medium, Body small. Následuje příklad použití: ```css /* Úprava stylu textu Body large */ :root { --mdui-typescale-body-large-line-height: 1.6rem; --mdui-typescale-body-large-size: 1.2rem; --mdui-typescale-body-large-tracking: 0.01rem; --mdui-typescale-body-large-weight: 400; } /* Nastavení stylu textu prvku foo na Body large */ .foo { line-height: var(--mdui-typescale-body-large-line-height); font-size: var(--mdui-typescale-body-large-size); letter-spacing: var(--mdui-typescale-body-large-tracking); font-weight: var(--mdui-typescale-body-large-weight); } ```
CSS Custom Property Výchozí hodnota Příklad
--mdui-typescale-display-large-line-height 4rem
Display large
--mdui-typescale-display-large-size 3.5625rem
--mdui-typescale-display-large-tracking 0
--mdui-typescale-display-large-weight 400
--mdui-typescale-display-medium-line-height 3.25rem
Display medium
--mdui-typescale-display-medium-size 2.8125rem
--mdui-typescale-display-medium-tracking 0
--mdui-typescale-display-medium-weight 400
--mdui-typescale-display-small-line-height 2.75rem
Display small
--mdui-typescale-display-small-size 2.25rem
--mdui-typescale-display-small-tracking 0
--mdui-typescale-display-small-weight 400
--mdui-typescale-headline-large-line-height 2.5rem
Headline large
--mdui-typescale-headline-large-size 2rem
--mdui-typescale-headline-large-tracking 0
--mdui-typescale-headline-large-weight 400
--mdui-typescale-headline-medium-line-height 2.25rem
Headline medium
--mdui-typescale-headline-medium-size 1.75rem
--mdui-typescale-headline-medium-tracking 0
--mdui-typescale-headline-medium-weight 400
--mdui-typescale-headline-small-line-height 2rem
Headline small
--mdui-typescale-headline-small-size 1.5rem
--mdui-typescale-headline-small-tracking 0
--mdui-typescale-headline-small-weight 400
--mdui-typescale-title-large-line-height 1.75rem
Title large
--mdui-typescale-title-large-size 1.375rem
--mdui-typescale-title-large-tracking 0
--mdui-typescale-title-large-weight 400
--mdui-typescale-title-medium-line-height 1.5rem
Title medium
--mdui-typescale-title-medium-size 1rem
--mdui-typescale-title-medium-tracking 0.009375rem
--mdui-typescale-title-medium-weight 500
--mdui-typescale-title-small-line-height 1.25rem
Title small
--mdui-typescale-title-small-size 0.875rem
--mdui-typescale-title-small-tracking 0.00625rem
--mdui-typescale-title-small-weight 500
--mdui-typescale-label-large-line-height 1.25rem
Label large
--mdui-typescale-label-large-size 0.875rem
--mdui-typescale-label-large-tracking 0.00625rem
--mdui-typescale-label-large-weight 500
--mdui-typescale-label-medium-line-height 1rem
Label medium
--mdui-typescale-label-medium-size 0.75rem
--mdui-typescale-label-medium-tracking 0.03125rem
--mdui-typescale-label-medium-weight 500
--mdui-typescale-label-small-line-height 0.375rem
Label small
--mdui-typescale-label-small-size 0.6875rem
--mdui-typescale-label-small-tracking 0.03125rem
--mdui-typescale-label-small-weight 500
--mdui-typescale-body-large-line-height 1.5rem
Body large
--mdui-typescale-body-large-size 1rem
--mdui-typescale-body-large-tracking 0.009375rem
--mdui-typescale-body-large-weight 400
--mdui-typescale-body-medium-line-height 1.25rem
Body medium
--mdui-typescale-body-medium-size 0.875rem
--mdui-typescale-body-medium-tracking 0.015625rem
--mdui-typescale-body-medium-weight 400
--mdui-typescale-body-small-line-height 1rem
Body small
--mdui-typescale-body-small-size 0.75rem
--mdui-typescale-body-small-tracking 0.025rem
--mdui-typescale-body-small-weight 400
## Neprůhlednost stavové vrstvy {#state-layer} Některé komponenty mdui při interakci přidávají na svůj povrch poloprůhlednou vrstvu. Například komponenta [``](/cs/docs/2/components/button) zobrazuje poloprůhlednou vrstvu při najetí myší, zaostření, stisknutí nebo přetažení. Můžete upravit neprůhlednost těchto vrstev úpravou CSS Custom Property. Následuje příklad použití: ```css /* Úprava neprůhlednosti stavové vrstvy */ :root { --mdui-state-layer-hover: 0.08; --mdui-state-layer-focus: 0.12; --mdui-state-layer-pressed: 0.12; --mdui-state-layer-dragged: 0.16; } ``` | CSS Custom Property | Výchozí hodnota | Příklad | | ---------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------ | | `--mdui-state-layer-hover` | `0.08` |
| | `--mdui-state-layer-focus` | `0.12` |
| | `--mdui-state-layer-pressed` | `0.12` |
| | `--mdui-state-layer-dragged` | `0.16` |
| ## Nadmořská výška (stín) {#elevation} Některé komponenty mdui mají efekt stínu, který simuluje pocit nadmořské výšky komponenty na stránce. Můžete upravit efekt stínu komponent úpravou CSS Custom Property. Následuje příklad použití: ```css /* Úprava stínu úrovně level1 */ :root { --mdui-elevation-level1: 0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%); } /* Nastavení stínu prvku foo na level1 */ .foo { box-shadow: var(--mdui-elevation-level1); } ``` | CSS Custom Property | Výchozí hodnota | Příklad | | ------------------------- | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | `--mdui-elevation-level0` | `none` |
| | `--mdui-elevation-level1` | `0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level2` | `0 0.85px 3px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 1px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level3` | `0 1.25px 5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.3333px 1.5px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level4` | `0 1.85px 6.25px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.5px 1.75px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level5` | `0 2.75px 9px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 3px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| ## Animace {#motion} Křivky zrychlení animací a doby trvání v komponentách mdui lze konfigurovat pomocí CSS Custom Property. Následuje příklad použití: ```css /* Úprava křivky zrychlení standard a doby trvání short1 */ :root { --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --mdui-motion-duration-short1: 40ms; } /* Nastavení přechodu prvku foo s křivkou zrychlení standard a dobou trvání short1 */ .foo { transition: all var(--mdui-motion-duration-short1) var(--mdui-motion-easing-standard); } ```
Typ CSS Custom Property Výchozí hodnota
Křivky zrychlení --mdui-motion-easing-linear cubic-bezier(0, 0, 1, 1)
--mdui-motion-easing-standard cubic-bezier(0.2, 0, 0, 1)
--mdui-motion-easing-standard-accelerate cubic-bezier(0.3, 0, 1, 1)
--mdui-motion-easing-standard-decelerate cubic-bezier(0, 0, 0, 1)
--mdui-motion-easing-emphasized var(--mdui-motion-easing-standard)
--mdui-motion-easing-emphasized-accelerate cubic-bezier(0.3, 0, 0.8, 0.15)
--mdui-motion-easing-emphasized-decelerate cubic-bezier(0.05, 0.7, 0.1, 1)
Doba trvání --mdui-motion-duration-short1 50ms
--mdui-motion-duration-short2 100ms
--mdui-motion-duration-short3 150ms
--mdui-motion-duration-short4 200ms
--mdui-motion-duration-medium1 250ms
--mdui-motion-duration-medium2 300ms
--mdui-motion-duration-medium3 350ms
--mdui-motion-duration-medium4 400ms
--mdui-motion-duration-long1 450ms
--mdui-motion-duration-long2 500ms
--mdui-motion-duration-long3 550ms
--mdui-motion-duration-long4 600ms
--mdui-motion-duration-extra-long1 700ms
--mdui-motion-duration-extra-long2 800ms
--mdui-motion-duration-extra-long3 900ms
--mdui-motion-duration-extra-long4 1000ms
## Responzivní breakpointy {#breakpoint} mdui poskytuje řadu responzivních breakpointů, které lze konfigurovat pomocí CSS Custom Property. Následuje příklad použití: ```css /* Úprava hodnoty breakpointu sm */ :root { --mdui-breakpoint-sm: 560px; } ``` Je důležité si uvědomit, že tyto CSS Custom Property nelze použít v CSS media queries. Následuje příklad chybného použití: ```css /* Chybné použití. CSS Custom Property nelze použít v media queries */ @media (min-width: var(--mdui-breakpoint-sm)) { } ``` Pokud potřebujete provádět vyhodnocování breakpointů v JavaScriptu, můžete použít funkci [`breakpoint`](/cs/docs/2/functions/breakpoint). | CSS Custom Property | Výchozí hodnota | | ----------------------- | --------------- | | `--mdui-breakpoint-xs` | `0px` | | `--mdui-breakpoint-sm` | `600px` | | `--mdui-breakpoint-md` | `840px` | | `--mdui-breakpoint-lg` | `1080px` | | `--mdui-breakpoint-xl` | `1440px` | | `--mdui-breakpoint-xxl` | `1920px` | # Integrace s Reactem Při používání mdui v Reactu stačí postupovat podle kroků na stránce [Instalace](/cs/docs/2/getting-started/installation#npm). ## Poznámky {#notes} Při používání mdui v Reactu existují určitá omezení. Tato omezení jsou obecná omezení používání Web Components v Reactu, nikoli omezení samotné knihovny komponent mdui. ### Vazba událostí {#event-binding} Protože React nepodporuje vlastní události, je při používání událostí poskytovaných komponentami mdui nutné nejprve získat referenci na komponentu pomocí atributu `ref`. Následuje příklad použití událostí komponenty mdui v Reactu: ```js import { useEffect, useRef } from 'react'; import 'mdui/mdui.css'; import 'mdui/components/switch.js'; function App() { const switchRef = useRef(null); useEffect(() => { const handleToggle = () => { console.log('spínač byl přepnut'); }; switchRef.current.addEventListener('change', handleToggle); return () => { switchRef.current.removeEventListener('change', handleToggle); }; }, []); return ; } export default App; ``` ### TypeScript deklarace pro JSX {#jsx-typescript} Pokud používáte mdui v TypeScriptových souborech (.tsx), musíte přidat deklaraci TypeScript typů. Je nutné ručně importovat soubor s deklaracemi typů mdui do souboru .d.ts vašeho projektu: ```ts /// ``` # Integrace s Vue Při používání mdui ve Vue je nejprve nutné dokončit instalaci podle pokynů na stránce [Instalace](/cs/docs/2/getting-started/installation#npm) a poté provést některá potřebná nastavení. ## Konfigurace {#configuration} Je nutné nakonfigurovat Vue tak, aby nerozpoznávalo komponenty mdui jako Vue komponenty. V souboru `vite.config` nastavte možnost `compilerOptions.isCustomElement`: ```js // vite.config.js import vue from '@vitejs/plugin-vue'; export default { plugins: [ vue({ template: { compilerOptions: { // Všechny názvy značek začínající na mdui- jsou komponenty mdui isCustomElement: (tag) => tag.startsWith('mdui-'), }, }, }), ], }; ``` Podrobnosti o této konfiguraci najdete v [oficiální dokumentaci Vue](https://cs.vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue). ## Poznámky {#notes} ### Obousměrná datová vazba {#data-binding} Na komponentách mdui nelze použít `v-model` pro obousměrnou datovou vazbu. Je nutné ručně zpracovat vazbu a aktualizaci dat. Například: ```html ``` ### Konfigurace eslint {#eslint} Pokud používáte [`eslint-plugin-vue`](https://www.npmjs.com/package/eslint-plugin-vue), je nutné do souboru `.eslintrc.js` přidat následující pravidlo: ```js rules: { 'vue/no-deprecated-slot-attribute': 'off' } ``` # Integrace s Angularem Při používání mdui v Angularu je nejprve nutné dokončit instalaci podle pokynů na stránce [Instalace](/cs/docs/2/getting-started/installation#npm) a poté provést některá potřebná nastavení. ## Konfigurace {#configuration} Nejprve musíme v Angularu povolit podporu Web Components. Příklad: ```js import { BrowserModule } from '@angular/platform-browser'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [], bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class AppModule {} ``` Po dokončení konfigurace můžeme v kódu komponenty Angular importovat a používat komponenty mdui: ```js import { Dialog } from 'mdui/components/dialog.js'; @Component({ selector: 'app-dialog-example', template: `
Obsah dialogu
` }) export class DialogExampleComponent implements OnInit { // Použijte @ViewChild k získání reference na prvek #dialog @ViewChild('dialog') dialog?: ElementRef; ... constructor(...) { } ngOnInit() { } ... openDialog() { // Použijte nativeElement pro přístup ke komponentě mdui this.dialog?.nativeElement.open = true; } } ``` # Integrace s dalšími frameworky mdui je postaveno na Web Components, které prohlížeče podporují nativně, a proto jej lze použít ve všech webových frameworkech. Níže jsou uvedeny způsoby použití mdui v běžných frameworkech. ## Aurelia {#Aurelia} Po dokončení instalace podle pokynů na stránce [Instalace](/cs/docs/2/getting-started/installation#npm) je také nutné nainstalovat a nakonfigurovat další balíček (platí pouze pro Aurelia 2): ```bash npm install aurelia-mdui --save ``` Poté jej zaregistrujte v aplikaci: ```typescript import { MduiWebTask } from 'aurelia-mdui'; Aurelia.register(MduiWebTask).app(MyApp).start(); ``` **Poznámka** Hlášení o chybách zasílejte prosím na [https://github.com/mreiche/aurelia-mdui](https://github.com/mreiche/aurelia-mdui). ## WebCell {#WebCell} Při používání mdui v [WebCell](https://web-cell.dev/) stačí postupovat podle kroků na stránce [Instalace](/cs/docs/2/getting-started/installation#npm). Podpora pro Web Components, TypeScript i JSX je k dispozici hned po instalaci. Případně můžete použít [oficiální GitHub šablonu repozitáře](https://github.com/EasyWebApp/WebCell-mobile) k [vytvoření nového projektu jedním kliknutím](https://github.com/new?template_name=WebCell-mobile&template_owner=EasyWebApp). # Komponenta Avatar Avatar se používá k reprezentaci uživatele nebo objektu a podporuje různé formy, včetně obrázků, ikon nebo znaků. ## Způsob použití {#usage} Importujte komponentu podle potřeby: ```js import 'mdui/components/avatar.js'; ``` Importujte TypeScript typy komponenty podle potřeby: ```ts import type { Avatar } from 'mdui/components/avatar.js'; ``` Příklad použití: ```html ``` ## Příklady {#examples} ### Obrázkový avatar {#example-src} Můžete použít atribut `src` k určení odkazu na obrázek jako avatar, nebo poskytnout prvek `` ve výchozím slotu jako avatar. ```html Příklad obrázkového avataru ``` Můžete použít atribut `fit` k definování, jak se obrázek přizpůsobí rámečku, podobně jako nativní [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). ### Ikonový avatar {#example-icon} Můžete použít atribut `icon` k určení ikony Material Icons jako avatar, nebo poskytnout prvek ikony ve výchozím slotu jako avatar. ```html ``` ### Znakový avatar {#example-char} Můžete použít libovolný text ve výchozím slotu jako avatar. ```html A ``` ## mdui-avatar API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
src src true string

URL adresa obrázku avataru.
fit fit true 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'

Způsob přizpůsobení obrázku kontejneru. Odpovídá CSS vlastnosti object-fit. Možné hodnoty:

  • contain: Zachová poměr stran obrázku, obsah se proporcionálně zmenší.
  • cover: Zachová poměr stran obrázku, ale část obsahu může být oříznuta.
  • fill: Výchozí hodnota. Nezachová poměr stran, obsah se roztáhne tak, aby vyplnil celý kontejner.
  • none: Zachová původní rozměry obrázku, obsah se neškáluje ani neroztahuje.
  • scale-down: Zachová poměr stran obrázku, výsledná velikost je stejná jako u none nebo contain, podle toho, která je menší.
icon icon true string

Název ikony z knihovny Material Icons použitý pro avatar.
label label true string

Alternativní textový popis avataru.
### Slots
Název Popis
(výchozí)

Vlastní obsah avataru. Může to být písmeno, znak, prvek <img>, ikona atd.
### CSS Parts
Název Popis
image

Prvek <img> uvnitř komponenty, pokud je jako avatar použit obrázek.
icon

Prvek <mdui-icon> uvnitř komponenty, pokud je jako avatar použita ikona.
### CSS Custom Properties
Název Popis
--shape-corner

Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
# Komponenta Odznak Odznak se používá k zobrazení dynamických informací, jako je počet nebo stavová indikace. Může obsahovat text nebo čísla. ## Způsob použití {#usage} Importujte komponentu podle potřeby: ```js import 'mdui/components/badge.js'; ``` Importujte TypeScript typy komponenty podle potřeby: ```ts import type { Badge } from 'mdui/components/badge.js'; ``` Příklad použití: ```html 12 ``` ## Příklady {#examples} ### Tvar {#example-variant} Použijte atribut `variant` k nastavení tvaru odznaku. Když je `variant` nastaven na `large`, zobrazí se velký odznak. Můžete zadat text, který se má zobrazit, ve výchozím slotu. ```html 99+ ``` ## mdui-badge API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
variant variant true 'small' | 'large' 'large'

Varianta odznaku. Možné hodnoty:

  • small: Malý odznak, nezobrazuje text.
  • large: Velký odznak, zobrazuje text.
### Slots
Název Popis
(výchozí)

Text zobrazený v odznaku.
### CSS Custom Properties
Název Popis
--shape-corner

Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
# Komponenta Spodní aplikační lišta Spodní aplikační lišta slouží hlavně k zobrazení navigačních položek a dalších důležitých akcí dole na stránce na mobilních zařízeních. ## Způsob použití {#usage} Importujte komponentu podle potřeby: ```js import 'mdui/components/bottom-app-bar.js'; ``` Importujte TypeScript typy komponenty podle potřeby: ```ts import type { BottomAppBar } from 'mdui/components/bottom-app-bar.js'; ``` Příklad použití: (Poznámka: `style="position: relative"` v příkladu je jen pro ukázku; v ostrém použití tento styl odstraňte.) ```html
``` **Upozornění:** Ve výchozím nastavení používá `position: fixed` a automaticky přidá `padding-bottom` na `body`, aby nedošlo k zakrytí obsahu stránky touto komponentou. V těchto dvou případech se však používá `position: absolute`: 1. Když je zadán atribut `scroll-target`. Pak se `padding-bottom` přidá na prvek `scroll-target`. 2. Když se nachází uvnitř komponenty [``](/cs/docs/2/components/layout). Pak se `padding-bottom` nepřidává. ## Příklady {#examples} ### Umístění v určeném kontejneru {#example-scroll-target} Ve výchozím nastavení se spodní aplikační lišta zobrazuje dole na stránce. Pokud chcete umístit spodní aplikační lištu do určeného kontejneru, můžete zadat atribut `scroll-target`, jehož hodnota je CSS selektor nebo DOM prvek kontejneru s rolovatelným obsahem. V takovém případě se spodní aplikační lišta umístí relativně k nadřazenému prvku; styl `position: relative; overflow: hidden` je nutné na nadřazený prvek přidat ručně. ```html
Obsah
``` ### Skrytí při rolování {#example-scroll-behavior} Nastavením atributu `scroll-behavior` na `hide` můžete skrýt spodní aplikační lištu při rolování stránky dolů a zobrazit ji při rolování nahoru. Pomocí atributu `scroll-threshold` můžete nastavit, po kolika pixelech rolování se má spodní aplikační lišta začít skrývat. ```html
Obsah
``` ### Fixní plovoucí akční tlačítko {#example-fab-detach} Pokud spodní aplikační lišta obsahuje [plovoucí akční tlačítko](/cs/docs/2/components/fab), můžete přidat atribut `fab-detach`, aby při rolování stránky, když se spodní aplikační lišta skryje, plovoucí akční tlačítko zůstalo ve spodním pravém rohu stránky. ```html
``` ## mdui-bottom-app-bar API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
hide hide true boolean false

Určuje, zda je lišta skrytá.
fab-detach fabDetach true boolean false

Určuje, zda se má komponent <mdui-fab> ve spodní aplikační liště od lišty oddělit. Pokud je true, po skrytí lišty zůstane <mdui-fab> na stránce.
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Chování při posouvání. Možné hodnoty:

  • hide: Při posouvání se lišta skryje.
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Prvek, na kterém se sledují události posouvání. Hodnotou může být CSS selektor, DOM element nebo jQuery objekt. Výchozí hodnotou je window (okno).
scroll-threshold scrollThreshold true number

Vzdálenost v pixelech, o kterou musí být obsah posunut, aby se chování aktivovalo.
order order true number

Pořadí této komponenty v rámci rozvržení <mdui-layout>. Řadí se vzestupně (nižší hodnoty mají přednost). Výchozí hodnota je 0.
### Události
Název Popis
show

Spustí se na začátku zobrazování. Zobrazení lze zabránit voláním event.preventDefault().
shown

Spustí se po dokončení animace zobrazení.
hide

Spustí se na začátku skrývání. Skrytí lze zabránit voláním event.preventDefault().
hidden

Spustí se po dokončení animace skrytí.
### Slots
Název Popis
(výchozí)

Prvky uvnitř spodní aplikační lišty.
### CSS Custom Properties
Název Popis
--shape-corner

Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
--z-index

Hodnota CSS z-index komponenty.
# Komponenta Tlačítko Tlačítka se primárně používají k provádění akcí, jako je odeslání e-mailu, sdílení dokumentu nebo lajkování komentáře. ## Způsob použití {#usage} Importujte komponentu podle potřeby: ```js import 'mdui/components/button.js'; ``` Importujte TypeScript typy komponenty podle potřeby: ```ts import type { Button } from 'mdui/components/button.js'; ``` Příklad použití: ```html Tlačítko ``` ## Příklady {#examples} ### Tvar {#example-variant} Použijte atribut `variant` k nastavení tvaru tlačítka. ```html Elevated Filled Tonal Outlined Text ``` ### Celá šířka {#example-full-width} Přidejte atribut `full-width`, aby tlačítko zabíralo celou šířku nadřazeného prvku. ```html Tlačítko ``` ### Ikona {#example-icon} Nastavením atributů `icon` a `end-icon` můžete přidat ikony Material Icons na levou a pravou stranu tlačítka. Lze také přidat prvky na levou a pravou stranu tlačítka pomocí slotů `icon` a `end-icon`. ```html Ikona Slot ``` ### Odkaz {#example-link} Nastavením atributu `href` můžete tlačítko změnit na odkaz. Pak můžete také použít tyto atributy související s odkazy: `download`, `target`, `rel`. ```html Odkaz ``` ### Zakázaný stav a stav načítání {#example-disabled} Atribut `disabled` tlačítko zakáže; atribut `loading` přidá stav načítání tlačítka. ```html Zakázáno Načítání Načítání a zakázáno ``` ## mdui-button API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
variant variant true 'elevated' | 'filled' | 'tonal' | 'outlined' | 'text' 'filled'

Varianta tlačítka. Možné hodnoty:

  • elevated: Tlačítko se stínem, vhodné pro oddělení tlačítka od pozadí.
  • filled: Výrazná varianta vhodná pro primární akce, například „Uložit“ nebo „Potvrdit“.
  • tonal: Vizuální efekt mezi filled a outlined, vhodný pro akce se středně vysokou prioritou, jako je „Další“ v procesu.
  • outlined: Tlačítko s okrajem, vhodné pro středně prioritní a vedlejší akce, jako je „Zpět“.
  • text: Textové tlačítko, vhodné pro akce s nejnižší prioritou.
full-width fullWidth true boolean false

Určuje, zda tlačítko vyplní celou šířku rodičovského prvku.
icon icon true string

Název ikony z knihovny Material Icons na levé straně. Lze také nastavit pomocí slot="icon".
end-icon endIcon true string

Název ikony z knihovny Material Icons na pravé straně. Lze také nastavit pomocí slot="end-icon".
href href true 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 true string

Soubor ke stažení.

Poznámka: Platí pouze, pokud je nastaven atribut href.
target target true '_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 true '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 true boolean false

Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
tabindex tabIndex false number

Pořadí prvku při přepínání fokusu pomocí klávesy Tab.
disabled disabled true boolean false

Určuje, zda je prvek zakázaný.
loading loading true boolean false

Určuje, zda je prvek ve stavu načítání.
name name true 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 true 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 true '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 true 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 true 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 true '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 true '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 true 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 true '_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".
undefined validity false ValidityState

Objekt s informacemi o stavu validace formuláře; podrobnosti viz ValidityState.
undefined validationMessage false 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 Popis
click(): void

Simuluje kliknutí myší na prvek.
focus(options?: FocusOptions): 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 Popis
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í.
### Slots
Název Popis
(výchozí)

Text tlačítka.
icon

Prvek na levé straně tlačítka.
end-icon

Prvek na pravé straně tlačítka.
### CSS Parts
Název Popis
button

Interní prvek <button> nebo <a>.
label

Text tlačítka.
icon

Ikona na levé straně tlačítka.
end-icon

Ikona na pravé straně tlačítka.
loading

Prvek <mdui-circular-progress> ve stavu načítání.
### CSS Custom Properties
Název Popis
--shape-corner

Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
# Komponenta Ikonové tlačítko Ikonová tlačítka se primárně používají k provádění sekundárních akcí. ## Způsob použití {#usage} Importujte komponentu podle potřeby: ```js import 'mdui/components/button-icon.js'; ``` Importujte TypeScript typy komponenty podle potřeby: ```ts import type { ButtonIcon } from 'mdui/components/button-icon.js'; ``` Příklad použití: ```html ``` ## Příklady {#examples} ### Ikona {#example-icon} Použijte atribut `icon` k určení názvu ikony Material Icons. Lze také použít prvek ikony pomocí výchozího slotu. ```html ``` ### Tvar {#example-variant} Použijte atribut `variant` k nastavení tvaru ikonového tlačítka. ```html ``` ### Volitelné {#example-selectable} Přidejte atribut `selectable`, aby bylo ikonové tlačítko volitelné. ```html ``` Použijte atribut `selected-icon` k určení názvu ikony Material Icons ve vybraném stavu. Lze také použít prvek ikony ve vybraném stavu pomocí slotu `selected-icon`. ```html ``` Po výběru ikonového tlačítka se atribut `selected` změní na `true`. Lze také přidat atribut `selected`, aby bylo ikonové tlačítko ve výchozím stavu vybrané. ```html ``` ### Odkaz {#example-link} Atribut `href` změní ikonové tlačítko na odkaz. Pak můžete také použít tyto atributy související s odkazy: `download`, `target`, `rel`. ```html ``` ### Zakázaný stav a stav načítání {#example-disabled} Atribut `disabled` ikonové tlačítko zakáže; atribut `loading` přidá stav načítání ikonového tlačítka. ```html ``` ## mdui-button-icon API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
variant variant true 'standard' | 'filled' | 'tonal' | 'outlined' 'standard'

Varianta ikonového tlačítka. Možné hodnoty:

  • standard: Vhodné pro akce s nejnižší prioritou.
  • filled: Výrazná varianta vhodná pro akce s vysokou prioritou.
  • tonal: Vizuální efekt mezi filled a outlined, vhodný pro akce se středně vysokou prioritou.
  • outlined: Vhodné pro akce se střední prioritou.
icon icon true string

Název ikony z knihovny Material Icons. Lze také nastavit pomocí výchozího slotu.
selected-icon selectedIcon true string

Název ikony z knihovny Material Icons pro vybraný stav. Lze také nastavit pomocí slot="selected-icon".
selectable selectable true boolean false

Určuje, zda lze tlačítko vybrat.
selected selected true boolean false

Určuje, zda je tlačítko vybráno.
href href true 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 true string

Soubor ke stažení.

Poznámka: Platí pouze, pokud je nastaven atribut href.
target target true '_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 true '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 true boolean false

Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
tabindex tabIndex false number

Pořadí prvku při přepínání fokusu pomocí klávesy Tab.
disabled disabled true boolean false

Určuje, zda je prvek zakázaný.
loading loading true boolean false

Určuje, zda je prvek ve stavu načítání.
name name true 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 true 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 true '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 true 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 true 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 true '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 true '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 true 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 true '_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".
undefined validity false ValidityState

Objekt s informacemi o stavu validace formuláře; podrobnosti viz ValidityState.
undefined validationMessage false 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 Popis
click(): void

Simuluje kliknutí myší na prvek.
focus(options?: FocusOptions): 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 Popis
focus

Spustí se při získání fokusu.
blur

Spustí se při ztrátě fokusu.
change

Spustí se při změně stavu výběru.
invalid

Spustí se, pokud pole formuláře neprojde validací.
### Slots
Název Popis
(výchozí)

Obsah slotu ikony.
selected-icon

Ikona zobrazená ve vybraném stavu.
### CSS Parts
Název Popis
button

Interní prvek <button> nebo <a>.
icon

Ikona v nevybraném stavu.
selected-icon

Ikona ve vybraném stavu.
loading

Prvek <mdui-circular-progress> ve stavu načítání.
### CSS Custom Properties
Název Popis
--shape-corner

Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
# Komponenta Karta Karta je univerzální komponenta pro obsah a akce související s jedním tématem. ## Způsob použití {#usage} Importujte komponentu podle potřeby: ```js import 'mdui/components/card.js'; ``` Importujte TypeScript typy komponenty podle potřeby: ```ts import type { Card } from 'mdui/components/card.js'; ``` Příklad použití: ```html Karta ``` ## Příklady {#examples} ### Tvar {#example-variant} Použijte atribut `variant` k nastavení tvaru karty. ```html ``` ### Klikatelné {#example-clickable} Atribut `clickable` z ní udělá klikací kartu. Tím se přidá efekt při najetí myší a efekt vlnky při kliknutí. ```html ``` ### Odkaz {#example-link} Atribut `href` změní kartu na odkaz. Pak můžete také použít tyto atributy související s odkazy: `download`, `target`, `rel`. ```html ``` ### Zakázaný stav {#example-disabled} Atribut `disabled` kartu zakáže. ```html ``` ## mdui-card API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
variant variant true 'elevated' | 'filled' | 'outlined' 'elevated'

Varianta karty. Možné hodnoty:

  • elevated: Karta se stínem, vizuálně více oddělená od pozadí.
  • filled: Karta s výplní, vizuálně méně oddělená od pozadí.
  • outlined: Karta s okrajem, vizuálně nejvíce oddělená od pozadí.
clickable clickable true boolean false

Určuje, zda je karta klikatelná. Pokud je true, karta bude mít efekt při najetí myší a efekt vlny při kliknutí.
disabled disabled true boolean false

Určuje, zda je karta zakázaná.
href href true 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 true string

Soubor ke stažení.

Poznámka: Platí pouze, pokud je nastaven atribut href.
target target true '_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 true '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 true boolean false

Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
tabindex tabIndex false number

Pořadí prvku při přepínání fokusu pomocí klávesy Tab.
### Metody
Název Popis
click(): void

Simuluje kliknutí myší na prvek.
focus(options?: FocusOptions): 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.
### Události
Název Popis
focus

Spustí se při získání fokusu.
blur

Spustí se při ztrátě fokusu.
### Slots
Název Popis
(výchozí)

Obsah karty.
### CSS Custom Properties
Název Popis
--shape-corner

Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
# Komponenta Zaškrtávací políčko Zaškrtávací políčka umožňují uživatelům vybrat jednu nebo více možností ze sady, nebo přepnout stav zapnuto/vypnuto jedné možnosti. ## Způsob použití {#usage} Importujte komponentu podle potřeby: ```js import 'mdui/components/checkbox.js'; ``` Importujte TypeScript typy komponenty podle potřeby: ```ts import type { Checkbox } from 'mdui/components/checkbox.js'; ``` Příklad použití: ```html Zaškrtávací políčko ``` ## Příklady {#examples} ### Vybraný stav {#example-checked} Když je zaškrtávací políčko vybráno, hodnota atributu `checked` je `true`. Přidejte atribut `checked`, aby bylo zaškrtávací políčko ve výchozím stavu vybrané. ```html Zaškrtávací políčko ``` ### Zakázaný stav {#example-disabled} Atribut `disabled` zaškrtávací políčko zakáže. ```html Zaškrtávací políčko Zaškrtávací políčko ``` ### Neurčitý stav {#example-indeterminate} Přidejte atribut `indeterminate`, který označuje, že je zaškrtávací políčko v neurčitém stavu. ```html Zaškrtávací políčko ``` ### Ikona {#example-icon} Nastavením atributů `unchecked-icon`, `checked-icon` a `indeterminate-icon` můžete nastavit ikony Material Icons pro nevybraný, vybraný a neurčitý stav zaškrtávacího políčka. Můžete je také nastavit pomocí slotů `unchecked-icon`, `checked-icon` a `indeterminate-icon`. ```html Zaškrtávací políčko Zaškrtávací políčko
Zaškrtávací políčko Zaškrtávací políčko ``` ## mdui-checkbox API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
disabled disabled true boolean false

Určuje, zda je prvek zakázaný.
checked checked true boolean false

Určuje, zda je prvek zaškrtnutý.
undefined defaultChecked false boolean false

Výchozí zaškrtnutý stav. Při resetování formuláře se stav obnoví na tuto hodnotu. Tuto vlastnost lze nastavit pouze pomocí JavaScriptu.
indeterminate indeterminate true boolean false

Určuje, zda je prvek v neurčitém stavu.
required required true boolean false

Určuje, zda toto zaškrtávací políčko musí být při odesílání formuláře zaškrtnuto.
form form true 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>.
name name true string ''

Název zaškrtávacího políčka, který se odešle spolu s daty formuláře.
value value true string 'on'

Hodnota zaškrtávacího políčka, která se odešle spolu s daty formuláře.
unchecked-icon uncheckedIcon true string

Název ikony z knihovny Material Icons pro nezaškrtnutý stav. Lze také nastavit pomocí slot="unchecked-icon".
checked-icon checkedIcon true string

Název ikony z knihovny Material Icons pro zaškrtnutý stav. Lze také nastavit pomocí slot="checked-icon".
indeterminate-icon indeterminateIcon true string

Název ikony z knihovny Material Icons pro neurčitý stav. Lze také nastavit pomocí slot="indeterminate-icon".
undefined validity false ValidityState

Objekt s informacemi o stavu validace formuláře; podrobnosti viz ValidityState.
undefined validationMessage false 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.
autofocus autofocus true boolean false

Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
tabindex tabIndex false number

Pořadí prvku při přepínání fokusu pomocí klávesy Tab.
### Metody
Název Popis
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í.
click(): void

Simuluje kliknutí myší na prvek.
focus(options?: FocusOptions): 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.
### Události
Název Popis
focus

Spustí se při získání fokusu.
blur

Spustí se při ztrátě fokusu.
change

Spustí se při změně stavu výběru.
input

Spustí se při změně stavu výběru.
invalid

Spustí se, pokud pole formuláře neprojde validací.
### Slots
Název Popis
(výchozí)

Text zaškrtávacího políčka.
unchecked-icon

Ikona pro nezaškrtnutý stav.
checked-icon

Ikona pro zaškrtnutý stav.
indeterminate-icon

Ikona pro neurčitý stav.
### CSS Parts
Název Popis
control

Kontejner pro levou ikonu.
unchecked-icon

Ikona pro nezaškrtnutý stav.
checked-icon

Ikona pro zaškrtnutý stav.
indeterminate-icon

Ikona pro neurčitý stav.
label

Text zaškrtávacího políčka.
# Komponenta Chip 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í {#usage} Importujte komponentu podle potřeby: ```js import 'mdui/components/chip.js'; ``` Importujte TypeScript typy komponenty podle potřeby: ```ts import type { Chip } from 'mdui/components/chip.js'; ``` Příklad použití: ```html Chip ``` ## Příklady {#examples} ### Tvar {#example-variant} Použijte atribut `variant` k nastavení tvaru chipu. Chip má 4 tvary, které lze vybrat podle účelu: - `assist`: Používá se k zobrazení pomocných akcí souvisejících s aktuálním kontextem. Například na stránce objednávky jídla poskytuje funkce jako sdílení, ukládání do oblíbených. - `filter`: Používá se k filtrování obsahu. Například na stránce s výsledky vyhledávání k filtrování výsledků. - `input`: Používá se k reprezentaci fragmentů informací zadaných uživatelem. Například kontakt v poli "Komu" v Gmailu. - `suggestion`: Používá se k poskytování dynamicky generovaných doporučení pro zjednodušení akcí uživatele. Například v chatovací aplikaci tipuje zprávu, kterou uživatel pravděpodobně chce odeslat, aby si ji mohl vybrat. ```html Assist Filter Input Suggestion ``` ### Stín {#example-elevated} Přidejte atribut `elevated`, aby měl chip stín. ```html Chip ``` ### Ikona {#example-icon} Přidáním atributů `icon` a `end-icon` můžete přidat ikony Material Icons na levou a pravou stranu chipu. Lze také přidat prvky na levou a pravou stranu chipu pomocí slotů `icon` a `end-icon`. ```html Ikona Koncová ikona Slot ``` ### Odkaz {#example-link} Atribut `href` změní chipu na odkaz. Pak můžete také použít tyto atributy související s odkazy: `download`, `target`, `rel`. ```html Odkaz ``` ### Zakázaný stav a stav načítání {#example-disabled} Atribut `disabled` chip zakáže; atribut `loading` přidá stav načítání chipu. ```html Zakázáno Načítání Načítání a zakázáno ``` ### Volitelné {#example-selectable} Přidejte atribut `selectable`, aby byl chip volitelný. ```html Chip ``` Pomocí atributu `selected-icon` můžete určit název ikony Material Icons ve vybraném stavu. Lze také použít prvek ikony ve vybraném stavu pomocí slotu `selected-icon`. ```html Chip Chip ``` Po výběru chipu se atribut `selected` změní na `true`. Lze také přidat atribut `selected`, aby byl chip ve výchozím stavu vybraný. ```html Chip ``` ### Odstranitelné {#example-deletable} 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`. ```html Chip Chip Chip ``` ## mdui-chip API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
variant variant true '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 true boolean false

Určuje, zda se má zobrazit stín.
selectable selectable true boolean false

Určuje, zda lze chip vybrat.
selected selected true boolean false

Určuje, zda je chip vybrán.
deletable deletable true boolean false

Určuje, zda lze chip odstranit. Pokud je true, zobrazí se na pravé straně chipu ikona pro odstranění.
icon icon true string

Název ikony z knihovny Material Icons na levé straně. Lze také nastavit pomocí slot="icon".
selected-icon selectedIcon true 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 true string

Název ikony z knihovny Material Icons na pravé straně. Lze také nastavit pomocí slot="end-icon".
delete-icon deleteIcon true 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 true 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 true string

Soubor ke stažení.

Poznámka: Platí pouze, pokud je nastaven atribut href.
target target true '_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 true '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 true boolean false

Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
tabindex tabIndex false number

Pořadí prvku při přepínání fokusu pomocí klávesy Tab.
disabled disabled true boolean false

Určuje, zda je prvek zakázaný.
loading loading true boolean false

Určuje, zda je prvek ve stavu načítání.
name name true 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 true 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 true '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 true 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 true 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 true '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 true '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 true 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 true '_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".
undefined validity false ValidityState

Objekt s informacemi o stavu validace formuláře; podrobnosti viz ValidityState.
undefined validationMessage false 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 Popis
click(): void

Simuluje kliknutí myší na prvek.
focus(options?: FocusOptions): 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 Popis
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 Popis
(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 Popis
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 Popis
--shape-corner

Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
# Komponenta Kruhový indikátor průběhu Kruhový indikátor průběhu je kruhová komponenta pro zobrazení průběhu úkolu, například načítání dat nebo odesílání formuláře. ## Způsob použití {#usage} Importujte komponentu podle potřeby: ```js import 'mdui/components/circular-progress.js'; ``` Importujte TypeScript typy komponenty podle potřeby: ```ts import type { CircularProgress } from 'mdui/components/circular-progress.js'; ``` Příklad použití: ```html ``` ## Příklady {#examples} ### Pevný průběh {#example-value} Kruhový indikátor průběhu má standardně neurčitý průběh. Pomocí atributu `value` můžete nastavit aktuální průběh, standardní maximální hodnota průběhu je `1`. ```html ``` Pomocí atributu `max` můžete nastavit maximální hodnotu průběhu. ```html ``` ## mdui-circular-progress API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
max max true number 1

Maximální hodnota indikátoru průběhu. Výchozí hodnota je 1.
value value false number

Aktuální hodnota indikátoru průběhu. Pokud tato hodnota není zadána, zobrazí se jako neurčitý stav.
# Komponenta Sbalovací panel Sbalovací panel se používá k seskupování a skrývání složitějšího obsahu, aby stránka zůstala přehledná. Upozorňujeme, že komponenta sbalovacího panelu sama o sobě neobsahuje žádné styly. Je nutné přidat vlastní styly nebo je používat společně s jinými komponentami. ## Způsob použití {#usage} Importujte komponenty podle potřeby: ```js import 'mdui/components/collapse.js'; import 'mdui/components/collapse-item.js'; ``` Importujte TypeScript typy komponent podle potřeby: ```ts import type { Collapse } from 'mdui/components/collapse.js'; import type { CollapseItem } from 'mdui/components/collapse-item.js'; ``` Příklad použití: ```html první obsah druhý obsah ``` ## Příklady {#examples} ### Nadpis a obsah panelu {#example-header} Atribut `header` komponenty `` lze použít k nastavení textu záhlaví panelu, nebo můžete použít slot `header` k určení prvku záhlaví panelu. Výchozí slot komponenty je pro obsah panelu. ```html Položka 1
Položka 1 - dílčí položka
Položka 2
Položka 2 - dílčí položka
``` ### Akordeonový režim {#example-accordion} Přidáním atributu `accordion` na komponentu `` zapnete akordeonový režim, takže v jednom okamžiku bude otevřen pouze jeden panel. ```html Položka 1
Položka 1 - dílčí položka
Položka 2
Položka 2 - dílčí položka
``` ### Nastavení aktivního panelu {#example-value} Pomocí atributu `value` komponenty `` můžete získat aktuálně otevřený panel nebo nastavit panel, který chcete otevřít. V akordeonovém režimu je hodnota atributu `value` řetězec. Tento atribut můžete ovládat pomocí HTML atributu nebo JavaScript vlastnosti. V neakordeonovém režimu je hodnota atributu `value` pole a lze s ní pracovat pouze pomocí JavaScript vlastnosti. ```html Akordeonový režim Položka 1
Položka 1 - dílčí položka
Položka 2
Položka 2 - dílčí položka
Neakordeonový režim Položka 1
Položka 1 - dílčí položka
Položka 2
Položka 2 - dílčí položka
``` ### Zakázaný stav {#example-disabled} Přidáním atributu `disabled` na komponentu `` můžete zakázat celou skupinu sbalovacích panelů. Podobně přidáním atributu `disabled` na komponentu `` můžete zakázat konkrétní sbalovací panel. ```html Vše zakázáno Položka 1
Položka 1 - dílčí položka
Položka 2
Položka 2 - dílčí položka
Zakázat první panel Položka 1
Položka 1 - dílčí položka
Položka 2
Položka 2 - dílčí položka
``` ### Prvek spouštějící sbalení {#example-trigger} Ve výchozím nastavení kliknutí na celou oblast záhlaví panelu spustí sbalení. Atributem `trigger` komponenty `` můžete určit prvek, který spouští sbalení. Atribut `trigger` může být CSS selektor nebo DOM prvek. ```html Položka 1
Položka 1 - dílčí položka
``` ## mdui-collapse-item API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
value value true string

Hodnota této položky sbalovacího panelu.
header header true string

Text záhlaví této položky sbalovacího panelu.
disabled disabled true boolean false

Určuje, zda je tato položka sbalovacího panelu zakázaná.
trigger trigger false string | HTMLElement | JQ<HTMLElement>

Kliknutím na tento prvek se spustí rozbalení/sbalení. Hodnotou může být CSS selektor, DOM element nebo jQuery objekt. Výchozí je kliknutí na celou oblast záhlaví.
### Události
Název Popis
open

Spustí se na začátku rozbalování.
opened

Spustí se po dokončení animace rozbalování.
close

Spustí se na začátku sbalování.
closed

Spustí se po dokončení animace sbalování.
### Slots
Název Popis
(výchozí)

Obsah těla položky sbalovacího panelu.
header

Obsah záhlaví položky sbalovacího panelu.
### CSS Parts
Název Popis
header

Obsah záhlaví sbalovacího panelu.
body

Obsah těla sbalovacího panelu.
## mdui-collapse API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
accordion accordion true boolean false

Určuje, zda je povolen režim akordeonu.
value value false string | string[]

Hodnota aktuálně rozbaleného prvku <mdui-collapse-item>.

Poznámka: HTML atribut této vlastnosti je vždy řetězec a počáteční hodnotu lze nastavit pouze pokud je accordion true. Hodnota JavaScriptové vlastnosti je řetězec, pokud je accordion true, a pole řetězců, pokud je accordion false. Proto, když je accordion false, lze tuto hodnotu změnit pouze úpravou JavaScriptové vlastnosti.
disabled disabled true boolean false

Určuje, zda je tento sbalovací panel zakázán.
### Události
Název Popis
change

Spustí se, když se změní aktuálně rozbalená položka sbalovacího panelu.
### Slots
Název Popis
(výchozí)

Komponenty <mdui-collapse-item>.
# Komponenta Dialog Dialogy slouží k zobrazení důležitých upozornění během práce uživatele. Kromě přímého použití této komponenty poskytuje mdui také čtyři funkce: [`mdui.dialog`](/cs/docs/2/functions/dialog), [`mdui.alert`](/cs/docs/2/functions/alert), [`mdui.confirm`](/cs/docs/2/functions/confirm), [`mdui.prompt`](/cs/docs/2/functions/prompt). Tyto funkce mohou práci s komponentou Dialog výrazně zjednodušit. ## Způsob použití {#usage} Importujte komponentu podle potřeby: ```js import 'mdui/components/dialog.js'; ``` Importujte TypeScript typy komponenty podle potřeby: ```ts import type { Dialog } from 'mdui/components/dialog.js'; ``` Příklad použití: ```html Dialog Zavřít Otevřít dialog ``` ## Příklady {#examples} ### Zavření kliknutím na překryvnou vrstvu {#example-close-on-overlay-click} Přidejte atribut `close-on-overlay-click`, po kliknutí na překryvnou vrstvu se dialog zavře. ```html Dialog Otevřít dialog ``` ### Zavření stisknutím klávesy ESC {#example-close-on-esc} Přidejte atribut `close-on-esc`, po stisknutí klávesy ESC se dialog zavře. ```html Dialog Otevřít dialog ``` ### Celá obrazovka {#example-fullscreen} Přidejte atribut `fullscreen`, dialog se zobrazí na celou obrazovku. ```html Dialog Zavřít Otevřít dialog ``` ### Ikona {#example-icon} Nastavením atributu `icon` se nad dialog přidá ikona Material Icons. ```html Dialog Otevřít dialog ``` Lze také přidat prvek ikony nad dialog pomocí slotu `icon`. ```html Dialog Otevřít dialog ``` ### Nadpis a popis {#example-headline} Pomocí atributů `headline` a `description` nastavte nadpis a popis dialogu. ```html Otevřít dialog ``` Lze také použít sloty `headline` a `description` k nastavení prvků nadpisu a popisu dialogu. ```html Smazat vybrané obrázky? Obrázky budou trvale odstraněny z vašeho účtu a všech synchronizovaných zařízení. Otevřít dialog ``` ### Akční tlačítka ve spodní části {#example-action} Pomocí slotu `action` můžete přidat akční tlačítka ve spodní části. ```html Zrušit Smazat Otevřít dialog ``` Přidejte atribut `stacked-actions` pro vertikální uspořádání akčních tlačítek ve spodní části. ```html Zapnout zrychlení Ne, děkuji Otevřít dialog ``` ### Obsah v horní části {#example-header} Pomocí slotu `header` můžete nastavit obsah v horní části dialogu. ```html Název Uložit
Otevřít dialog ``` ## mdui-dialog API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
icon icon true string

Název ikony z knihovny Material Icons nahoře. Lze také nastavit pomocí slot="icon".
headline headline true string

Nadpis. Lze také nastavit pomocí slot="headline".
description description true string

Text pod nadpisem. Lze také nastavit pomocí slot="description".
open open true boolean false

Určuje, zda je dialog otevřený.
fullscreen fullscreen true boolean false

Určuje, zda se má dialog zobrazit na celou obrazovku.
close-on-esc closeOnEsc true boolean false

Určuje, zda lze dialog zavřít stisknutím klávesy ESC.
close-on-overlay-click closeOnOverlayClick true boolean false

Určuje, zda lze dialog zavřít kliknutím na překryvnou vrstvu.
stacked-actions stackedActions true boolean false

Určuje, zda mají být akční tlačítka dole uspořádána vertikálně.
### Události
Název Popis
open

Spustí se na začátku otevírání dialogu. Otevření lze zabránit voláním event.preventDefault().
opened

Spustí se po dokončení animace otevření dialogu.
close

Spustí se na začátku zavírání dialogu. Zavření lze zabránit voláním event.preventDefault().
closed

Spustí se po dokončení animace zavření dialogu.
overlay-click

Spustí se při kliknutí na překryvnou vrstvu.
### Slots
Název Popis
header

Prvky nahoře, standardně obsahuje sloty icon a headline.
icon

Ikona nahoře.
headline

Nadpis nahoře.
description

Text pod nadpisem.
(výchozí)

Hlavní obsah dialogu.
action

Prvky v panelu akcí dole.
### CSS Parts
Název Popis
overlay

Překryvná vrstva.
panel

Kontejner dialogu.
header

Část záhlaví dialogu, obsahuje ikonu a nadpis.
icon

Ikona nahoře, nachází se v záhlaví.
headline

Nadpis nahoře, nachází se v záhlaví.
body

Část těla dialogu.
description

Část vedlejšího textu, nachází se v těle.
action

Tlačítka akcí dole.
### CSS Custom Properties
Název Popis
--shape-corner

Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
--z-index

Hodnota CSS z-index komponenty.
# Komponenta Oddělovač Oddělovač je tenká čára používaná k seskupování obsahu v seznamech a kontejnerech. ## Způsob použití {#usage} Importujte komponentu podle potřeby: ```js import 'mdui/components/divider.js'; ``` Importujte TypeScript typy komponenty podle potřeby: ```ts import type { Divider } from 'mdui/components/divider.js'; ``` Příklad použití: ```html ``` ## Příklady {#examples} ### Vertikální oddělovač {#example-vertical} Přidejte atribut `vertical` pro vertikální zobrazení oddělovače. ```html
``` ### Odsazení zleva {#example-inset} Přidejte atribut `inset` pro odsazení oddělovače zleva. To se často používá v seznamech pro zarovnání oddělovače s levým textem. ```html Položka 1 Položka 2 ``` ### Odsazení z obou stran {#example-middle} Přidejte atribut `middle` pro odsazení oddělovače z obou stran. ```html Položka 1 Položka 2 ``` ## mdui-divider API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
vertical vertical true boolean false

Určuje, zda se jedná o vertikální oddělovač.
inset inset true boolean false

Určuje, zda má být odsazen zleva.
middle middle true boolean false

Určuje, zda má být odsazen zleva i zprava.
# Komponenta Rozbalovací nabídka Rozbalovací nabídka zobrazuje obsah ve vyskakovacím okně a často se používá společně s nabídkou. ## Způsob použití {#usage} Importujte komponentu podle potřeby: ```js import 'mdui/components/dropdown.js'; ``` Importujte TypeScript typy komponenty podle potřeby: ```ts import type { Dropdown } from 'mdui/components/dropdown.js'; ``` Příklad použití: ```html otevřít nabídku Položka 1 Položka 2 ``` ## Příklady {#examples} ### Zakázaný stav {#example-disabled} Atribut `disabled` rozbalovací nabídku zakáže. ```html otevřít nabídku Položka 1 Položka 2 ``` ### Umístění otevření {#example-placement} Pomocí atributu `placement` můžete určit, kde se rozbalovací nabídka otevře. ```html otevřít nabídku Položka 1 Položka 2 ``` ### Způsob spuštění {#example-trigger} Pomocí atributu `trigger` můžete nastavit způsob spuštění rozbalovací nabídky. ```html otevřít nabídku Položka 1 Položka 2 ``` ### Otevření na pozici kurzoru {#example-open-on-pointer} Přidejte atribut `open-on-pointer` pro otevření rozbalovací nabídky na pozici kurzoru. Často se používá ve spojení s `trigger="contextmenu"` pro otevření nabídky pravým tlačítkem myši. ```html Otevřete nabídku pravým tlačítkem myši v této oblasti Položka 1 Položka 2 ``` ### Udržení nabídky otevřené {#example-stay-open-on-click} Při použití nabídky v rozbalovací nabídce se po kliknutí na položku nabídky rozbalovací nabídka automaticky zavře. Přidáním atributu `stay-open-on-click` můžete při kliknutí na položku nabídky zachovat rozbalovací nabídku otevřenou. ```html otevřít nabídku Položka 1 Položka 2 ``` ### Zpoždění otevření/zavření {#example-delay} Když je nastaveno `trigger="hover"`, můžete pomocí atributů `open-delay` a `close-delay` nastavit zpoždění otevření a zavření. ```html otevřít nabídku Položka 1 Položka 2 ``` ## mdui-dropdown API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
open open true boolean false

Určuje, zda je rozbalovací nabídka otevřená.
disabled disabled true boolean false

Určuje, zda je rozbalovací nabídka zakázaná.
trigger trigger true 'click' | 'hover' | 'focus' | 'contextmenu' | 'manual' | string 'click'

Způsob spuštění rozbalovací nabídky. Lze zadat více hodnot oddělených mezerami. Možné hodnoty:

  • click: Spuštění kliknutím.
  • hover: Spuštění najetím myší.
  • focus: Spuštění získáním fokusu.
  • contextmenu: Spuštění kliknutím pravým tlačítkem myši nebo dlouhým stiskem na dotykovém zařízení.
  • manual: Rozbalovací nabídku lze otevřít a zavřít pouze programově. Nelze kombinovat s jiným způsobem spuštění.
placement placement true 'auto' | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'auto'

Umístění obsahu rozbalovací nabídky. Možné hodnoty:

  • auto: Automatické určení polohy.
  • top-start: Nahoře vlevo.
  • top: Nahoře uprostřed.
  • top-end: Nahoře vpravo.
  • bottom-start: Dole vlevo.
  • bottom: Dole uprostřed.
  • bottom-end: Dole vpravo.
  • left-start: Vlevo nahoře.
  • left: Vlevo uprostřed.
  • left-end: Vlevo dole.
  • right-start: Vpravo nahoře.
  • right: Vpravo uprostřed.
  • right-end: Vpravo dole.
stay-open-on-click stayOpenOnClick true boolean false

Určuje, zda má rozbalovací nabídka zůstat otevřená po kliknutí na <mdui-menu-item>.
open-delay openDelay true number 150

Zpoždění (v ms) před otevřením při najetí myší.
close-delay closeDelay true number 150

Zpoždění (v ms) před zavřením při najetí myší.
open-on-pointer openOnPointer true boolean false

Určuje, zda se má rozbalovací nabídka otevřít na pozici kurzoru při svém spuštění. Často se používá pro otevření kontextové nabídky.
### Události
Název Popis
open

Spustí se na začátku otevírání rozbalovací nabídky. Otevření lze zabránit voláním event.preventDefault().
opened

Spustí se po dokončení animace otevření rozbalovací nabídky.
close

Spustí se na začátku zavírání rozbalovací nabídky. Zavření lze zabránit voláním event.preventDefault().
closed

Spustí se po dokončení animace zavření rozbalovací nabídky.
### Slots
Název Popis
(výchozí)

Obsah rozbalovací nabídky.
trigger

Prvek, který spouští rozbalovací nabídku, např. prvek <mdui-button>.
### CSS Parts
Název Popis
trigger

Kontejner pro prvek spouštějící rozbalovací nabídku, tj. kontejner pro slot trigger.
panel

Kontejner pro obsah rozbalovací nabídky.
### CSS Custom Properties
Název Popis
--z-index

Hodnota CSS z-index komponenty.
# Komponenta Plovoucí akční tlačítko Plovoucí akční tlačítko (FAB) se používá ke zdůraznění hlavní akce na stránce a umísťuje klíčové akce na snadno dostupná místa. ## Způsob použití {#usage} Importujte komponentu podle potřeby: ```js import 'mdui/components/fab.js'; ``` Importujte TypeScript typy komponenty podle potřeby: ```ts import type { Fab } from 'mdui/components/fab.js'; ``` Příklad použití: ```html ``` ## Příklady {#examples} ### Ikona {#example-icon} Použijte atribut `icon` k určení názvu ikony Material Icons. Lze také použít prvek ikony pomocí slotu `icon`. ```html ``` ### Rozbalený stav {#example-extended} Přidejte atribut `extended` pro nastavení FAB do rozbaleného stavu, kdy se zobrazí text ve výchozím slotu. ```html Napsat ``` ### Tvar {#example-variant} Pomocí atributu `variant` můžete nastavit tvar FAB. ```html ``` ### Velikost {#example-size} Pomocí atributu `size` můžete nastavit velikost FAB. ```html ``` ### Odkaz {#example-link} Pomocí atributu `href` přidáte na FAB funkci odkazu. Pak můžete také použít atributy související s odkazy: `download`, `target`, `rel`. ```html ``` ### Zakázaný stav a stav načítání {#example-disabled} Atribut `disabled` FAB zakáže; atribut `loading` přidá stav načítání. ```html ``` ## mdui-fab API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
variant variant true 'primary' | 'surface' | 'secondary' | 'tertiary' 'primary'

Varianta FAB. Jednotlivé varianty se liší pouze barvou. Možné hodnoty:

  • primary: Používá barvu pozadí Primary container.
  • surface: Používá barvu pozadí Surface container high.
  • secondary: Používá barvu pozadí Secondary container.
  • tertiary: Používá barvu pozadí Tertiary container.
size size true 'normal' | 'small' | 'large' 'normal'

Velikost FAB. Možné hodnoty:

  • normal: Normální velikost FAB.
  • small: Malé FAB.
  • large: Velké FAB.
icon icon true string

Název ikony z knihovny Material Icons. Lze také nastavit pomocí slot="icon".
extended extended true boolean false

Určuje, zda je FAB v rozbaleném stavu.
href href true 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 true string

Soubor ke stažení.

Poznámka: Platí pouze, pokud je nastaven atribut href.
target target true '_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 true '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 true boolean false

Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
tabindex tabIndex false number

Pořadí prvku při přepínání fokusu pomocí klávesy Tab.
disabled disabled true boolean false

Určuje, zda je prvek zakázaný.
loading loading true boolean false

Určuje, zda je prvek ve stavu načítání.
name name true 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 true 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 true '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 true 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 true 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 true '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 true '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 true 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 true '_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".
undefined validity false ValidityState

Objekt s informacemi o stavu validace formuláře; podrobnosti viz ValidityState.
undefined validationMessage false 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 Popis
click(): void

Simuluje kliknutí myší na prvek.
focus(options?: FocusOptions): 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 Popis
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í.
### Slots
Název Popis
(výchozí)

Text.
icon

Ikona.
### CSS Parts
Název Popis
button

Interní prvek <button> nebo <a>.
label

Text na pravé straně.
icon

Ikona na levé straně.
loading

Prvek <mdui-circular-progress> ve stavu načítání.
### CSS Custom Properties
Název Popis
--shape-corner-small

Velikost zaoblení rohů komponenty, když je size="small". Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
--shape-corner-normal

Velikost zaoblení rohů komponenty, když je size="normal". Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
--shape-corner-large

Velikost zaoblení rohů komponenty, když je size="large". Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
# Komponenta Ikona Ikony se používají k reprezentaci běžných akcí. Podporují ikony Material Icons a také použití SVG ikon. ## Způsob použití {#usage} Importujte komponentu podle potřeby: ```js import 'mdui/components/icon.js'; ``` Importujte TypeScript typy komponenty podle potřeby: ```ts import type { Icon } from 'mdui/components/icon.js'; ``` Příklad použití: ```html ``` ### Použití ikon Material Icons {#usage-material-icons} Pokud chcete používat ikony Material Icons prostřednictvím této komponenty, musíte samostatně importovat soubor CSS pro Material Icons. Material Icons mají celkem 5 variant: Filled, Outlined, Rounded, Sharp, Two Tone. Podle varianty ikony, kterou chcete použít, importujte odpovídající soubor CSS: ```html ``` Při používání komponenty zadejte název ikony do atributu `name` a jako příponu použijte název varianty ikony (u varianty Filled není třeba příponu přidávat). Zde je způsob použití 5 variant ikony `delete`: ```html ``` Můžete přímo vyhledávat ikony v nástroji [Vyhledávání ikon Material Icons](/cs/docs/2/components/icon#search) v dolní části stránky a poté kliknutím na požadovanou ikonu zkopírujete kód ikony do schránky. Mdui navíc poskytuje samostatný balíček [`@mdui/icons`](/cs/docs/2/libraries/icons), kde každá ikona je samostatný soubor, což umožňuje importovat pouze potřebné ikonové komponenty, aniž byste museli importovat celou knihovnu ikon. ### Použití SVG ikon {#usage-svg} Tato komponenta také podporuje použití SVG ikon jako obsahu ikony. Můžete použít atribut `src` komponenty k zadání odkazu na SVG ikonu. Například: ```html ``` Lze také vložit obsah SVG do výchozího slotu komponenty. Například: ```html ``` ## Příklady {#examples} ### Nastavení barvy {#example-color} Nastavte styl CSS `color` prvku `` nebo jeho nadřazeného prvku pro změnu barvy ikony. ```html ``` ### Nastavení velikosti {#example-size} Nastavte styl CSS `font-size` prvku `` nebo jeho nadřazeného prvku pro změnu velikosti ikony. ```html ``` ## mdui-icon API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
name name true string

Název ikony z knihovny Material Icons.
src src true string

Cesta k SVG ikoně.
### Slots
Název Popis
(výchozí)

Obsah ikony svg.
# Komponenta Rozvržení Rozvržení poskytuje flexibilní systém pro tvorbu složitých rozvržení stránek. ## Způsob použití {#usage} Importujte komponenty podle potřeby: ```js import 'mdui/components/layout.js'; import 'mdui/components/layout-item.js'; import 'mdui/components/layout-main.js'; ``` Importujte TypeScript typy komponent podle potřeby: ```ts import type { Layout } from 'mdui/components/layout.js'; import type { LayoutItem } from 'mdui/components/layout-item.js'; import type { LayoutMain } from 'mdui/components/layout-main.js'; ``` **Úvod:** Systém rozvržení se řídí principem z vnějšku dovnitř. Každá komponenta rozvržení (komponenta ``) zabírá místo v jednom ze čtyř směrů (nahoře, dole, vlevo, vpravo). Následující komponenty rozvržení pak zabírají místo ve zbývajícím prostoru. Následující komponenty dědí přímo z komponenty ``, a proto je lze také použít jako komponenty rozvržení: - [``](/cs/docs/2/components/navigation-bar) - [``](/cs/docs/2/components/navigation-drawer) - [``](/cs/docs/2/components/navigation-rail) - [``](/cs/docs/2/components/bottom-app-bar) - [``](/cs/docs/2/components/top-app-bar) Poslední částí systému rozvržení je komponenta ``, která zabírá zbývající prostor. Do této komponenty můžete umístit obsah stránky. ## Příklady {#examples} ### Pořadí komponent rozvržení {#layout-default-order} Ve výchozím nastavení zabírají komponenty rozvržení místo v pořadí, v jakém se objeví v kódu. Tento koncept můžete pochopit z následujících dvou příkladů, kde je pořadí [``](/cs/docs/2/components/top-app-bar) a [``](/cs/docs/2/components/navigation-drawer) v kódu odlišné.

Pro zobrazení tohoto příkladu použijte velkou obrazovku.

```html Horní aplikační lišta Boční navigační panel Hlavní ``` ```html Boční navigační panel Horní aplikační lišta Hlavní ``` Můžete si všimnout, že když je [``](/cs/docs/2/components/top-app-bar) umístěna před [``](/cs/docs/2/components/navigation-drawer), [``](/cs/docs/2/components/top-app-bar) nejprve zabere celou šířku obrazovky, zatímco [``](/cs/docs/2/components/navigation-drawer) může zabrat pouze výšku ve zbývajícím prostoru. Po prohození pořadí [``](/cs/docs/2/components/navigation-drawer) nejprve zabere celou výšku obrazovky a [``](/cs/docs/2/components/top-app-bar) může zabrat pouze šířku ve zbývajícím prostoru. ### Umístění komponent rozvržení {#example-placement} U komponenty `` můžete pomocí atributu `placement` určit její umístění nahoře, dole, vlevo nebo vpravo v rozvržení. U komponent [``](/cs/docs/2/components/navigation-drawer) a [``](/cs/docs/2/components/navigation-rail) můžete také použít atribut `placement` k určení jejich umístění vlevo nebo vpravo v rozvržení. V následujícím příkladu jsme umístili dvě komponenty `` na obě strany aplikace. ```html Horní aplikační lišta Položka rozvržení Položka rozvržení Hlavní ``` ### Vlastní pořadí komponent rozvržení {#example-order} Ve většině případů stačí umístit komponenty rozvržení v pořadí, abyste dosáhli požadovaného rozvržení. Lze také použít atribut `order` k určení pořadí rozvržení. Systém seřadí komponenty podle hodnoty `order` od nejmenší po největší. Pokud je `order` stejný, seřadí se podle pořadí v kódu. Výchozí `order` všech komponent rozvržení je `0`. ```html Položka rozvržení Horní aplikační lišta
order="-1" Hlavní ``` ## mdui-layout-item API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
placement placement true 'top' | 'bottom' | 'left' | 'right' 'top'

Umístění komponenty. Možné hodnoty:

  • top: Nahoře.
  • bottom: Dole.
  • left: Vlevo.
  • right: Vpravo.
order order true number

Pořadí této komponenty v rámci rozvržení <mdui-layout>. Řadí se vzestupně (nižší hodnoty mají přednost). Výchozí hodnota je 0.
### Slots
Název Popis
(výchozí)

Může obsahovat libovolný obsah.
## mdui-layout-main API ### Slots
Název Popis
(výchozí)

Může obsahovat libovolný obsah.
## mdui-layout API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
full-height fullHeight true boolean false

Nastaví výšku aktuálního rozvržení na 100%.
### Slots
Název Popis
(výchozí)

Může obsahovat prvky <mdui-top-app-bar>, <mdui-bottom-app-bar>, <mdui-navigation-bar>, <mdui-navigation-drawer>, <mdui-navigation-rail>, <mdui-layout-item>, <mdui-layout-main>.
# Komponenta Lineární indikátor průběhu Lineární indikátor průběhu je horizontální indikátor používaný k zobrazení průběhu úkolu uživateli, například načítání dat nebo odesílání formuláře. ## Způsob použití {#usage} Importujte komponentu podle potřeby: ```js import 'mdui/components/linear-progress.js'; ``` Importujte TypeScript typy komponenty podle potřeby: ```ts import type { LinearProgress } from 'mdui/components/linear-progress.js'; ``` Příklad použití: ```html ``` ## Příklady {#examples} ### Nastavení průběhu {#example-value} Lineární indikátor průběhu má standardně neurčitý průběh. Pomocí atributu `value` můžete nastavit aktuální průběh, standardní maximální hodnota průběhu je `1`. ```html ``` Pomocí atributu `max` můžete nastavit maximální hodnotu průběhu. ```html ``` ## mdui-linear-progress API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
max max true number 1

Maximální hodnota indikátoru průběhu. Výchozí hodnota je 1.
value value false number

Aktuální hodnota indikátoru průběhu. Pokud tato hodnota není zadána, je v neurčitém stavu.
### CSS Parts
Název Popis
indicator

Část indikátoru.
### CSS Custom Properties
Název Popis
--shape-corner

Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
# Komponenta Seznam Seznam je vertikálně uspořádaný seznam pro zobrazování textu nebo obrázků, který uživatelům usnadňuje rychlé procházení a přístup k souvisejícím informacím. ## Způsob použití {#usage} Importujte komponenty podle potřeby: ```js import 'mdui/components/list.js'; import 'mdui/components/list-item.js'; import 'mdui/components/list-subheader.js'; ``` Importujte TypeScript typy komponent podle potřeby: ```ts import type { List } from 'mdui/components/list.js'; import type { ListItem } from 'mdui/components/list-item.js'; import type { ListSubheader } from 'mdui/components/list-subheader.js'; ``` Příklad použití: ```html Podnadpis Položka 1 Položka 2 ``` ## Příklady {#examples} ### Textový obsah {#example-text} Nastavením atributu `headline` na komponentě `` nastavíte hlavní text položky seznamu. Nastavením atributu `description` nastavíte vedlejší text. ```html ``` Lze také nastavit hlavní text pomocí výchozího slotu a vedlejší text pomocí slotu `description`. ```html Hlavní text Hlavní text Podpůrný text ``` Ve výchozím nastavení se hlavní i vedlejší text zobrazí celý bez ohledu na délku. Omezení počtu řádků pro hlavní a vedlejší text můžete nastavit pomocí atributů `headline-line` a `description-line`, maximálně na 3 řádky. ```html Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Hlavní text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text Podpůrný text ``` ### Obsah po stranách {#example-side} Nastavením atributů `icon` a `end-icon` na komponentě `` můžete přidat ikony Material Icons na levou a pravou stranu položky seznamu. ```html Hlavní text ``` Lze také přidat prvky na levou a pravou stranu položky seznamu pomocí slotů `icon` a `end-icon`. ```html Hlavní text ``` ### Odkaz {#example-link} Nastavením atributu `href` můžete změnit položku seznamu na odkaz. Pak můžete také použít atributy související s odkazy: `download`, `target`, `rel`. ```html Hlavní text ``` ### Zakázaný stav {#example-disabled} Přidáním atributu `disabled` na komponentu `` zakážete tuto položku seznamu. Tím se zakážou také komponenty jako checkbox, radio, switch v položce seznamu. ```html Hlavní text Hlavní text ``` ### Aktivní stav {#example-active} Přidáním atributu `active` na komponentu `` aktivujete tuto položku seznamu. ```html Hlavní text Hlavní text ``` ### Neklikatelný stav {#example-nonclickable} Přidáním atributu `nonclickable` na komponentu `` odstraníte efekt při najetí myší a efekt vlnky při kliknutí na položce seznamu. ```html Hlavní text Hlavní text ``` ### Zaoblený tvar {#example-rounded} Přidáním atributu `rounded` na komponentu `` zobrazíte tuto položku seznamu se zaoblenými rohy. ```html Hlavní text Hlavní text ``` ### Vertikální zarovnání {#example-alignment} Nastavením atributu `alignment` na komponentě `` můžete upravit zarovnání prvků na levé a pravé straně položky seznamu. Možné hodnoty jsou: - `start`: Zarovnání nahoru - `center`: Zarovnání na střed - `end`: Zarovnání dolů ```html Hlavní text Hlavní text Hlavní text ``` ### Vlastní obsah {#example-custom} Použitím slotu `custom` v komponentě `` můžete zcela přizpůsobit obsah položky seznamu. ```html
test
 ``` ## mdui-list-item API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
headline headline true string

Hlavní text. Lze také nastavit pomocí výchozího slotu.
headline-line headlineLine true 1 | 2 | 3

Počet řádků hlavního textu. Po překročení limitu se text zkrátí. Ve výchozím nastavení není omezen. Možné hodnoty:

  • 1: Zobrazí jeden řádek, přesahující text bude zkrácen.
  • 2: Zobrazí dva řádky, přesahující text bude zkrácen.
  • 3: Zobrazí tři řádky, přesahující text bude zkrácen.
description description true string

Vedlejší text. Lze také nastavit pomocí slot="description".
description-line descriptionLine true 1 | 2 | 3

Počet řádků vedlejšího textu. Po překročení limitu se text zkrátí. Ve výchozím nastavení není omezen. Možné hodnoty:

  • 1: Zobrazí jeden řádek, přesahující text bude zkrácen.
  • 2: Zobrazí dva řádky, přesahující text bude zkrácen.
  • 3: Zobrazí tři řádky, přesahující text bude zkrácen.
icon icon true string

Název ikony z knihovny Material Icons na levé straně. Lze také nastavit pomocí slot="icon".
end-icon endIcon true string

Název ikony z knihovny Material Icons na pravé straně. Lze také nastavit pomocí slot="end-icon".
disabled disabled true boolean false

Určuje, zda je tato položka seznamu zakázaná. Pokud je zakázaná, položka zešedne a prvky v ní, jako <mdui-checkbox>, <mdui-radio>, <mdui-switch>, budou také zakázané.
active active true boolean false

Určuje, zda je tato položka seznamu aktivní.
nonclickable nonclickable true boolean false

Určuje, zda má být položka seznamu neklikatelná. Po jejím nastavení zůstanou interaktivní prvky uvnitř (např. <mdui-checkbox>, <mdui-radio>, <mdui-switch>) funkční.
rounded rounded true boolean false

Určuje, zda se má použít položka seznamu se zaoblenými rohy.
alignment alignment true 'start' | 'center' | 'end' 'center'

Způsob vertikálního zarovnání položky seznamu. Možné hodnoty:

  • start: Zarovnání nahoru.
  • center: Zarovnání na střed.
  • end: Zarovnání dolů.
href href true 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 true string

Soubor ke stažení.

Poznámka: Platí pouze, pokud je nastaven atribut href.
target target true '_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 true '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 true boolean false

Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
tabindex tabIndex false number

Pořadí prvku při přepínání fokusu pomocí klávesy Tab.
### Metody
Název Popis
click(): void

Simuluje kliknutí myší na prvek.
focus(options?: FocusOptions): 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.
### Události
Název Popis
focus

Spustí se při získání fokusu.
blur

Spustí se při ztrátě fokusu.
### Slots
Název Popis
(výchozí)

Hlavní text.
description

Vedlejší text.
icon

Prvek na levé straně položky seznamu.
end-icon

Prvek na pravé straně položky seznamu.
custom

Libovolný vlastní obsah.
### CSS Parts
Název Popis
container

Kontejner položky seznamu.
icon

Ikona na levé straně.
end-icon

Ikona na pravé straně.
body

Prostřední část.
headline

Hlavní nadpis.
description

Vedlejší nadpis.
### CSS Custom Properties
Název Popis
--shape-corner

Velikost zaoblení rohů položky seznamu. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
--shape-corner-rounded

Velikost zaoblení rohů položky seznamu, pokud je zadán atribut rounded. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
## mdui-list-subheader API ### Slots
Název Popis
(výchozí)

Text podnadpisu seznamu.
## mdui-list API ### Slots
Název Popis
(výchozí)

Prvky <mdui-list-item>.
# Komponenta Nabídka Nabídka zobrazuje svisle uspořádané možnosti a otevírá se po interakci s tlačítkem nebo jiným ovládacím prvkem. Pokud potřebujete implementovat rozbalovací nabídku, můžete použít komponentu [``](/cs/docs/2/components/dropdown). ## Způsob použití {#usage} Importujte komponenty podle potřeby: ```js import 'mdui/components/menu.js'; import 'mdui/components/menu-item.js'; ``` Importujte TypeScript typy komponent podle potřeby: ```ts import type { Menu } from 'mdui/components/menu.js'; import type { MenuItem } from 'mdui/components/menu-item.js'; ``` Příklad použití: ```html Položka 1 Položka 2 ``` ## Příklady {#examples} ### Rozbalovací nabídka {#example-dropdown} Použijte komponentu [``](/cs/docs/2/components/dropdown) k implementaci rozbalovací nabídky. ```html otevřít nabídku Položka 1 Položka 2 ``` ### Kompaktní rozvržení {#example-dense} Přidáním atributu `dense` na komponentu `` dosáhnete kompaktního rozvržení. ```html Položka 1 Položka 2 Položka 3 ``` ### Zakázaná položka nabídky {#example-disabled} Přidáním atributu `disabled` na komponentu `` zakážete položku nabídky. ```html Položka 1 Položka 2 Položka 3 ``` ### Podpora jednoho výběru {#example-selects-single} Nastavením atributu `selects="single"` na komponentě `` zapnete režim jednoho výběru. Hodnota `value` komponenty `` je pak hodnotou `value` aktuálně vybrané komponenty ``. ```html Položka 1 Položka 2 ``` ### Podpora více výběru {#example-selects-multiple} Nastavením atributu `selects="multiple"` na komponentě `` zapnete režim vícenásobného výběru. Hodnota `value` komponenty `` je pak pole hodnot `value` aktuálně vybraných komponent ``. Poznámka: V režimu vícenásobného výběru je hodnota `value` komponenty `` pole a lze ji číst i nastavovat pouze pomocí JavaScript vlastnosti. ```html Položka 1 Položka 2 Položka 3 ``` ### Ikona {#example-icon} Na komponentě `` můžete pomocí atributů `icon` a `end-icon` přidat ikony Material Icons na levou a pravou stranu položky nabídky. Pomocí atributu `end-text` můžete přidat text na pravou stranu. Kromě toho můžete také přidat ikony a text na levou a pravou stranu položky nabídky pomocí slotů `icon`, `end-icon` a `end-text`. Pokud potřebujete ponechat prázdné místo pro ikonu na levé straně položky nabídky pro zachování zarovnání s ostatními položkami nabídky, můžete atribut `icon` nastavit na prázdný řetězec. ```html Položka 1 Položka 2 Ctrl+X Položka 3 ``` V režimu jednoho či vícenásobného výběru můžete pomocí atributu `selected-icon` nebo slotu `selected-icon` nastavit ikonu vybraného stavu. ```html Položka 1 Položka 2 ``` ### Odkaz {#example-link} Nastavením atributu `href` na komponentě `` změníte položku nabídky na odkaz. Pak můžete také použít atributy související s odkazy: `download`, `target`, `rel`. ```html Položka 1 Položka 2 ``` ### Podnabídka {#example-submenu} V komponentě `` můžete použít slot `submenu` k určení prvků položek podnabídky. ```html Řádkování Jednoduché 1,5 Dvojité Vlastní: 1,2 Styl odstavce ``` Na komponentě `` můžete pomocí atributu `submenu-trigger` nastavit způsob spuštění podnabídky. ```html Řádkování Jednoduché 1,5 Dvojité Vlastní: 1,2 Styl odstavce ``` Když je atribut `submenu-trigger` nastaven na `hover`, můžete na komponentě `` pomocí atributů `submenu-open-delay` a `submenu-close-delay` nastavit zpoždění otevření a zavření podnabídky. ```html Řádkování Jednoduché 1,5 Dvojité Vlastní: 1,2 Styl odstavce ``` ### Vlastní obsah {#example-custom} V komponentě `` můžete pomocí slotu `custom` zcela přizpůsobit obsah položky nabídky. ```html
ABS
Vrátí absolutní hodnotu čísla
ACOS
Vrátí arkus kosinus čísla v radiánech
ACOSH
Vrátí hyperbolický arkus kosinus čísla
 ``` ## mdui-menu-item API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
value value true string

Hodnota položky nabídky.
disabled disabled true boolean false

Určuje, zda je položka nabídky zakázaná.
icon icon true string

Název ikony z knihovny Material Icons na levé straně. Lze také nastavit pomocí slot="icon".

Pokud ikonu nechcete zobrazit, ale zachovat pro ni místo vlevo, můžete použít prázdný řetězec jako zástupný symbol.
end-icon endIcon true string

Název ikony z knihovny Material Icons na pravé straně. Lze také nastavit pomocí slot="end-icon".
end-text endText true string

Text na pravé straně. Lze také nastavit pomocí slot="end-text".
selected-icon selectedIcon true string

Název ikony z knihovny Material Icons pro vybraný stav. Lze také nastavit pomocí slot="selected-icon".
submenu-open submenuOpen true boolean false

Určuje, zda je otevřena podnabídka.
href href true 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 true string

Soubor ke stažení.

Poznámka: Platí pouze, pokud je nastaven atribut href.
target target true '_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 true '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 true boolean false

Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
tabindex tabIndex false number

Pořadí prvku při přepínání fokusu pomocí klávesy Tab.
### Metody
Název Popis
click(): void

Simuluje kliknutí myší na prvek.
focus(options?: FocusOptions): 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.
### Události
Název Popis
focus

Spustí se při získání fokusu.
blur

Spustí se při ztrátě fokusu.
submenu-open

Spustí se na začátku otevírání podnabídky. Otevření lze zabránit voláním event.preventDefault().
submenu-opened

Spustí se po dokončení animace otevření podnabídky.
submenu-close

Spustí se na začátku zavírání podnabídky. Zavření lze zabránit voláním event.preventDefault().
submenu-closed

Spustí se po dokončení animace zavření podnabídky.
### Slots
Název Popis
(výchozí)

Text položky nabídky.
icon

Ikona na levé straně položky nabídky.
end-icon

Ikona na pravé straně položky nabídky.
end-text

Text na pravé straně položky nabídky.
selected-icon

Ikona pro vybraný stav.
submenu

Podnabídka.
custom

Libovolný vlastní obsah.
### CSS Parts
Název Popis
container

Kontejner položky nabídky.
icon

Ikona na levé straně.
label

Textový obsah.
end-icon

Ikona na pravé straně.
end-text

Text na pravé straně.
selected-icon

Ikona pro vybraný stav.
submenu

Prvek podnabídky.
## mdui-menu API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
selects selects true 'single' | 'multiple'

Režim výběru položek nabídky. Výchozí: výběr není povolen. Možné hodnoty:

  • single: Jednotlivý výběr.
  • multiple: Vícenásobný výběr.
value value false string | string[]

Hodnota aktuálně vybraného prvku <mdui-menu-item>.

Poznámka: HTML atribut této vlastnosti je vždy řetězec a počáteční hodnotu lze nastavit pomocí HTML atributu pouze pokud je selects="single". Hodnota JavaScriptové vlastnosti je řetězec, pokud je selects="single", a pole řetězců, pokud je selects="multiple". Proto, pokud je selects="multiple", lze tuto hodnotu změnit pouze úpravou JavaScriptové vlastnosti.
dense dense true boolean false

Určuje, zda položky nabídky používají kompaktní rozložení.
submenu-trigger submenuTrigger true 'click' | 'hover' | 'focus' | 'manual' | string 'click hover'

Způsob spuštění podnabídky. Lze zadat více hodnot oddělených mezerami. Možné hodnoty:

  • click: Otevře podnabídku po kliknutí na položku nabídky.
  • hover: Otevře podnabídku po najetí myší na položku nabídky.
  • focus: Otevře podnabídku po získání fokusu položkou nabídky.
  • manual: Podnabídku lze otevřít a zavřít pouze programově. Nelze kombinovat s jiným způsobem spuštění.
submenu-open-delay submenuOpenDelay true number 200

Zpoždění (v ms) před otevřením podnabídky při najetí myší.
submenu-close-delay submenuCloseDelay true number 200

Zpoždění (v ms) před zavřením podnabídky při najetí myší.
### Metody
Název Popis
focus(options?: FocusOptions): void

Nastaví fokus na aktuální prvek.
blur(): void

Odebere fokus z aktuálního prvku.
### Události
Název Popis
change

Spustí se při změně stavu výběru položky nabídky.
### Slots
Název Popis
(výchozí)

Prvky jako položky podnabídky (<mdui-menu-item>), oddělovače (<mdui-divider>) atd.
### CSS Custom Properties
Název Popis
--shape-corner

Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
# Komponenta Navigační lišta Navigační lišta slouží k rychlému přepínání mezi několika hlavními stránkami na mobilních zařízeních. ## Způsob použití {#usage} Importujte komponenty podle potřeby: ```js import 'mdui/components/navigation-bar.js'; import 'mdui/components/navigation-bar-item.js'; ``` Importujte TypeScript typy komponent podle potřeby: ```ts import type { NavigationBar } from 'mdui/components/navigation-bar.js'; import type { NavigationBarItem } from 'mdui/components/navigation-bar-item.js'; ``` Příklad použití: (`style="position: relative"` v příkladu je jen pro ukázku; v ostrém použití tento styl odstraňte.) ```html Položka 1 Položka 2 Položka 3 ``` **Upozornění:** Ve výchozím nastavení používá `position: fixed` a automaticky přidá `padding-bottom` na `body`, aby obsah stránky nezakryla. V těchto dvou případech se však používá `position: absolute`: 1. Když je zadán atribut `scroll-target`. Pak se `padding-bottom` přidá na prvek `scroll-target`. 2. Když se komponenta nachází uvnitř [``](/cs/docs/2/components/layout). Pak se `padding-bottom` nepřidává. ## Příklady {#examples} ### Stav zobrazení textového štítku {#example-label-visibility} Textový štítek v navigační liště se standardně zobrazuje vždy, když jsou 3 nebo méně položek; když je více než 3 položky, zobrazí se text pouze u vybrané položky. ```html Položka 1 Položka 2 Položka 3
Položka 1 Položka 2 Položka 3 Položka 4 ``` Stav zobrazení textového štítku můžete upravit nastavením atributu `label-visibility` na komponentě ``. Možné hodnoty jsou: - `selected`: Zobrazí text pouze u vybrané položky - `labeled`: Zobrazí text vždy - `unlabeled`: Nikdy nezobrazí text ```html Položka 1 Položka 2 Položka 3 vybraná označená neoznačená ``` ### Umístění v určeném kontejneru {#example-scroll-target} Ve výchozím nastavení se navigační lišta zobrazuje dole na stránce. Pokud chcete umístit navigační lištu do určeného kontejneru, můžete na komponentě `` zadat atribut `scroll-target`. Hodnota tohoto atributu má být CSS selektor nebo DOM prvek kontejneru s rolovatelným obsahem. V takovém případě se navigační lišta umístí relativně k nadřazenému prvku; styl `position: relative; overflow: hidden` je nutné na nadřazený prvek přidat ručně. ```html
Položka 1 Položka 2 Položka 3
Obsah stránky
``` ### Skrytí při rolování {#example-scroll-behavior} Nastavením atributu `scroll-behavior` na `hide` na komponentě `` dosáhnete toho, že se navigační lišta skryje při rolování stránky dolů a zobrazí se při rolování nahoru. Pomocí atributu `scroll-threshold` můžete nastavit, po kolika pixelech rolování se má navigační lišta začít skrývat. ```html
Položka 1 Položka 2 Položka 3
Obsah stránky
``` ### Ikona {#example-icon} Na komponentě `` se atribut `icon` používá k nastavení ikony položky navigace v neaktivním stavu a atribut `active-icon` k nastavení ikony položky navigace v aktivním stavu. Lze také použít sloty `icon` a `active-icon` k nastavení prvků ikony v neaktivním a aktivním stavu. ```html Položka 1 Položka 2 ``` ### Odkaz {#example-link} Nastavením atributu `href` na komponentě `` změníte položku navigace na odkaz. Pak můžete také použít atributy související s odkazy: `download`, `target`, `rel`. ```html Položka 1 Položka 2 ``` ### Odznak {#example-badge} V komponentě `` můžete přidat odznak pomocí slotu `badge`. ```html Položka 1 99+ Položka 2 ``` ## mdui-navigation-bar-item API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
icon icon true string

Název ikony z knihovny Material Icons pro neaktivní stav. Lze také nastavit pomocí slot="icon".
active-icon activeIcon true string

Název ikony z knihovny Material Icons pro aktivní stav. Lze také nastavit pomocí slot="active-icon".
value value true string

Hodnota navigační položky.
href href true 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 true string

Soubor ke stažení.

Poznámka: Platí pouze, pokud je nastaven atribut href.
target target true '_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 true '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 true boolean false

Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
tabindex tabIndex false number

Pořadí prvku při přepínání fokusu pomocí klávesy Tab.
### Metody
Název Popis
click(): void

Simuluje kliknutí myší na prvek.
focus(options?: FocusOptions): 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.
### Události
Název Popis
focus

Spustí se při získání fokusu.
blur

Spustí se při ztrátě fokusu.
### Slots
Název Popis
(výchozí)

Text navigační položky.
icon

Ikona.
active-icon

Prvek ikony pro aktivní stav.
badge

Odznak.
### CSS Parts
Název Popis
container

Kontejner navigační položky.
indicator

Indikátor.
badge

Odznak.
icon

Ikona.
active-icon

Ikona pro aktivní stav.
label

Text navigační položky.
### CSS Custom Properties
Název Popis
--shape-corner-indicator

Velikost zaoblení rohů indikátoru. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
## mdui-navigation-bar API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
hide hide true boolean false

Určuje, zda je lišta skrytá.
label-visibility labelVisibility true 'auto' | 'selected' | 'labeled' | 'unlabeled' 'auto'

Viditelnost textu. Možné hodnoty:

  • auto: Pokud je počet položek menší nebo roven 3, text se zobrazuje vždy; pokud je počet položek větší než 3, text se zobrazuje pouze u vybrané položky.
  • selected: Text se zobrazuje pouze u vybrané položky.
  • labeled: Text se zobrazuje vždy.
  • unlabeled: Text se nezobrazuje nikdy.
value value true string

Hodnota aktuálně vybraného prvku <mdui-navigation-bar-item>.
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Chování při posouvání. Možné hodnoty:

  • hide: Při posouvání se lišta skryje.
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Prvek, na kterém se sledují události posouvání. Hodnotou může být CSS selektor, DOM element nebo jQuery objekt. Výchozí hodnotou je window (okno).
scroll-threshold scrollThreshold true number

Vzdálenost v pixelech, o kterou musí být obsah posunut, aby se chování aktivovalo.
order order true number

Pořadí této komponenty v rámci rozvržení <mdui-layout>. Řadí se vzestupně (nižší hodnoty mají přednost). Výchozí hodnota je 0.
### Události
Název Popis
change

Spustí se při změně hodnoty.
show

Spustí se na začátku zobrazování. Zobrazení lze zabránit voláním event.preventDefault().
shown

Spustí se po dokončení animace zobrazení.
hide

Spustí se na začátku skrývání. Skrytí lze zabránit voláním event.preventDefault().
hidden

Spustí se po dokončení animace skrytí.
### Slots
Název Popis
(výchozí)

Komponenty <mdui-navigation-bar-item>.
### CSS Custom Properties
Název Popis
--shape-corner

Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
--z-index

Hodnota CSS z-index komponenty.
# Komponenta Boční navigační panel Boční navigační panel slouží k navigaci po straně stránky a umožňuje rychlý přístup k různým stránkám nebo obsahu. Navigační položky do bočního navigačního panelu obvykle přidáte pomocí komponenty [``](/cs/docs/2/components/list). ## Způsob použití {#usage} Importujte komponentu podle potřeby: ```js import 'mdui/components/navigation-drawer.js'; ``` Importujte TypeScript typy komponenty podle potřeby: ```ts import type { NavigationDrawer } from 'mdui/components/navigation-drawer.js'; ``` Příklad použití: ```html Zavřít boční navigační panel Otevřít boční navigační panel ``` **Upozornění:** Ve výchozím nastavení používá `position: fixed`. Pokud je atribut `modal` nastaven na `false` a šířka okna je alespoň [`--mdui-breakpoint-md`](/cs/docs/2/styles/design-tokens#breakpoint), automaticky se na `body` přidá styl `padding-left` nebo `padding-right`, aby nedošlo k zakrytí obsahu stránky touto komponentou. V těchto dvou případech se však používá `position: absolute`: 1. Když je atribut `contained` `true`. 2. Když se komponenta nachází uvnitř [``](/cs/docs/2/components/layout). Pak se `padding-left` nebo `padding-right` nepřidává. ## Příklady {#examples} ### Umístění v určeném kontejneru {#example-contained} Ve výchozím nastavení se boční navigační panel zobrazuje vlevo nebo vpravo na stránce. Pokud chcete umístit boční navigační panel do určeného kontejneru, můžete přidat atribut `contained`. V takovém případě se boční navigační panel umístí relativně k nadřazenému prvku; styl `position: relative; overflow: hidden;` je nutné na nadřazený prvek přidat ručně. ```html
Zavřít boční navigační panel
Otevřít boční navigační panel
``` ### Modální {#example-modal} Přidáním atributu `modal` se při otevření bočního navigačního panelu zobrazí překryvná vrstva. Pamatujte, že pokud je šířka okna nebo nadřazeného prvku menší než [`--mdui-breakpoint-md`](/cs/docs/2/styles/design-tokens#breakpoint), bude tato hodnota ignorována a překryvná vrstva se zobrazí vždy. Přidejte atribut `close-on-esc` pro zavření bočního navigačního panelu stisknutím klávesy ESC. Přidejte atribut `close-on-overlay-click` pro zavření bočního navigačního panelu kliknutím na překryvnou vrstvu. ```html
Zavřít boční navigační panel
Otevřít boční navigační panel
``` ### Umístění vpravo {#example-placement} Nastavením atributu `placement` na `right` zobrazíte boční navigační panel na pravé straně stránky. ```html
Zavřít boční navigační panel
Otevřít boční navigační panel
``` ## mdui-navigation-drawer API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
open open true boolean false

Určuje, zda je navigační panel otevřený.
modal modal true boolean false

Určuje, zda se při otevření navigačního panelu zobrazí překryvná vrstva.

Na zařízeních s úzkou obrazovkou (šířka obrazovky menší než --mdui-breakpoint-md) se překryvná vrstva zobrazuje vždy, bez ohledu na tento parametr.
close-on-esc closeOnEsc true boolean false

Určuje, zda se má navigační panel zavřít po stisknutí klávesy ESC, pokud je zobrazena překryvná vrstva.
close-on-overlay-click closeOnOverlayClick true boolean false

Určuje, zda se má navigační panel zavřít po kliknutí na překryvnou vrstvu.
placement placement true 'left' | 'right' 'left'

Umístění navigačního panelu. Možné hodnoty:

  • left: Vlevo.
  • right: Vpravo.
contained contained true boolean false

Ve výchozím nastavení se navigační panel zobrazuje vzhledem k prvku body. Pokud je tento atribut nastaven na true, bude se navigační panel zobrazovat vzhledem ke svému rodičovskému prvku.

Poznámka: Při nastavení tohoto atributu je nutné na rodičovském prvku ručně nastavit styly position: relative; overflow: hidden;.
order order true number

Pořadí této komponenty v rámci rozvržení <mdui-layout>. Řadí se vzestupně (nižší hodnoty mají přednost). Výchozí hodnota je 0.
### Události
Název Popis
open

Spustí se před otevřením navigačního panelu. Otevření lze zabránit voláním event.preventDefault().
opened

Spustí se po dokončení animace otevření navigačního panelu.
close

Spustí se před zavřením navigačního panelu. Zavření lze zabránit voláním event.preventDefault().
closed

Spustí se po dokončení animace zavření navigačního panelu.
overlay-click

Spustí se při kliknutí na překryvnou vrstvu.
### Slots
Název Popis
(výchozí)

Obsah navigačního panelu.
### CSS Parts
Název Popis
overlay

Překryvná vrstva.
panel

Kontejner navigačního panelu.
### CSS Custom Properties
Název Popis
--shape-corner

Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
--z-index

Hodnota CSS z-index komponenty.
# Komponenta Postranní navigační lišta Postranní navigační lišta slouží k přístupu k hlavním stránkám na tabletech a stolních počítačích. ## Způsob použití {#usage} Importujte komponenty podle potřeby: ```js import 'mdui/components/navigation-rail.js'; import 'mdui/components/navigation-rail-item.js'; ``` Importujte TypeScript typy komponent podle potřeby: ```ts import type { NavigationRail } from 'mdui/components/navigation-rail.js'; import type { NavigationRailItem } from 'mdui/components/navigation-rail-item.js'; ``` Příklad použití: (`style="position: relative"` v příkladu je jen pro ukázku, při skutečném použití tento styl odstraňte.) ```html Nedávné Obrázky Knihovna ``` **Upozornění:** Ve výchozím nastavení používá `position: fixed` a automaticky přidá `padding-left` nebo `padding-right` na `body`, aby obsah stránky nezakryla. V těchto dvou případech se však používá `position: absolute`: 1. Když je atribut `contained` komponenty `` `true`. Pak se `padding-left` nebo `padding-right` přidá na nadřazený prvek. 2. Když se komponenta nachází uvnitř [``](/cs/docs/2/components/layout). Pak se `padding-left` nebo `padding-right` nepřidává. ## Příklady {#examples} ### Umístění v určeném kontejneru {#example-contained} Ve výchozím nastavení se postranní navigační lišta zobrazuje vlevo nebo vpravo na stránce. Pokud chcete umístit postranní navigační lištu do určeného kontejneru, můžete na komponentě `` přidat atribut `contained`. V takovém případě se postranní navigační lišta umístí relativně k nadřazenému prvku; styl `position: relative` je nutné na nadřazený prvek přidat ručně. ```html
Nedávné Obrázky Knihovna
Obsah stránky
``` ### Umístění vpravo {#example-placement} Nastavením atributu `placement` na `right` na komponentě `` zobrazíte postranní navigační lištu na pravé straně. ```html
Nedávné Obrázky Knihovna
Obsah stránky
``` ### Zobrazení oddělovače {#example-divider} Přidáním atributu `divider` na komponentu `` přidáte na postranní navigační lištu oddělovač pro odlišení od obsahu stránky. ```html
Nedávné Obrázky Knihovna
Obsah stránky
``` ### Přidání prvků nahoře/dole {#example-top-bottom} Do komponenty `` můžete pomocí slotů `top` a `bottom` přidat prvky nahoru a dolů. ```html
Nedávné Obrázky Knihovna
Obsah stránky
``` ### Vertikální zarovnání položek navigace {#example-alignment} Nastavením atributu `alignment` komponenty `` můžete upravit vertikální zarovnání položek navigace. ```html
Nedávné Obrázky Knihovna
začátek střed konec
``` ### Ikona {#example-icon} Na komponentě `` můžete pomocí atributu `icon` nastavit ikonu položky navigace v neaktivním stavu a pomocí atributu `active-icon` nastavit ikonu položky navigace v aktivním stavu. Lze také použít sloty `icon` a `active-icon` k nastavení prvků ikony v neaktivním a aktivním stavu. ```html
Nedávné Obrázky Knihovna
Obsah stránky
``` ### Pouze ikona {#example-no-label} `` může používat pouze ikonu bez textu. ```html
Obsah stránky
``` ### Odkaz {#example-link} Nastavením atributu `href` na komponentě `` změníte položku navigace na odkaz. Pak můžete také použít atributy související s odkazy: `download`, `target`, `rel`. ```html
Nedávné Obrázky Knihovna
Obsah stránky
``` ### Odznak {#example-badge} V komponentě `` můžete přidat odznak pomocí slotu `badge`. ```html
Nedávné 99+ Obrázky Knihovna
Obsah stránky
``` ## mdui-navigation-rail-item API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
icon icon true string

Název ikony z knihovny Material Icons pro neaktivní stav. Lze také nastavit pomocí slot="icon".
active-icon activeIcon true string

Název ikony z knihovny Material Icons pro aktivní stav. Lze také nastavit pomocí slot="active-icon".
value value true string

Hodnota navigační položky.
href href true 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 true string

Soubor ke stažení.

Poznámka: Platí pouze, pokud je nastaven atribut href.
target target true '_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 true '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 true boolean false

Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
tabindex tabIndex false number

Pořadí prvku při přepínání fokusu pomocí klávesy Tab.
### Metody
Název Popis
click(): void

Simuluje kliknutí myší na prvek.
focus(options?: FocusOptions): 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.
### Události
Název Popis
focus

Spustí se při získání fokusu.
blur

Spustí se při ztrátě fokusu.
### Slots
Název Popis
(výchozí)

Textový obsah.
icon

Ikona.
active-icon

Ikona pro aktivní stav.
badge

Odznak.
### CSS Parts
Název Popis
container

Kontejner navigační položky.
indicator

Indikátor.
badge

Odznak.
icon

Ikona.
active-icon

Ikona pro aktivní stav.
label

Textový obsah.
### CSS Custom Properties
Název Popis
--shape-corner-indicator

Velikost zaoblení rohů indikátoru. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
## mdui-navigation-rail API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
value value true string

Hodnota aktuálně vybraného prvku <mdui-navigation-rail-item>.
placement placement true 'left' | 'right' 'left'

Umístění navigační lišty. Možné hodnoty:

  • left: Vlevo.
  • right: Vpravo.
alignment alignment true 'start' | 'center' | 'end' 'start'

Způsob zarovnání prvků <mdui-navigation-rail-item>. Možné hodnoty:

  • start: Zarovnání nahoru.
  • center: Zarovnání na střed.
  • end: Zarovnání dolů.
contained contained true boolean false

Ve výchozím nastavení se navigační lišta zobrazuje vzhledem k prvku body. Pokud je tento atribut nastaven na true, bude se navigační lišta zobrazovat vzhledem ke svému rodičovskému prvku.

Poznámka: Při nastavení tohoto atributu je nutné na rodičovském prvku ručně nastavit styl position: relative;.
divider divider true boolean false

Určuje, zda se má přidat oddělovač mezi navigační lištu a obsah stránky.
order order true number

Pořadí této komponenty v rámci rozvržení <mdui-layout>. Řadí se vzestupně (nižší hodnoty mají přednost). Výchozí hodnota je 0.
### Události
Název Popis
change

Spustí se při změně hodnoty.
### Slots
Název Popis
(výchozí)

Komponenty <mdui-navigation-rail-item>.
top

Prvky nahoře.
bottom

Prvky dole.
### CSS Parts
Název Popis
top

Kontejner pro prvky nahoře.
bottom

Kontejner pro prvky dole.
items

Kontejner pro komponenty <mdui-navigation-rail-item>.
### CSS Custom Properties
Název Popis
--shape-corner

Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
--z-index

Hodnota CSS z-index komponenty.
# Komponenta Přepínač Přepínače umožňují uživatelům vybrat jednu z možností ze sady a zajistit, že v každém okamžiku může být vybrána pouze jedna možnost. ## Způsob použití {#usage} Importujte komponenty podle potřeby: ```js import 'mdui/components/radio-group.js'; import 'mdui/components/radio.js'; ``` Importujte TypeScript typy komponent podle potřeby: ```ts import type { RadioGroup } from 'mdui/components/radio-group.js'; import type { Radio } from 'mdui/components/radio.js'; ``` Příklad použití: ```html Čínština Angličtina ``` ## Příklady {#examples} ### Vybraný stav {#example-checked} Hodnota `value` komponenty `` je hodnota `value` aktuálně vybrané komponenty ``. Lze také přepínat aktuálně vybraný přepínač aktualizací hodnoty `value` komponenty ``. ```html Čínština Angličtina ``` Komponentu `` lze použít samostatně. V takovém případě můžete pomocí atributu `checked` číst a upravovat stav výběru. ```html Přepínač ``` ### Zakázaný stav {#example-disabled} Přidáním atributu `disabled` na komponentu `` zakážete celou skupinu přepínačů. ```html Čínština Angličtina ``` Pokud chcete zakázat konkrétní přepínač, přidejte atribut `disabled` na komponentu ``. ```html Čínština Angličtina ``` ### Ikona {#example-icon} Můžete nastavit atributy `unchecked-icon` a `checked-icon` k definování ikon Material Icons pro nevybraný a vybraný stav přepínače. Můžete je také nastavit pomocí slotů `unchecked-icon` a `checked-icon`. ```html Čínština Angličtina ``` ## mdui-radio-group API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
disabled disabled true boolean false

Určuje, zda je tato komponenta zakázaná.
form form true 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>.
name name true string ''

Název skupiny přepínačů, který se odešle spolu s daty formuláře.
value value true string ''

Aktuálně vybraná hodnota ve skupině přepínačů, která se odešle spolu s daty formuláře.
undefined defaultValue false string ''

Výchozí vybraná hodnota. Při resetování formuláře se hodnota obnoví na tuto výchozí hodnotu. Tuto vlastnost lze nastavit pouze pomocí JavaScriptu.
required required true boolean false

Určuje, zda musí být při odesílání formuláře vybrán jeden z přepínačů.
undefined validity false ValidityState

Objekt s informacemi o stavu validace formuláře; podrobnosti viz ValidityState.
undefined validationMessage false 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 Popis
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 Popis
change

Spustí se při změně vybrané hodnoty.
input

Spustí se při změně vybrané hodnoty.
invalid

Spustí se, pokud pole formuláře neprojde validací.
### Slots
Název Popis
(výchozí)

Prvky <mdui-radio>.
## mdui-radio API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
value value true string ''

Hodnota aktuálního přepínače.
disabled disabled true boolean false

Určuje, zda je aktuální přepínač zakázaný.
checked checked true boolean false

Určuje, zda je aktuální přepínač vybrán.
unchecked-icon uncheckedIcon true string

Název ikony z knihovny Material Icons pro nevybraný stav. Lze také nastavit pomocí slot="unchecked-icon".
checked-icon checkedIcon true string

Název ikony z knihovny Material Icons pro vybraný stav. Lze také nastavit pomocí slot="checked-icon".
autofocus autofocus true boolean false

Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
tabindex tabIndex false number

Pořadí prvku při přepínání fokusu pomocí klávesy Tab.
### Metody
Název Popis
click(): void

Simuluje kliknutí myší na prvek.
focus(options?: FocusOptions): 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.
### Události
Název Popis
focus

Spustí se při získání fokusu.
blur

Spustí se při ztrátě fokusu.
change

Spustí se při výběru tohoto přepínače.
### Slots
Název Popis
(výchozí)

Textový obsah.
unchecked-icon

Ikona pro nevybraný stav.
checked-icon

Ikona pro vybraný stav.
### CSS Parts
Název Popis
control

Kontejner pro levou ikonu.
unchecked-icon

Ikona pro nevybraný stav.
checked-icon

Ikona pro vybraný stav.
label

Textový obsah.
# Komponenta Posuvník rozsahu Posuvník rozsahu umožňuje uživatelům vybrat rozsah hodnot. ## Způsob použití {#usage} Importujte komponentu podle potřeby: ```js import 'mdui/components/range-slider.js'; ``` Importujte TypeScript typy komponenty podle potřeby: ```ts import type { RangeSlider } from 'mdui/components/range-slider.js'; ``` Příklad použití: ```html ``` ## Příklady {#examples} ### Výchozí hodnota {#example-value} Pomocí atributu `value` můžete číst nebo nastavit aktuální hodnotu posuvníku rozsahu. Hodnota tohoto atributu je pole a lze ji číst a nastavovat pouze pomocí JavaScript vlastnosti. ```html ``` ### Zakázaný stav {#example-disabled} Atribut `disabled` posuvník rozsahu zakáže. ```html ``` ### Rozsah {#example-min-max} Pomocí atributů `min` a `max` nastavte minimální a maximální hodnotu posuvníku rozsahu. ```html ``` ### Krok {#example-step} Pomocí atributu `step` nastavte krok posuvníku rozsahu. ```html ``` ### Značky stupnice {#example-tickmarks} Přidejte atribut `tickmarks` pro přidání značek stupnice na posuvník rozsahu. ```html ``` ### Skrytí textového popisku {#example-nolabel} Přidejte atribut `nolabel` pro skrytí textového popisku na posuvníku rozsahu. ```html ``` ### Úprava textového popisku {#example-labelFormatter} Pomocí JavaScript vlastnosti `labelFormatter` můžete upravit formát zobrazení textového popisku. Tato vlastnost je funkce, jejíž parametr je aktuální hodnota posuvníku rozsahu a návratová hodnota je text, který chcete zobrazit. ```html ``` ## mdui-range-slider API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
undefined defaultValue false number[] []

Výchozí hodnota. Při resetování formuláře se hodnota obnoví na tuto výchozí hodnotu. Tuto vlastnost lze nastavit pouze pomocí JavaScriptu.
undefined value false number[]

Hodnota posuvníku ve formátu pole, která se odešle spolu s daty formuláře.

Poznámka: Tuto vlastnost nelze nastavit pomocí HTML atributu. Pokud chcete tuto hodnotu změnit, lze tak učinit pouze úpravou JavaScriptové vlastnosti.
autofocus autofocus true boolean false

Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
tabindex tabIndex false number

Pořadí prvku při přepínání fokusu pomocí klávesy Tab.
min min true number 0

Minimální hodnota posuvníku. Výchozí hodnota je 0.
max max true number 100

Maximální hodnota posuvníku. Výchozí hodnota je 100.
step step true number 1

Krok posuvníku. Výchozí hodnota je 1.
tickmarks tickmarks true boolean false

Určuje, zda se mají zobrazit značky stupnice.
nolabel nolabel true boolean false

Určuje, zda se má skrýt textový popisek.
disabled disabled true boolean false

Určuje, zda je prvek zakázaný.
form form true 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>.
name name true string ''

Název posuvníku, který se odešle spolu s daty formuláře.
undefined validity false ValidityState

Objekt s informacemi o stavu validace formuláře; podrobnosti viz ValidityState.
undefined validationMessage false 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.
undefined labelFormatter false (value: number) => string

Funkce pro vlastní formátování zobrazeného popisku. Parametrem funkce je aktuální hodnota posuvníku, návratovou hodnotou je požadovaný text.
### Metody
Název Popis
click(): void

Simuluje kliknutí myší na prvek.
focus(options?: FocusOptions): 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 Popis
focus

Spustí se při získání fokusu.
blur

Spustí se při ztrátě fokusu.
change

Spustí se, když dojde ke změně hodnoty a prvek ztratí fokus.
input

Spustí se při změně hodnoty.
invalid

Spustí se, pokud pole formuláře neprojde validací.
### CSS Parts
Název Popis
track-inactive

Neaktivní část stopy.
track-active

Aktivní část stopy.
handle

Ovládací prvek.
label

Text popisku.
tickmark

Značka stupnice.
# Komponenta Výběr Rozbalovací výběr zobrazuje možnosti v rozbalovací nabídce a usnadňuje rychlý výběr požadované hodnoty. Tato stránka se zabývá především způsobem použití komponenty ``. Podrobnosti o položkách rozbalovací nabídky najdete v [``](/cs/docs/2/components/menu#menu-item-api). ## Způsob použití {#usage} Importujte komponenty podle potřeby: ```js import 'mdui/components/select.js'; import 'mdui/components/menu-item.js'; ``` Importujte TypeScript typy komponent podle potřeby: ```ts import type { Select } from 'mdui/components/select.js'; import type { MenuItem } from 'mdui/components/menu-item.js'; ``` Příklad použití: ```html Položka 1 Položka 2 ``` ## Příklady {#examples} ### Tvar {#example-variant} Pomocí atributu `variant` nastavte tvar rozbalovacího výběru. ```html Položka 1 Položka 2 Položka 1 Položka 2 ``` ### Podpora více výběru {#example-multiple} Ve výchozím nastavení rozbalovací výběr podporuje jen jednu hodnotu. Hodnota `value` komponenty `` je hodnota `value` aktuálně vybrané komponenty [``](/cs/docs/2/components/menu#menu-item-api). Přidáním atributu `multiple` zapnete režim vícenásobného výběru. Hodnota `value` komponenty `` je pak pole hodnot `value` aktuálně vybraných komponent [``](/cs/docs/2/components/menu#menu-item-api). Poznámka: V režimu vícenásobného výběru je hodnota `value` komponenty `` pole a lze ji číst a nastavovat pouze pomocí JavaScript vlastnosti. ```html Položka 1 Položka 2 Položka 3 ``` ### Podpůrný text {#example-helper-text} Pomocí atributu `label` nastavte text štítku nad rozbalovacím výběrem. ```html Položka 1 Položka 2 ``` Pomocí atributu `placeholder` nastavte zástupný text, když není vybrána žádná hodnota. ```html Položka 1 Položka 2 ``` Pomocí atributu `helper` nastavte pomocný text ve spodní části rozbalovacího výběru. Lze také použít slot `helper` k nastavení pomocného textu. ```html Položka 1 Položka 2 Položka 1 Položka 2 Podpůrný text ``` ### Režim pouze pro čtení {#example-readonly} Přidáním atributu `readonly` nastavíte rozbalovací výběr do režimu pouze pro čtení. ```html Položka 1 Položka 2 ``` ### Zakázaný režim {#example-disabled} Přidáním atributu `disabled` zakážete rozbalovací výběr. ```html Položka 1 Položka 2 ``` ### Vymazatelné {#example-clearable} Po přidání atributu `clearable` se na pravé straně rozbalovacího výběru, pokud má hodnotu, zobrazí tlačítko pro vymazání. ```html Položka 1 Položka 2 ``` Lze také přizpůsobit tlačítko pro vymazání pomocí slotu `clear`. ```html Položka 1 Položka 2 ``` ### Umístění rozbalovací nabídky {#example-placement} Pomocí atributu `placement` můžete nastavit umístění rozbalovací nabídky. ```html Položka 1 Položka 2 ``` ### Zarovnání textu vpravo {#example-end-aligned} Přidejte atribut `end-aligned` pro zarovnání textu vpravo. ```html Položka 1 Položka 2 ``` ### Předponový/příponový text a ikona {#example-prefix-suffix} Nastavením atributů `icon` a `end-icon` můžete přidat ikony Material Icons na levou a pravou stranu rozbalovacího výběru. Lze také přidat prvky na levou a pravou stranu rozbalovacího výběru pomocí slotů `icon` a `end-icon`. ```html Položka 1 Položka 2

Položka 1 Položka 2 ``` Nastavením atributů `prefix` a `suffix` můžete přidat text na levou i pravou stranu rozbalovacího výběru. Lze také přidat textové prvky na levou a pravou stranu rozbalovacího výběru pomocí slotů `prefix` a `suffix`. Tyto texty se zobrazí pouze tehdy, když je rozbalovací výběr zaměřený nebo má hodnotu. ```html Položka 1 Položka 2

Položka 1 Položka 2 $ /100 ``` ## mdui-select API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
variant variant true 'filled' | 'outlined' 'filled'

Styl výběru. Možné hodnoty:

  • filled: Výběr s výplní a výraznějším vzhledem.
  • outlined: Výběr s okrajem, méně výrazný vizuální efekt.
multiple multiple true boolean false

Určuje, zda je povolen vícenásobný výběr.
name name true string ''

Název výběru, který se odešle spolu s daty formuláře.
value value false string | string[] ''

Hodnota výběru, která se odešle spolu s daty formuláře.

Pokud není zadán atribut multiple, je tato hodnota řetězec; pokud je zadán atribut multiple, je tato hodnota pole řetězců. HTML atribut lze nastavit pouze na řetězcovou hodnotu; pokud je třeba nastavit hodnotu pole, nastavte ji pomocí JavaScriptové vlastnosti.
undefined defaultValue false string | string[] ''

Výchozí vybraná hodnota. Při resetování formuláře se hodnota obnoví na tuto výchozí hodnotu. Tuto vlastnost lze nastavit pouze pomocí JavaScriptu.
label label true string

Text popisku.
placeholder placeholder true string

Zástupný text.
helper helper true string

Pomocný text pod výběrem. Lze také nastavit pomocí slot="helper".
clearable clearable true boolean false

Určuje, zda lze výběr vyprázdnit.
clear-icon clearIcon true string

Název ikony Material Icons pro tlačítko vymazání zobrazené na pravé straně výběru, pokud je výběr vyprázdnitelný. Lze také nastavit pomocí slot="clear-icon".
placement placement true 'auto' | 'bottom' | 'top' 'auto'

Umístění výběru. Možné hodnoty:

  • auto: Automatické určení polohy.
  • bottom: Umístění dole.
  • top: Umístění nahoře.
end-aligned endAligned true boolean false

Určuje, zda má být text zarovnán doprava.
prefix prefix true string

Text předpony výběru. Zobrazí se pouze v režimu fokusu nebo pokud má výběr hodnotu. Lze také nastavit pomocí slot="prefix".
suffix suffix true string

Text přípony výběru. Zobrazí se pouze v režimu fokusu nebo pokud má výběr hodnotu. Lze také nastavit pomocí slot="suffix".
icon icon true string

Název ikony z knihovny Material Icons pro předponovou ikonu výběru. Lze také nastavit pomocí slot="icon".
end-icon endIcon true string

Název ikony z knihovny Material Icons pro příponovou ikonu výběru. Lze také nastavit pomocí slot="end-icon".
error-icon errorIcon true string

Název ikony Material Icons zobrazené na pravé straně výběru, pokud selže validace pole formuláře. Lze také nastavit pomocí slot="error-icon".
form form true 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>.
readonly readonly true boolean false

Určuje, zda je prvek v režimu pouze pro čtení.
disabled disabled true boolean false

Určuje, zda je prvek zakázaný.
required required true boolean false

Určuje, zda musí být při odesílání formuláře toto pole vyplněno.
undefined validity false ValidityState

Objekt s informacemi o stavu validace formuláře; podrobnosti viz ValidityState.
undefined validationMessage false 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.
autofocus autofocus true boolean false

Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
tabindex tabIndex false number

Pořadí prvku při přepínání fokusu pomocí klávesy Tab.
### Metody
Název Popis
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í.
click(): void

Simuluje kliknutí myší na prvek.
focus(options?: FocusOptions): 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.
### Události
Název Popis
focus

Spustí se při získání fokusu.
blur

Spustí se při ztrátě fokusu.
change

Spustí se při změně vybrané hodnoty.
invalid

Spustí se, pokud pole formuláře neprojde validací.
clear

Spustí se při kliknutí na tlačítko pro vyprázdnění generované atributem clearable. Vyprázdnění výběru lze zabránit voláním event.preventDefault().
### Slots
Název Popis
(výchozí)

Prvky <mdui-menu-item>.
icon

Levá ikona.
end-icon

Pravá ikona.
error-icon

Pravá ikona pro stav selhání validace.
prefix

Levý text.
suffix

Pravý text.
clear-button

Tlačítko pro vyprázdnění.
clear-icon

Ikona v tlačítku pro vyprázdnění.
helper

Pomocný text dole.
### CSS Parts
Název Popis
chips

Kontejner pro umístění chipů odpovídajících vybraným hodnotám při vícenásobném výběru.
chip

Chip odpovídající každé vybrané hodnotě při vícenásobném výběru.
chip__button

Prvek <button> uvnitř chipu.
chip__label

Text uvnitř chipu.
chip__delete-icon

Ikona odstranění uvnitř chipu.
text-field

Textové pole, tj. prvek <mdui-text-field>.
text-field__container

Kontejner textového pole uvnitř textového pole.
text-field__icon

Levá ikona uvnitř textového pole.
text-field__end-icon

Pravá ikona uvnitř textového pole.
text-field__error-icon

Pravá ikona pro stav selhání validace uvnitř textového pole.
text-field__prefix

Levý text uvnitř textového pole.
text-field__suffix

Pravý text uvnitř textového pole.
text-field__label

Text popisku uvnitř textového pole.
text-field__input

Prvek <input> uvnitř textového pole.
text-field__clear-button

Tlačítko pro vyprázdnění uvnitř textového pole.
text-field__clear-icon

Ikona v tlačítku pro vyprázdnění uvnitř textového pole.
text-field__supporting

Kontejner pro pomocné informace dole uvnitř textového pole, zahrnuje helper a error.
text-field__helper

Pomocný text dole uvnitř textového pole.
text-field__error

Popis chyby dole uvnitř textového pole.
menu

Rozbalovací nabídka, tj. prvek <mdui-menu>.
# Komponenta Segmentované tlačítko Segmentované tlačítko seskupuje tlačítka pro výběr možností, přepínání zobrazení nebo řazení prvků. ## Způsob použití {#usage} Importujte komponenty podle potřeby: ```js import 'mdui/components/segmented-button-group.js'; import 'mdui/components/segmented-button.js'; ``` Importujte TypeScript typy komponent podle potřeby: ```ts import type { SegmentedButtonGroup } from 'mdui/components/segmented-button-group.js'; import type { SegmentedButton } from 'mdui/components/segmented-button.js'; ``` Příklad použití: ```html Den Týden Měsíc ``` ## Příklady {#examples} ### Celá šířka {#example-full-width} Přidáním atributu `full-width` na prvek `` zajistíte, že komponenta zabere celou šířku. ```html Den Týden Měsíc ``` ### Režim jednoho výběru {#example-selects-single} Nastavením atributu `selects` na `single` na prvku `` povolíte režim jednoho výběru. Hodnota `value` komponenty `` je pak hodnotou `value` aktuálně vybrané komponenty ``. ```html Den Týden Měsíc Den Týden Měsíc ``` ### Režim více výběru {#example-selects-multiple} Nastavením atributu `selects` na `multiple` na prvku `` povolíte režim vícenásobného výběru. Hodnota `value` komponenty `` je pak pole hodnot `value` aktuálně vybraných komponent ``. Poznámka: V režimu vícenásobného výběru je hodnota `value` komponenty `` pole a lze ji číst a nastavovat pouze pomocí JavaScript vlastnosti. ```html Den Týden Měsíc Den Týden Měsíc ``` ### Ikona {#example-icon} Na prvku `` můžete pomocí atributů `icon` a `end-icon` přidat ikony Material Icons na levou a pravou stranu tlačítka. Kromě toho můžete také přidat prvky na levou a pravou stranu tlačítka pomocí slotů `icon` a `end-icon`. ```html Den Týden Měsíc ``` Na prvku `` můžete přidáním atributu `selected-icon` nastavit ikonu Material Icons vybraného stavu. Můžete ji také nastavit pomocí slotu `selected-icon`. ```html Den Týden ``` ### Odkaz {#example-link} Nastavením atributu `href` na prvku `` změníte tlačítko na odkaz. Pak můžete také použít atributy související s odkazy: `download`, `target`, `rel`. ```html Odkaz Týden Měsíc ``` ### Zakázaný stav a stav načítání {#example-disabled} Přidáním atributu `disabled` na prvek `` zakážete celou skupinu segmentovaných tlačítek. ```html Den Týden Měsíc ``` Přidáním atributu `disabled` na prvek `` zakážete konkrétní tlačítko; přidáním atributu `loading` přidáte stav načítání konkrétního tlačítka. ```html Den Týden Měsíc Rok ``` ## mdui-segmented-button-group API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
full-width fullWidth true boolean false

Určuje, zda má komponenta vyplnit celou šířku rodičovského prvku.
selects selects true 'single' | 'multiple'

Režim výběru segmentovaného tlačítka. Výchozí stav: výběr není povolen. Možné hodnoty:

  • single: Jednotlivý výběr.
  • multiple: Vícenásobný výběr.
disabled disabled true boolean false

Určuje, zda je komponenta zakázaná.
required required true boolean false

Určuje, zda musí být při odesílání formuláře vybrána alespoň jedna položka.
form form true 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>.
name name true string ''

Název při odesílání formuláře, který se odešle spolu s daty formuláře.
value value false string | string[] ''

Hodnota aktuálně vybraného prvku <mdui-segmented-button>.

Poznámka: HTML atribut této vlastnosti je vždy řetězec a počáteční hodnotu lze nastavit pomocí HTML atributu pouze pokud je selects="single". Hodnota JavaScriptové vlastnosti je řetězec, pokud je selects="single", a pole řetězců, pokud je selects="multiple". Proto, pokud je selects="multiple", lze tuto hodnotu změnit pouze úpravou JavaScriptové vlastnosti.
undefined defaultValue false string | string[] ''

Výchozí vybraná hodnota. Při resetování formuláře se hodnota obnoví na tuto výchozí hodnotu. Tuto vlastnost lze nastavit pouze pomocí JavaScriptu.
undefined validity false ValidityState

Objekt s informacemi o stavu validace formuláře; podrobnosti viz ValidityState.
undefined validationMessage false 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 Popis
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 Popis
change

Spustí se při změně vybrané hodnoty.
invalid

Spustí se, pokud pole formuláře neprojde validací.
### Slots
Název Popis
(výchozí)

Komponenty <mdui-segmented-button>.
### CSS Custom Properties
Název Popis
--shape-corner

Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
## mdui-segmented-button API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
icon icon true string

Název ikony z knihovny Material Icons na levé straně. Lze také nastavit pomocí slot="icon".
end-icon endIcon true string

Název ikony z knihovny Material Icons na pravé straně. Lze také nastavit pomocí slot="end-icon".
selected-icon selectedIcon true string

Název ikony z knihovny Material Icons pro vybraný stav. Lze také nastavit pomocí slot="selected-icon".
href href true 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 true string

Soubor ke stažení.

Poznámka: Platí pouze, pokud je nastaven atribut href.
target target true '_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 true '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 true boolean false

Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
tabindex tabIndex false number

Pořadí prvku při přepínání fokusu pomocí klávesy Tab.
disabled disabled true boolean false

Určuje, zda je prvek zakázaný.
loading loading true boolean false

Určuje, zda je prvek ve stavu načítání.
name name true 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 true 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 true '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 true 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 true 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 true '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 true '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 true 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 true '_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".
undefined validity false ValidityState

Objekt s informacemi o stavu validace formuláře; podrobnosti viz ValidityState.
undefined validationMessage false 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 Popis
click(): void

Simuluje kliknutí myší na prvek.
focus(options?: FocusOptions): 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 Popis
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í.
### Slots
Název Popis
(výchozí)

Textový obsah segmentovaného tlačítka.
icon

Levá ikona segmentovaného tlačítka.
selected-icon

Levá ikona pro vybraný stav.
end-icon

Pravá ikona segmentovaného tlačítka.
### CSS Parts
Název Popis
button

Interní prvek <button> nebo <a>.
icon

Ikona na levé straně.
selected-icon

Ikona na levé straně pro vybraný stav.
end-icon

Ikona na pravé straně.
label

Textový obsah.
loading

Prvek <mdui-circular-progress> ve stavu načítání.
# Komponenta Posuvník Posuvník umožňuje vybrat hodnotu z rozsahu tažením jezdce. ## Způsob použití {#usage} Importujte komponentu podle potřeby: ```js import 'mdui/components/slider.js'; ``` Importujte TypeScript typy komponenty podle potřeby: ```ts import type { Slider } from 'mdui/components/slider.js'; ``` Příklad použití: ```html ``` ## Příklady {#examples} ### Výchozí hodnota {#example-value} Pomocí atributu `value` můžete číst nebo nastavit aktuální hodnotu posuvníku. ```html ``` ### Zakázaný stav {#example-disabled} Atribut `disabled` posuvník zakáže. ```html ``` ### Rozsah {#example-min-max} Pomocí atributů `min` a `max` nastavte minimální a maximální hodnotu posuvníku. ```html ``` ### Krok {#example-step} Pomocí atributu `step` můžete nastavit krok posuvníku. ```html ``` ### Značky stupnice {#example-tickmarks} Přidejte atribut `tickmarks` pro zobrazení značek stupnice na posuvníku. ```html ``` ### Skrytí textového popisku {#example-nolabel} Pokud chcete skrýt textový popisek na posuvníku, můžete přidat atribut `nolabel`. ```html ``` ### Úprava textového popisku {#example-labelFormatter} Můžete upravit formát zobrazení textového popisku pomocí JavaScript vlastnosti `labelFormatter`. Hodnota této vlastnosti by měla být funkce, která přijímá aktuální hodnotu posuvníku jako parametr a vrací text, který chcete zobrazit. ```html ``` ## mdui-slider API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
value value false number 0

Hodnota posuvníku, která se odešle spolu s daty formuláře.
undefined defaultValue false number 0

Výchozí hodnota. Při resetování formuláře se hodnota obnoví na tuto výchozí hodnotu. Tuto vlastnost lze nastavit pouze pomocí JavaScriptu.
autofocus autofocus true boolean false

Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
tabindex tabIndex false number

Pořadí prvku při přepínání fokusu pomocí klávesy Tab.
min min true number 0

Minimální hodnota posuvníku. Výchozí hodnota je 0.
max max true number 100

Maximální hodnota posuvníku. Výchozí hodnota je 100.
step step true number 1

Krok posuvníku. Výchozí hodnota je 1.
tickmarks tickmarks true boolean false

Určuje, zda se mají zobrazit značky stupnice.
nolabel nolabel true boolean false

Určuje, zda se má skrýt textový popisek.
disabled disabled true boolean false

Určuje, zda je prvek zakázaný.
form form true 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>.
name name true string ''

Název posuvníku, který se odešle spolu s daty formuláře.
undefined validity false ValidityState

Objekt s informacemi o stavu validace formuláře; podrobnosti viz ValidityState.
undefined validationMessage false 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.
undefined labelFormatter false (value: number) => string

Funkce pro vlastní formátování zobrazeného popisku. Parametrem funkce je aktuální hodnota posuvníku, návratovou hodnotou je požadovaný text.
### Metody
Název Popis
click(): void

Simuluje kliknutí myší na prvek.
focus(options?: FocusOptions): 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 Popis
focus

Spustí se při získání fokusu.
blur

Spustí se při ztrátě fokusu.
change

Spustí se, když dojde ke změně hodnoty a prvek ztratí fokus.
input

Spustí se při změně hodnoty.
invalid

Spustí se, pokud pole formuláře neprojde validací.
### CSS Parts
Název Popis
track-inactive

Neaktivní část stopy.
track-active

Aktivní část stopy.
handle

Ovládací prvek.
label

Text popisku.
tickmark

Značka stupnice.
# Komponenta Snackbar Snackbar slouží ke stručnému zobrazení informací o dění v aplikaci. Kromě přímého použití této komponenty poskytuje mdui také funkci [`mdui.snackbar`](/cs/docs/2/functions/snackbar) pro zjednodušení použití komponenty Snackbar. ## Způsob použití {#usage} Importujte komponentu podle potřeby: ```js import 'mdui/components/snackbar.js'; ``` Importujte TypeScript typy komponenty podle potřeby: ```ts import type { Snackbar } from 'mdui/components/snackbar.js'; ``` Příklad použití: ```html Foto archivováno Otevřít Snackbar ``` ## Příklady {#examples} ### Umístění {#example-placement} Pomocí atributu `placement` můžete nastavit umístění Snackbaru. ```html
Foto archivováno top-start Foto archivováno top Foto archivováno top-end
Foto archivováno bottom-start Foto archivováno bottom Foto archivováno bottom-end
``` ### Akční tlačítko {#example-action} Můžete použít atribut `action` k přidání akčního tlačítka na pravou stranu Snackbaru a určit text tlačítka. Kliknutí na akční tlačítko spustí událost `action-click`. Pokud chcete, aby se akční tlačítko zobrazovalo ve stavu načítání, můžete přidat atribut `action-loading`. ```html Foto archivováno Otevřít Snackbar ``` Lze také přidat vlastní prvek na pravou stranu Snackbaru pomocí slotu `action`. ```html Foto archivováno Zpět Otevřít Snackbar ``` ### Zavíratelné {#example-closeable} Po přidání atributu `closeable` se na pravé straně Snackbaru zobrazí tlačítko zavření. Kliknutím na toto tlačítko se Snackbar zavře a spustí se událost `close`. ```html Foto archivováno Otevřít Snackbar ``` Můžete přizpůsobit prvek tlačítka zavření pomocí slotu `close-button`. ```html Foto archivováno Otevřít Snackbar ``` Nastavením atributu `close-icon` můžete změnit ikonu Material Icons ve výchozím tlačítku zavření. Lze také přizpůsobit prvek ikony v tlačítku zavření pomocí slotu `close-icon`. ```html Foto archivováno Otevřít Snackbar ``` ### Počet řádků textu {#example-message-line} Ve výchozím nastavení není počet řádků zprávy omezen. Počet řádků textu můžete omezit pomocí atributu `message-line`, maximálně na 2 řádky. ```html Položka již má štítek "cestování". Můžete přidat nový štítek. Můžete přidat nový štítek. Otevřít Snackbar ``` ### Zpoždění automatického zavření {#example-auto-close-delay} Pomocí atributu `auto-close-delay` můžete nastavit zpoždění automatického zavření v milisekundách. Výchozí hodnota je 5000 milisekund. ```html Foto archivováno Otevřít Snackbar ``` ### Zavření kliknutím na vnější oblast {#example-close-on-outside-click} Přidáním atributu `close-on-outside-click` můžete nastavit zavření Snackbaru při kliknutí na oblast mimo Snackbar. ```html Foto archivováno Otevřít Snackbar ``` ## mdui-snackbar API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
open open true boolean false

Určuje, zda se má Snackbar zobrazit.
placement placement true 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' 'bottom'

Umístění Snackbaru. Výchozí je bottom. Možné hodnoty:

  • top: Nahoře uprostřed.
  • top-start: Nahoře vlevo.
  • top-end: Nahoře vpravo.
  • bottom: Dole uprostřed.
  • bottom-start: Dole vlevo.
  • bottom-end: Dole vpravo.
action action true string

Text akčního tlačítka. Akční tlačítko lze také nastavit pomocí slot="action".
action-loading actionLoading true boolean false

Určuje, zda je akční tlačítko ve stavu načítání.
closeable closeable true boolean false

Určuje, zda se má na pravé straně zobrazit tlačítko zavření.
close-icon closeIcon true string

Název ikony z knihovny Material Icons pro tlačítko zavření. Lze také nastavit pomocí slot="close-icon".
message-line messageLine true 1 | 2

Maximální počet řádků pro text zprávy. Ve výchozím nastavení není omezen. Možné hodnoty:

  • 1: Maximálně jeden řádek, přesahující text bude zkrácen.
  • 2: Maximálně dva řádky, přesahující text bude zkrácen.
auto-close-delay autoCloseDelay true number 5000

Prodleva automatického zavření (v milisekundách). Nastavením na 0 se automatické zavření vypne. Výchozí hodnota je 5000 ms (5 s).
close-on-outside-click closeOnOutsideClick true boolean false

Určuje, zda se má Snackbar zavřít při kliknutí nebo dotyku mimo oblast Snackbaru.
### Události
Název Popis
open

Spustí se na začátku zobrazování Snackbaru. Zobrazení lze zabránit voláním event.preventDefault().
opened

Spustí se po dokončení animace zobrazení Snackbaru.
close

Spustí se na začátku skrývání Snackbaru. Zavření lze zabránit voláním event.preventDefault().
closed

Spustí se po dokončení animace skrytí Snackbaru.
action-click

Spustí se při kliknutí na akční tlačítko.
### Slots
Název Popis
(výchozí)

Textový obsah zprávy Snackbaru.
action

Akční tlačítko na pravé straně.
close-button

Tlačítko zavření na pravé straně. Pro zobrazení musí být atribut closeable nastaven na true.
close-icon

Ikona v tlačítku zavření.
### CSS Parts
Název Popis
message

Text zprávy.
action

Akční tlačítko.
close-button

Tlačítko zavření.
close-icon

Ikona v tlačítku zavření.
### CSS Custom Properties
Název Popis
--shape-corner

Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
--z-index

Hodnota CSS z-index komponenty.
# Komponenta Spínač Spínač slouží k přepínání jedné možnosti mezi zapnuto a vypnuto a usnadňuje změnu nastavení. ## Způsob použití {#usage} Importujte komponentu podle potřeby: ```js import 'mdui/components/switch.js'; ``` Importujte TypeScript typy komponenty podle potřeby: ```ts import type { Switch } from 'mdui/components/switch.js'; ``` Příklad použití: ```html ``` ## Příklady {#examples} ### Vybraný stav {#example-checked} Když je spínač vybrán, hodnota atributu `checked` je `true`. Lze také přidat atribut `checked`, aby byl spínač ve výchozím stavu vybraný. ```html ``` ### Zakázaný stav {#example-disabled} Přidáním atributu `disabled` můžete zakázat komponentu spínače. ```html ``` ### Ikona {#example-icon} Můžete nastavit ikonu Material Icons pro nevybraný stav pomocí atributu `unchecked-icon` a ikonu pro vybraný stav pomocí atributu `checked-icon`. Lze také přizpůsobit prvky ikon pro nevybraný a vybraný stav pomocí slotů `unchecked-icon` a `checked-icon`. ```html ``` ## mdui-switch API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
disabled disabled true boolean false

Určuje, zda je prvek zakázaný.
checked checked true boolean false

Určuje, zda je prvek zapnutý.
undefined defaultChecked false boolean false

Výchozí zapnutý stav. Při resetování formuláře se stav obnoví na tuto hodnotu. Tuto vlastnost lze nastavit pouze pomocí JavaScriptu.
unchecked-icon uncheckedIcon true string

Název ikony z knihovny Material Icons pro vypnutý stav. Lze také nastavit pomocí slot="unchecked-icon".
checked-icon checkedIcon true string

Název ikony z knihovny Material Icons pro zapnutý stav. Lze také nastavit pomocí slot="checked-icon".

Výchozí je ikona check. Pro odstranění výchozí ikony lze předat prázdný řetězec.
required required true boolean false

Určuje, zda musí být při odesílání formuláře tento spínač zapnutý.
form form true 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>.
name name true string ''

Název spínače, který se odešle spolu s daty formuláře.
value value true string 'on'

Hodnota spínače, která se odešle spolu s daty formuláře.
undefined validity false ValidityState

Objekt s informacemi o stavu validace formuláře; podrobnosti viz ValidityState.
undefined validationMessage false 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.
autofocus autofocus true boolean false

Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
tabindex tabIndex false number

Pořadí prvku při přepínání fokusu pomocí klávesy Tab.
### Metody
Název Popis
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í.
click(): void

Simuluje kliknutí myší na prvek.
focus(options?: FocusOptions): 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.
### Události
Název Popis
focus

Spustí se při získání fokusu.
blur

Spustí se při ztrátě fokusu.
change

Spustí se při změně stavu spínače.
input

Spustí se při změně stavu spínače.
invalid

Spustí se, pokud pole formuláře neprojde validací.
### Slots
Název Popis
unchecked-icon

Prvek pro vypnutý stav.
checked-icon

Prvek pro zapnutý stav.
### CSS Parts
Název Popis
track

Stopa.
thumb

Kontejner ikony.
unchecked-icon

Ikona pro vypnutý stav.
checked-icon

Ikona pro zapnutý stav.
### CSS Custom Properties
Název Popis
--shape-corner

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

Velikost zaoblení rohů kontejneru ikony komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
# Komponenta Záložky Záložky seskupují obsah nebo datové sady a usnadňují rychlé přepínání mezi kategoriemi. ## Způsob použití {#usage} Importujte komponenty podle potřeby: ```js import 'mdui/components/tabs.js'; import 'mdui/components/tab.js'; import 'mdui/components/tab-panel.js'; ``` Importujte TypeScript typy komponent podle potřeby: ```ts import type { Tabs } from 'mdui/components/tabs.js'; import type { Tab } from 'mdui/components/tab.js'; import type { TabPanel } from 'mdui/components/tab-panel.js'; ``` Příklad použití: ```html Záložka 1 Záložka 2 Záložka 3 Panel 1 Panel 2 Panel 3 ``` ## Příklady {#examples} ### Styl záložek {#example-variant} Pomocí atributu `variant` na komponentě `` můžete nastavit styl záložek. ```html Záložka 1 Záložka 2 Záložka 3 Panel 1 Panel 2 Panel 3 Záložka 1 Záložka 2 Záložka 3 Panel 1 Panel 2 Panel 3 ``` ### Umístění záložek {#example-placement} Pomocí atributu `placement` na komponentě `` můžete nastavit umístění záložek. ```html top-start top top-end bottom-start bottom bottom-end left-start left left-end right-start right right-end Záložka 1 Záložka 2 Záložka 3 Panel 1 Panel 2 Panel 3 ``` ### Celá šířka {#example-full-width} Přidáním atributu `full-width` na komponentu `` zajistíte, že záložky zaberou celou šířku a jednotlivé záložky si rovnoměrně rozdělí šířku. ```html Záložka 1 Záložka 2 Záložka 3 Panel 1 Panel 2 Panel 3 ``` ### Ikona {#example-icon} Nastavením atributu `icon` na komponentě `` můžete přidat ikonu Material Icons na záložku. Lze také přidat prvek ikony pomocí slotu `icon`. Přidáním atributu `inline` můžete ikonu a text uspořádat vodorovně. ```html Záložka 1 Záložka 2 Záložka 3 Panel 1 Panel 2 Panel 3 ``` ### Odznak {#example-badge} V komponentě `` můžete přidat odznak pomocí slotu `badge`. ```html Záložka 1 99+ Záložka 2 Záložka 3 Panel 1 Panel 2 Panel 3 ``` ### Vlastní obsah {#example-custom} Použitím slotu `custom` v komponentě `` můžete zcela přizpůsobit obsah záložky. ```html Záložka 1 Ikona Záložka 2 Záložka 3 Panel 1 Panel 2 Panel 3 ``` ## mdui-tab-panel API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
value value true string

Hodnota panelu záložky.
### Slots
Název Popis
(výchozí)

Obsah panelu záložky.
## mdui-tab API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
value value true string

Hodnota položky záložky.
icon icon true string

Název ikony z knihovny Material Icons. Lze také nastavit pomocí slot="icon".
inline inline true boolean false

Určuje, zda se má ikona a text umístit vodorovně vedle sebe.
autofocus autofocus true boolean false

Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
tabindex tabIndex false number

Pořadí prvku při přepínání fokusu pomocí klávesy Tab.
### Metody
Název Popis
click(): void

Simuluje kliknutí myší na prvek.
focus(options?: FocusOptions): 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.
### Události
Název Popis
focus

Spustí se při získání fokusu.
blur

Spustí se při ztrátě fokusu.
### Slots
Název Popis
(výchozí)

Textový obsah položky záložky.
icon

Ikona v položce záložky.
badge

Odznak.
custom

Vlastní obsah celé položky záložky.
### CSS Parts
Název Popis
container

Kontejner položky záložky.
icon

Ikona v položce záložky.
label

Text položky záložky.
## mdui-tabs API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
variant variant true 'primary' | 'secondary' 'primary'

Varianta záložek. Možné hodnoty:

  • primary: Vhodné pro umístění pod <mdui-top-app-bar> pro přepínání hlavních stránek aplikace.
  • secondary: Vhodné pro umístění na stránce pro přepínání skupiny souvisejícího obsahu.
value value true string

Hodnota aktuálně aktivního prvku <mdui-tab>.
placement placement true 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'top-start'

Umístění záložek. Výchozí je top-start. Možné hodnoty:

  • top-start: Nahoře vlevo.
  • top: Nahoře uprostřed.
  • top-end: Nahoře vpravo.
  • bottom-start: Dole vlevo.
  • bottom: Dole uprostřed.
  • bottom-end: Dole vpravo.
  • left-start: Vlevo nahoře.
  • left: Vlevo uprostřed.
  • left-end: Vlevo dole.
  • right-start: Vpravo nahoře.
  • right: Vpravo uprostřed.
  • right-end: Vpravo dole.
full-width fullWidth true boolean false

Určuje, zda má komponenta vyplnit celou šířku rodičovského prvku.
### Události
Název Popis
change

Spustí se při změně vybrané hodnoty.
### Slots
Název Popis
(výchozí)

Prvky <mdui-tab>.
panel

Prvky <mdui-tab-panel>.
### CSS Parts
Název Popis
container

Kontejner pro prvky <mdui-tab>.
indicator

Indikátor aktivního stavu.
# Komponenta Textové pole Textové pole slouží k zadávání textu na stránce, obvykle ve formulářích a dialozích. ## Způsob použití {#usage} Importujte komponentu podle potřeby: ```js import 'mdui/components/text-field.js'; ``` Importujte TypeScript typy komponenty podle potřeby: ```ts import type { TextField } from 'mdui/components/text-field.js'; ``` Příklad použití: ```html ``` ## Příklady {#examples} ### Tvar {#example-variant} Pomocí atributu `variant` nastavte tvar textového pole. ```html

``` ### Podpůrný text {#example-helper-text} Pomocí atributu `label` nastavte text štítku nad textovým polem. ```html ``` Pomocí atributu `placeholder` nastavte zástupný text, když není vybrána žádná hodnota. ```html ``` Pomocí atributu `helper` nastavte pomocný text ve spodní části textového pole. Lze také použít slot `helper` k nastavení pomocného textu. Přidejte atribut `helper-on-focus`, aby se pomocný text zobrazoval pouze tehdy, když je vstupní pole aktivní. ```html Podpůrný text ``` ### Vymazatelné {#example-clearable} Po přidání atributu `clearable` se na pravé straně textového pole, když má hodnotu, zobrazí tlačítko pro vymazání. ```html ``` ### Zarovnání textu vpravo {#example-end-aligned} Přidejte atribut `end-aligned` pro zarovnání textu vpravo. ```html ``` ### Předponový/příponový text a ikona {#example-prefix-suffix} Nastavením atributů `icon` a `end-icon` můžete přidat ikony Material Icons na levou a pravou stranu textového pole. Lze také přidat prvky na levou a pravou stranu textového pole pomocí slotů `icon` a `end-icon`. ```html

``` Nastavením atributů `prefix` a `suffix` můžete přidat text na levou a pravou stranu textového pole. Lze také přidat textové prvky na levou a pravou stranu textového pole pomocí slotů `prefix` a `suffix`. Tyto texty se zobrazí pouze tehdy, když je textové pole zaměřeno nebo má hodnotu. ```html

$ /100 ``` ### Režim pouze pro čtení {#example-readonly} Přidáním atributu `readonly` nastavíte textové pole do režimu jen pro čtení. ```html ``` ### Zakázaný stav {#example-disabled} Přidáním atributu `disabled` zakážete textové pole. ```html ``` ### Víceřádkové textové pole {#example-rows} Pomocí atributu `rows` můžete nastavit počet řádků víceřádkového textového pole. ```html ``` Lze také přidat atribut `autosize`, aby se výška textového pole automaticky přizpůsobovala délce vstupního obsahu. Pomocí atributů `min-rows` a `max-rows` můžete určit minimální a maximální počet řádků při automatickém přizpůsobování výšky. ```html

``` ### Počítadlo znaků {#example-counter} Když je maximální počet znaků nastaven atributem `maxlength`, můžete přidat atribut `counter` pro zobrazení počítadla znaků pod textovým polem. ```html ``` ### Heslové pole {#example-password} Když je `type="password"`, přidáním atributu `toggle-password` přidáte na pravou stranu textového pole tlačítko pro přepínání viditelnosti hesla. ```html ``` ## mdui-text-field API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
variant variant true 'filled' | 'outlined' 'filled'

Styl textového pole. Výchozí je filled. Možné hodnoty:

  • filled: Textové pole s barvou pozadí, výraznější vizuální efekt.
  • outlined: Textové pole s okrajem, méně výrazný vizuální efekt.
type type true 'text' | 'number' | 'password' | 'url' | 'email' | 'search' | 'tel' | 'hidden' | 'date' | 'datetime-local' | 'month' | 'time' | 'week' 'text'

Typ vstupu textového pole. Výchozí je text. Možné hodnoty:

  • text: Výchozí hodnota. Textové pole.
  • number: Lze zadávat pouze čísla. Na zařízeních s virtuální klávesnicí se zobrazí numerická klávesnice.
  • password: Pro zadávání hesel, hodnota je maskována.
  • url: Pro zadávání URL, kontroluje se formát URL. Na zařízeních s podporou virtuální klávesnice má odpovídající klávesnici.
  • email: Pro zadávání e-mailových adres, kontroluje se formát e-mailu. Na zařízeních s podporou virtuální klávesnice má odpovídající klávesnici.
  • search: Pro vyhledávací pole. Na zařízeních s virtuální klávesnicí se ikona Enter změní na ikonu vyhledávání.
  • tel: Pro zadávání telefonních čísel. Na zařízeních s virtuální klávesnicí se zobrazí telefonní numerická klávesnice.
  • hidden: Skryje ovládací prvek, ale jeho hodnota se stále odešle na server.
  • date: Ovládací prvek pro zadání data (rok, měsíc, den, bez času). V podporovaných prohlížečích po aktivaci otevře výběr data nebo numerický rolovací seznam.
  • datetime-local: Ovládací prvek pro zadání data a času, bez časového pásma. V podporovaných prohlížečích po aktivaci otevře výběr data nebo numerický rolovací seznam.
  • month: Ovládací prvek pro zadání roku a měsíce, bez časového pásma.
  • time: Ovládací prvek pro zadání času, bez časového pásma.
  • week: Ovládací prvek pro zadání data tvořeného rokem a číslem týdne, bez časového pásma.
name name true string ''

Název textového pole, který se odešle spolu s daty formuláře.
value value false string ''

Hodnota textového pole, která se odešle spolu s daty formuláře.
undefined defaultValue false string ''

Výchozí hodnota. Při resetování formuláře se hodnota obnoví na tuto výchozí hodnotu. Tuto vlastnost lze nastavit pouze pomocí JavaScriptu.
label label true string

Text popisku.
placeholder placeholder true string

Zástupný text.
helper helper true string

Pomocný text pod textovým polem. Lze také nastavit pomocí slot="helper".
helper-on-focus helperOnFocus true boolean false

Určuje, zda se má pomocný text dole zobrazovat pouze při získání fokusu.
clearable clearable true boolean false

Určuje, zda lze obsah textového pole vyprázdnit.
clear-icon clearIcon true string

Název ikony Material Icons pro tlačítko vymazání zobrazené na pravé straně, pokud je textové pole vyprázdnitelné. Lze také nastavit pomocí slot="clear-icon".
end-aligned endAligned true boolean false

Určuje, zda má být text zarovnán doprava.
prefix prefix true string

Text předpony textového pole. Zobrazí se pouze v režimu fokusu nebo pokud má textové pole hodnotu. Lze také nastavit pomocí slot="prefix".
suffix suffix true string

Text přípony textového pole. Zobrazí se pouze v režimu fokusu nebo pokud má textové pole hodnotu. Lze také nastavit pomocí slot="suffix".
icon icon true string

Název ikony z knihovny Material Icons pro předponovou ikonu textového pole. Lze také nastavit pomocí slot="icon".
end-icon endIcon true string

Název ikony z knihovny Material Icons pro příponovou ikonu textového pole. Lze také nastavit pomocí slot="end-icon".
error-icon errorIcon true string

Název ikony z knihovny Material Icons zobrazené na pravé straně textového pole, pokud selže validace pole formuláře. Lze také nastavit pomocí slot="error-icon".
form form true 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>.
readonly readonly true boolean false

Určuje, zda je prvek v režimu pouze pro čtení.
disabled disabled true boolean false

Určuje, zda je vstupní pole zakázané.
required required true boolean false

Určuje, zda musí být při odesílání formuláře toto pole vyplněno.
rows rows true number

Pevný počet zobrazených řádků textového pole.
autosize autosize true boolean false

Určuje, zda se má výška textového pole automaticky přizpůsobovat obsahu.
min-rows minRows true number

Minimální počet řádků textového pole, pokud je autosize nastaven na true.
max-rows maxRows true number

Maximální počet řádků textového pole, pokud je autosize nastaven na true.
minlength minlength true number

Minimální počet znaků, které lze zadat.
maxlength maxlength true number

Maximální počet znaků, které lze zadat.
counter counter true boolean false

Určuje, zda se má zobrazovat počítadlo znaků. Platí pouze pokud je zadán maxlength.
min min true number

Pokud je type nastaven na number, minimální hodnota, kterou lze zadat.
max max true number

Pokud je type nastaven na number, maximální hodnota, kterou lze zadat.
step step true number

Pokud je type nastaven na number, krok pro zvyšování a snižování hodnoty.
pattern pattern true string

Regulární výraz pro validaci formuláře.
toggle-password togglePassword true boolean false

Pokud je type nastaven na password, tento atribut přidá tlačítko pro přepínání zobrazení hesla.
show-password-icon showPasswordIcon true string

Ikona Material Icons pro tlačítko přepínání hesla, která se zobrazí, když je heslo v prostém textu. Lze také nastavit pomocí slot="show-password-icon".
hide-password-icon hidePasswordIcon true string

Ikona Material Icons pro tlačítko přepínání hesla, která se zobrazí, když je heslo skryté. Lze také nastavit pomocí slot="hide-password-icon".
autocapitalize autocapitalize true 'none' | 'sentences' | 'words' | 'characters'

Nestandardní atribut pro iOS, který řídí automatické psaní velkých písmen. Platný na iOS verze 5 a novější. Možné hodnoty:

  • none: Zakáže automatické psaní velkých písmen.
  • sentences: První písmeno vět bude velké.
  • words: První písmeno slov bude velké.
  • characters: Všechna písmena budou velká.
autocorrect autocorrect true string

Atribut autocorrect prvku input.
autocomplete autocomplete true string

Atribut autocomplete prvku input.
enterkeyhint enterkeyhint true 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'

Atribut enterkeyhint prvku input, který slouží k přizpůsobení zobrazeného textu nebo ikony na klávese Enter na virtuální klávesnici. Konkrétní zobrazení závisí na použitém zařízení a jazyce. Možné hodnoty:

  • enter: Vloží nový řádek.
  • done: Dokončí zadávání, zavře virtuální klávesnici.
  • go: Přejde na cíl zadaného textu.
  • next: Přesune se na další vstupní pole.
  • previous: Přesune se na předchozí vstupní pole.
  • search: Přejde na výsledky vyhledávání.
  • send: Odešle textovou zprávu.
spellcheck spellcheck true boolean false

Určuje, zda je povolena kontrola pravopisu.
inputmode inputmode true 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'

Atribut inputmode prvku input, který slouží k přizpůsobení typu virtuální klávesnice. Možné hodnoty:

  • none: Žádná virtuální klávesnice. Užitečné, když je třeba implementovat vlastní ovládací prvek pro zadávání.
  • text: Standardní klávesnice pro zadávání textu.
  • decimal: Klávesnice pro zadávání desetinných čísel, kromě číslic může obsahovat desetinnou tečku . nebo čárku pro oddělení tisíců ,.
  • numeric: Zobrazí numerickou klávesnici 0-9.
  • tel: Telefonní numerická klávesnice, obsahuje číslice 0-9, hvězdičku * nebo hash #.
  • search: Virtuální klávesnice optimalizovaná pro zadávání vyhledávání, tlačítko pro odeslání obvykle zobrazí search nebo „Hledat“.
  • email: Virtuální klávesnice optimalizovaná pro zadávání e-mailových adres, obvykle obsahuje klávesy jako @ ..
  • url: Virtuální klávesnice optimalizovaná pro zadávání URL, obvykle obsahuje klávesy jako . / #.
undefined validity false ValidityState

Objekt s informacemi o stavu validace formuláře; podrobnosti viz ValidityState.
undefined validationMessage false 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.
undefined valueAsNumber false number

Získá aktuální hodnotu převedenou na typ number; nebo nastaví hodnotu typu number. Pokud hodnotu nelze převést na typ number, vrátí NaN.
autofocus autofocus true boolean false

Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.
tabindex tabIndex false number

Pořadí prvku při přepínání fokusu pomocí klávesy Tab.
### Metody
Název Popis
select(): void

Vybere text v textovém poli.
setSelectionRange(start: number, end: number, direction: 'forward' | 'backward' | 'none'): void

Vybere určitý rozsah obsahu v textovém poli.
setRangeText(replacement: string, start: number, end: number, selectMode: 'select' | 'start' | 'end' | 'preserve'): void

Nahradí text v určitém rozsahu v textovém poli novým textem.
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í.
click(): void

Simuluje kliknutí myší na prvek.
focus(options?: FocusOptions): 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.
### Události
Název Popis
focus

Spustí se při získání fokusu.
blur

Spustí se při ztrátě fokusu.
change

Spustí se, když dojde ke změně hodnoty v textovém poli a prvek ztratí fokus.
input

Spustí se při změně hodnoty v textovém poli.
invalid

Spustí se, pokud pole formuláře neprojde validací.
clear

Spustí se při kliknutí na tlačítko pro vyprázdnění generované atributem clearable. Vyprázdnění textového pole lze zabránit voláním event.preventDefault().
### Slots
Název Popis
icon

Levá ikona.
end-icon

Pravá ikona.
error-icon

Pravá ikona pro stav selhání validace.
prefix

Levý text.
suffix

Pravý text.
clear-button

Tlačítko pro vyprázdnění.
clear-icon

Ikona v tlačítku pro vyprázdnění.
toggle-password-button

Tlačítko pro přepínání stavu zobrazení hesla.
show-password-icon

Ikona v tlačítku pro přepínání stavu zobrazení hesla, když je heslo zobrazeno.
hide-password-icon

Ikona v tlačítku pro přepínání stavu zobrazení hesla, když je heslo skryto.
helper

Pomocný text dole.
### CSS Parts
Název Popis
container

Kontejner textového pole.
icon

Levá ikona.
end-icon

Pravá ikona.
error-icon

Pravá ikona pro stav selhání validace.
prefix

Levý text.
suffix

Pravý text.
label

Text popisku nahoře.
input

Interní prvek <input> nebo <textarea>.
clear-button

Tlačítko pro vyprázdnění.
clear-icon

Ikona v tlačítku pro vyprázdnění.
toggle-password-button

Tlačítko pro přepínání stavu zobrazení hesla.
show-password-icon

Ikona v tlačítku pro přepínání stavu zobrazení hesla, když je heslo zobrazeno.
hide-password-icon

Ikona v tlačítku pro přepínání stavu zobrazení hesla, když je heslo skryto.
supporting

Kontejner pro pomocné informace dole, zahrnuje helper, error a counter.
helper

Pomocný text dole.
error

Popis chyby dole.
counter

Počítadlo znaků vpravo dole.
# Komponenta Tooltip Tooltip poskytuje krátké textové nápovědy nebo kontextové informace ke konkrétnímu prvku, aby uživatel lépe pochopil jeho funkci nebo účel. ## Způsob použití {#usage} Importujte komponentu podle potřeby: ```js import 'mdui/components/tooltip.js'; ``` Importujte TypeScript typy komponenty podle potřeby: ```ts import type { Tooltip } from 'mdui/components/tooltip.js'; ``` Příklad použití: ```html tlačítko ``` ## Příklady {#examples} ### Tooltip s prostým textem {#example-plain} Ve výchozím nastavení je tooltip prostý. Obsah tooltipu můžete nastavit pomocí atributu `content`. ```html tlačítko ``` Obsah tooltipu můžete také nastavit pomocí slotu `content`. ```html tlačítko
název
obsah
 ``` ### Tooltip s bohatým obsahem {#example-rich} Nastavením atributu `variant` na `rich` vytvoříte tooltip s bohatým obsahem. Pomocí atributu `headline` můžete nastavit název tooltipu a atributem `content` nastavit obsah tooltipu. ```html tlačítko ``` Lze také nastavit název a obsah tooltipu pomocí slotů `headline` a `content`. Pomocí slotu `action` nastavte akční tlačítko tooltipu. ```html tlačítko
Bohatý tooltip
Bohaté tooltipy upozorňují na určitý prvek nebo funkci, která si zaslouží pozornost uživatele. Podporují víceřádkový informační text.
Akce ``` ### Umístění {#example-placement} Pomocí atributu `placement` můžete nastavit umístění tooltipu. ```html
``` ### Způsob spuštění {#example-trigger} Pomocí atributu `trigger` můžete nastavit způsob spuštění tooltipu. ```html tlačítko ``` ### Zpoždění otevření/zavření {#example-delay} Když je způsob spuštění `hover`, můžete pomocí atributů `open-delay` a `close-delay` nastavit zpoždění otevření a zavření tooltipu v milisekundách. ```html tlačítko ``` ### Zakázaný stav {#example-disabled} Přidáním atributu `disabled` můžete zakázat tooltip. ```html tlačítko ``` ## mdui-tooltip API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
variant variant true 'plain' | 'rich' 'plain'

Varianta tooltipu. Výchozí je plain. Možné hodnoty:

  • plain: Pouze text, vhodné pro jednoduchý jednořádkový text.
  • rich: Formátovaný text, může obsahovat nadpis, tělo a akční tlačítka.
placement placement true 'auto' | 'top-left' | 'top-start' | 'top' | 'top-end' | 'top-right' | 'bottom-left' | 'bottom-start' | 'bottom' | 'bottom-end' | 'bottom-right' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'auto'

Umístění tooltipu. Výchozí je auto. Možné hodnoty:

  • auto: Automatické určení polohy. Pokud je variant="plain", preferuje se top; pokud je variant="rich", preferuje se bottom-right.
  • top-left: Vlevo nahoře.
  • top-start: Nahoře vlevo.
  • top: Nahoře uprostřed.
  • top-end: Nahoře vpravo.
  • top-right: Vpravo nahoře.
  • bottom-left: Vlevo dole.
  • bottom-start: Dole vlevo.
  • bottom: Dole uprostřed.
  • bottom-end: Dole vpravo.
  • bottom-right: Vpravo dole.
  • left-start: Vlevo nahoře.
  • left: Vlevo uprostřed.
  • left-end: Vlevo dole.
  • right-start: Vpravo nahoře.
  • right: Vpravo uprostřed.
  • right-end: Vpravo dole.
open-delay openDelay true number 150

Zpoždění (v ms) před otevřením při najetí myší.
close-delay closeDelay true number 150

Zpoždění (v ms) před zavřením při najetí myší.
headline headline true string

Nadpis tooltipu. Lze použít pouze pokud je variant="rich". Lze také nastavit pomocí slot="headline".
content content true string

Obsah tooltipu. Lze také nastavit pomocí slot="content".
trigger trigger true 'click' | 'hover' | 'focus' | 'manual' | string 'hover focus'

Způsob spuštění. Lze zadat více hodnot oddělených mezerami. Možné hodnoty:

  • click: Spuštění kliknutím.
  • hover: Spuštění najetím myší.
  • focus: Spuštění získáním fokusu.
  • manual: Tooltip lze otevřít a zavřít pouze programově. Nelze kombinovat s jiným způsobem spuštění.
disabled disabled true boolean false

Určuje, zda je tooltip zakázaný.
open open true boolean false

Určuje, zda je tooltip zobrazen.
### Události
Název Popis
open

Spustí se na začátku zobrazování tooltipu. Otevření lze zabránit voláním event.preventDefault().
opened

Spustí se po dokončení animace zobrazení tooltipu.
close

Spustí se na začátku skrývání tooltipu. Zavření lze zabránit voláním event.preventDefault().
closed

Spustí se po dokončení animace skrytí tooltipu.
### Slots
Název Popis
(výchozí)

Cílový prvek, který tooltip spouští. Jako cílový prvek se použije pouze první prvek ve výchozím slotu.
headline

Nadpis tooltipu. Tento slot je platný pouze pokud je variant="rich".
content

Obsah tooltipu, může obsahovat HTML. Pokud obsahuje pouze prostý text, lze místo toho použít atribut content.
action

Tlačítka akcí v dolní části tooltipu. Tento slot je platný pouze pokud je variant="rich".
### CSS Parts
Název Popis
popup

Kontejner tooltipu.
headline

Nadpis.
content

Tělo.
action

Tlačítka akcí.
### CSS Custom Properties
Název Popis
--shape-corner-plain

Velikost zaoblení rohů komponenty, pokud je variant="plain". Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
--shape-corner-rich

Velikost zaoblení rohů komponenty, pokud je variant="rich". Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
--z-index

Hodnota CSS z-index komponenty.
# Komponenta Horní aplikační lišta Horní aplikační lišta zobrazuje klíčové informace a související akce nahoře na stránce, aby byly navigace i funkce po ruce. ## Způsob použití {#usage} Importujte komponenty podle potřeby: ```js import 'mdui/components/top-app-bar.js'; import 'mdui/components/top-app-bar-title.js'; ``` Importujte TypeScript typy komponent podle potřeby: ```ts import type { TopAppBar } from 'mdui/components/top-app-bar.js'; import type { TopAppBarTitle } from 'mdui/components/top-app-bar-title.js'; ``` Příklad použití: (`style="position: relative"` v příkladu je jen pro ukázku, při skutečném použití tento styl odstraňte.) ```html Název
``` **Upozornění:** Ve výchozím nastavení používá `position: fixed` a automaticky přidá `padding-top` na `body`, aby nedošlo k zakrytí obsahu stránky touto komponentou. V těchto dvou případech se však používá `position: absolute`: 1. Když je zadán atribut `scroll-target`. Pak se `padding-top` přidá na prvek `scroll-target`. 2. Když se komponenta nachází uvnitř [``](/cs/docs/2/components/layout). Pak se `padding-top` nepřidává. ## Příklady {#examples} ### Umístění v určeném kontejneru {#example-scroll-target} Ve výchozím nastavení se horní aplikační lišta zobrazuje nahoře na stránce. Pokud chcete umístit horní aplikační lištu do určeného kontejneru, můžete na komponentě `` zadat atribut `scroll-target`, jehož hodnotou je CSS selektor nebo DOM prvek kontejneru s rolovatelným obsahem. Pak se horní aplikační lišta zobrazí relativně k nadřazenému prvku (styl `position: relative; overflow: hidden` je nutné na nadřazený prvek přidat ručně). ```html
Název
``` ### Tvar {#example-variant} Pomocí atributu `variant` na komponentě `` můžete nastavit tvar horní aplikační lišty. ```html
Název
center-aligned small medium large
``` ### Chování při rolování stránky {#example-scroll-behavior} Nastavením atributu `scroll-behavior` na komponentě `` můžete definovat chování horní aplikační lišty při rolování stránky. Můžete nastavit více chování najednou, oddělených mezerami. Možnosti chování při rolování zahrnují: - `hide`: Skryje horní aplikační lištu při rolování stránky dolů a zobrazí ji při rolování nahoru. - `shrink`: Platí pouze když je atribut `variant` nastaven na `medium` nebo `large`. Při rolování stránky dolů se horní aplikační lišta roztáhne, při rolování nahoru se smrští. - `elevate`: Při rolování stránky dolů přidá na horní aplikační lištu stín; při rolování zpět na začátek stín odstraní. Pomocí atributu `scroll-threshold` můžete nastavit, po kolika pixelech rolování se mají spustit chování horní aplikační lišty při rolování. (Upozorňujeme, že pro včasnou odezvu byste při použití chování `elevate` neměli nastavovat atribut `scroll-threshold`.) **Příklad: Skrytí při rolování** ```html
Název
``` **Příklad: Přidání stínu při rolování** ```html
Název
``` **Příklad: Smrštění při rolování** ```html
Název
``` **Příklad: Smrštění a přidání stínu při rolování** ```html
Název
``` ### Text v rozbaleném stavu {#label-large} U horní aplikační lišty s atributem `variant` nastaveným na `medium` nebo `large` a atributem `scroll-behavior` nastaveným na `shrink` můžete do komponenty `` přidat slot `label-large` pro nastavení textu v rozbaleném stavu. ```html
Toto je název ve sbaleném stavu Toto je název v rozbaleném stavu
``` ## mdui-top-app-bar-title API ### Slots
Název Popis
(výchozí)

Text nadpisu horní aplikační lišty.
label-large

Text nadpisu v rozbaleném stavu.
### CSS Parts
Název Popis
label

Text nadpisu.
label-large

Text nadpisu v rozbaleném stavu.
## mdui-top-app-bar API ### Vlastnosti
Atribut Vlastnost Reflect Typ Výchozí Popis
variant variant true 'center-aligned' | 'small' | 'medium' | 'large' 'small'

Varianta horní aplikační lišty. Výchozí je small. Možné hodnoty:

  • center-aligned: Malá aplikační lišta, nadpis na střed.
  • small: Malá aplikační lišta.
  • medium: Střední aplikační lišta.
  • large: Velká aplikační lišta.
hide hide true boolean false

Určuje, zda je lišta skrytá.
shrink shrink true boolean false

Určuje, zda se má lišta zmenšit na styl variant="small". Platí pouze pokud je variant="medium" nebo variant="large".
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Chování při posouvání. Lze použít více hodnot oddělených mezerami. Možné hodnoty:

  • hide: Při posouvání se lišta skryje.
  • shrink: Lze použít u střední a velké aplikační lišty, při posouvání se zmenší na styl malé lišty.
  • elevate: Při posouvání se přidá stín.
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Prvek, na kterém se sledují události posouvání. Hodnotou může být CSS selektor, DOM element nebo jQuery objekt. Výchozí hodnotou je window (okno).
scroll-threshold scrollThreshold true number

Vzdálenost v pixelech, o kterou musí být obsah posunut, aby se chování aktivovalo.
order order true number

Pořadí této komponenty v rámci rozvržení <mdui-layout>. Řadí se vzestupně (nižší hodnoty mají přednost). Výchozí hodnota je 0.
### Události
Název Popis
show

Spustí se na začátku zobrazování. Zobrazení lze zabránit voláním event.preventDefault().
shown

Spustí se po dokončení animace zobrazení.
hide

Spustí se na začátku skrývání. Skrytí lze zabránit voláním event.preventDefault().
hidden

Spustí se po dokončení animace skrytí.
### Slots
Název Popis
(výchozí)

Prvky uvnitř horní aplikační lišty.
### CSS Custom Properties
Název Popis
--shape-corner

Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.
--z-index

Hodnota CSS z-index komponenty.
# Knihovna jq mdui obsahuje lehkou JavaScriptovou knihovnu nástrojů, která poskytuje API a řetězové volání podobné jQuery, ale její velikost je pouze jedna šestina velikosti jQuery. Tuto funkci nástroje můžete importovat podle potřeby: ```js import { $ } from 'mdui/jq.js'; ``` ## Jádro {#api-core} ### `$()` {#dollar} Tato funkce má několik použití: Zadejte CSS selektor jako parametr a vraťte JQ objekt obsahující odpovídající prvky. ```js $('.box'); ``` Zadejte DOM prvek, libovolné pole, NodeList nebo JQ objekt a vraťte JQ objekt obsahující zadané prvky. ```js $(document); ``` Zadejte HTML řetězec a vraťte JQ objekt obsahující DOM vytvořený podle HTML. ```js $(`
`); ``` Zadejte funkci, která se zavolá po načtení DOM. ```js $(function () { console.log('DOM načten'); }); ``` ## Rozšíření {#api-extend} ### `$.extend()` {#d-extend} Pokud je zadán pouze jeden objekt, vlastnosti tohoto objektu se sloučí do objektu `$`, což je ekvivalentní přidání nových funkcí do jmenného prostoru `$`. ```js $.extend({ customFunc: function () {}, }); // Poté lze vlastní metodu volat takto $.customFunc(); ``` Pokud jsou zadány dva nebo více objektů, vlastnosti všech objektů se přidají do prvního objektu a vrátí se sloučený objekt. Vlastnosti s hodnotou `undefined` se neslučují. ```js const object = $.extend({ key1: val1 }, { key2: val2 }, { key3: val3 }); // První objekt a návratová hodnota jsou nyní { key1: val1, key2: val2, key3: val3 } ``` ### `$.fn.extend()` {#fn-extend} Rozšiřuje metody na prototypu `$`. ```js $.fn.extend({ customFunc: function () {}, }); // Poté lze rozšířenou metodu použít takto $(document).customFunc(); ``` ## URL {#api-url} ### `$.param()` {#d-param} Serializuje pole nebo objekt na řetězec dotazu URL. ```js $.param({ width: 1680, height: 1050 }); // width=1680&height=1050 $.param({ foo: { one: 1, two: 2 } }); // foo[one]=1&foo[two]=2 $.param({ ids: [1, 2, 3] }); // ids[]=1&ids[]=2&ids[]=3 ``` Pokud je předané pole, musí jeho formát odpovídat formátu vrácenému funkcí [`.serializeArray()`](#serializeArray). ```js $.param([ { name: 'name', value: 'mdui' }, { name: 'password', value: '123456' }, ]); // name=mdui&password=123456 ``` ## Operace s poli a objekty {#api-array} ### `$.each()` {#d-each} Iteruje přes pole nebo objekt. Vrací první parametr, tj. iterované pole nebo objekt. Prvním parametrem callback funkce je index pole nebo klíč objektu, druhým parametrem je hodnota pole nebo objektu na odpovídající pozici. V callback funkci `this` odkazuje na hodnotu pole nebo objektu na odpovídající pozici. Pokud callback funkce vrátí `false`, iterace se zastaví. ```js // Iterace přes pole $.each(['a', 'b', 'c'], function (index, value) { console.log(index + ':' + value); }); // Výsledek: // 0:a // 1:b // 2:c ``` ```js // Iterace přes objekt $.each({ name: 'mdui', lang: 'zh' }, function (key, value) { console.log(key + ':' + value); }); // Výsledek // name:mdui // lang:zh ``` ### `$.merge()` {#d-merge} Připojí prvky druhého pole k prvnímu poli a vrátí sloučené pole. ```js const first = ['a', 'b', 'c']; const second = ['c', 'd', 'e']; const result = $.merge(first, second); console.log(first); // ['a', 'b', 'c', 'c', 'd', 'e'] console.log(result); // ['a', 'b', 'c', 'c', 'd', 'e'] ``` ### `$.unique()` {#d-unique} Odstraní duplicitní prvky z pole. ```js const result = $.unique([1, 2, 12, 3, 2, 1, 2, 1, 1, 1, 1]); console.log(result); // [1, 2, 12, 3] ``` ### `$.map()` {#d-map} Iteruje přes pole nebo objekt a vrací nové pole složené z návratových hodnot callback funkce. Prvním parametrem callback funkce je hodnota pole nebo objektu na odpovídající pozici, druhým parametrem je index pole nebo klíč objektu. Funkce zpětného volání může vrátit libovolnou hodnotu. Pokud vrátí pole, toto pole bude rozbaleno. Pokud vrátí `null` nebo `undefined`, tato hodnota bude ignorována. Uvnitř callback funkce `this` odkazuje na objekt `window`. ```js // Iterace přes pole const result = $.map(['a', 'b', 'c'], function (value, index) { return index + value; }); console.log(result); // ['0a', '1b', '2c'] ``` ```js // Když callback funkce vrátí pole, pole bude rozbaleno const result = $.map([1, 2, 3], function (value, index) { return [value, value + 1]; }); console.log(result); // [1, 2, 2, 3, 3, 4] ``` ```js // Iterace přes objekt const result = $.map( { name: 'mdui', password: '123456' }, function (value, key) { return key + ':' + value; }, ); console.log(result); // ['name:mdui', 'password:123456'] ``` ### `$.contains()` {#d-contains} Zjistí, zda jeden uzel obsahuje jiný uzel. Pokud nadřazený uzel obsahuje podřízený uzel, vrátí `true`; jinak vrátí `false`. ```js $.contains(document, document.body); // true $.contains(document.body, document); // false ``` ## Typy dat {#api-type} ### `.is()` {#is} Zjistí, zda alespoň jeden prvek v kolekci odpovídá parametru. Pokud odpovídá, vrátí `true`; jinak vrátí `false`. Parametrem může být CSS selektor, DOM prvek, pole DOM prvků, JQ objekt nebo callback funkce. Pokud je parametrem callback funkce, prvním parametrem funkce je index, druhým parametrem je aktuální prvek. Uvnitř funkce `this` odkazuje na aktuální prvek. Pokud funkce vrátí `true`, aktuální prvek odpovídá parametru; pokud vrátí `false`, aktuální prvek neodpovídá parametru. ```js $('.box').is('.box'); // true $('.box').is('.boxss'); // false $('.box').is($('.box')[0]); // true ``` ```js // Posouzení pomocí návratové hodnoty callback funkce $(document).is(function (index, element) { return element === document; }); // true ``` ## Přístup k objektům {#api-object} ### `.length` {#length} Vrátí počet prvků v aktuální kolekci. ```js $('body').length; // 1 ``` ### `.each()` {#each} Iteruje přes aktuální kolekci a provede funkci pro každý prvek v kolekci. Pokud funkce vrátí `false`, iterace se zastaví. Prvním parametrem funkce je index prvku, druhým parametrem je aktuální prvek. Uvnitř funkce `this` odkazuje na aktuální prvek. ```js $('img').each(function (index, element) { this.src = 'test' + index + '.jpg'; }); ``` ### `.map()` {#map} Iteruje přes aktuální kolekci, provede funkci pro každý prvek v kolekci a vrátí novou kolekci složenou z návratových hodnot funkce. Funkce může vrátit jednu hodnotu nebo pole hodnot. Pokud vrátí pole, prvky pole budou postupně přidány do nové kolekce. Pokud funkce vrátí `null` nebo `undefined`, tato hodnota nebude přidána do nové kolekce. Prvním parametrem funkce je index prvku, druhým parametrem je aktuální prvek. Uvnitř funkce `this` odkazuje na aktuální prvek. ```js const result = $('input.checked').map(function (i, element) { return element.value; }); // result je JQ objekt složený z hodnot odpovídajících prvků ``` ### `.eq()` {#eq} Vrátí novou kolekci obsahující pouze prvek na zadaném indexu. ```js $('div').eq(0); // vrátí kolekci obsahující pouze první prvek $('div').eq(-1); // vrátí kolekci obsahující pouze poslední prvek $('div').eq(-2); // vrátí kolekci obsahující pouze předposlední prvek ``` ### `.first()` {#first} Vrátí novou kolekci obsahující pouze první prvek aktuální kolekce. ```js $('div').first(); // vrátí kolekci obsahující pouze první div ``` ### `.last()` {#last} Vrátí novou kolekci obsahující pouze poslední prvek aktuální kolekce. ```js $('div').last(); // vrátí kolekci obsahující pouze poslední div ``` ### `.get()` {#get} Vrátí prvek na zadaném indexu. Pokud není zadán žádný parametr, vrátí pole složené ze všech prvků v kolekci. ```js $('div').get(); // vrátí pole všech div prvků $('div').get(0); // vrátí první div prvek $('div').get(-1); // vrátí poslední div prvek ``` ### `.index()` {#index} Pokud není zadán žádný parametr, vrátí index prvního prvku aktuální kolekce vzhledem k jeho sourozeneckým prvkům. Pokud je zadán CSS selektor, vrátí index prvního prvku aktuální kolekce vzhledem k prvkům odpovídajícím CSS selektoru. Pokud je zadán DOM prvek, vrátí index tohoto prvku v aktuální kolekci. Pokud je zadán JQ objekt, vrátí index prvního prvku objektu v aktuální kolekci. ```html
``` ```js $('#child3').index(); // 2 $('#child3').index('#child div'); // 2 $('#child div').index($('#child3').get(0)); // 2 ``` ### `.slice()` {#slice} Vrátí podmnožinu aktuální kolekce. Zadáním dvou parametrů určíte počáteční a koncovou pozici podmnožiny (koncová pozice není zahrnuta). Pokud není zadán druhý parametr, vrátí všechny prvky od počáteční pozice do konce kolekce. ```js // Vrátí všechny prvky od třetího (včetně třetího) dále $('div').slice(3); // Vrátí prvky mezi třetím a pátým (včetně třetího, bez pátého) $('div').slice(3, 5); ``` ### `.filter()` {#filter} Vyfiltruje z aktuální kolekce prvky odpovídající zadanému výrazu. Parametrem může být CSS selektor, DOM prvek, pole DOM prvků nebo callback funkce. Pokud je parametrem callback funkce, prvním parametrem funkce je index prvku, druhým parametrem je aktuální prvek. Uvnitř funkce `this` odkazuje na aktuální prvek. Pokud funkce vrátí `true`, aktuální prvek bude zachován; pokud vrátí `false`, aktuální prvek bude odstraněn. ```js // Vyfiltruje všechny div prvky obsahující třídu .box $('div').filter('.box'); // Vyfiltruje všechny vybrané možnosti $('#select option').filter(function (index, element) { return element.selected; }); ``` ### `.not()` {#not} Vyfiltruje z aktuální kolekce prvky, které neodpovídají zadanému výrazu. Parametrem může být CSS selektor, DOM prvek, pole DOM prvků, JQ objekt nebo callback funkce vracející boolean. Pokud je parametrem callback funkce, prvním parametrem funkce je index prvku, druhým parametrem je aktuální prvek. Uvnitř funkce `this` odkazuje na aktuální prvek. Pokud funkce vrátí `true`, aktuální prvek bude odstraněn; pokud vrátí `false`, aktuální prvek bude zachován. ```js // Vyfiltruje všechny div prvky, které neobsahují třídu .box $('div').not('.box'); // Vyfiltruje všechny nevybrané možnosti $('#select option').not(function (index, element) { return element.selected; }); ``` ## CSS třídy {#api-css} ### `.hasClass()` {#hasClass} Zjistí, zda první prvek v kolekci obsahuje zadanou CSS třídu. ```js // Zjistí, zda první div prvek obsahuje třídu .item $('div').hasClass('item'); ``` ### `.addClass()` {#addClass} Přidá CSS třídy ke každému prvku v kolekci. Více názvů tříd lze oddělit mezerami. Parametrem může být řetězec nebo callback funkce vracející název CSS třídy. Pokud je parametrem callback funkce, prvním parametrem funkce je index prvku, druhým parametrem jsou původní názvy CSS tříd na prvku. Uvnitř funkce `this` odkazuje na aktuální prvek. ```js // Přidá třídu .item ke všem div prvkům $('div').addClass('item'); // Přidá třídy .item1 a .item2 ke všem div prvkům $('div').addClass('item1 item2'); // Přidá ke všem div prvkům CSS třídu vrácenou callback funkcí $('div').addClass(function (index, currentClassName) { return currentClassName + '-' + index; }); ``` ### `.removeClass()` {#removeClass} Odstraní zadané CSS třídy z každého prvku v kolekci. Více názvů tříd lze oddělit mezerami. Parametrem může být řetězec nebo callback funkce vracející název CSS třídy. Pokud je parametrem callback funkce, prvním parametrem funkce je index prvku, druhým parametrem jsou původní názvy CSS tříd na prvku. Uvnitř funkce `this` odkazuje na aktuální prvek. Pokud není zadán žádný parametr, metoda přímo odstraní atribut `class` z prvků. ```js // Odstraní třídu .item ze všech div prvků $('div').removeClass('item'); // Odstraní třídy .item1 a .item2 ze všech div prvků $('div').removeClass('item1 item2'); // Odstraní ze všech div prvků CSS třídu vrácenou callback funkcí $('div').removeClass(function (index, currentClassName) { return 'item'; }); ``` ### `.toggleClass()` {#toggleClass} Pokud prvek obsahuje zadanou CSS třídu, odstraní ji; pokud ne, přidá ji. Více názvů tříd lze oddělit mezerami. Parametrem může být řetězec nebo callback funkce vracející název CSS třídy. Pokud je parametrem callback funkce, prvním parametrem funkce je index prvku, druhým parametrem jsou původní názvy CSS tříd na prvku. Uvnitř funkce `this` odkazuje na aktuální prvek. ```js // Přepne třídu .item na všech div prvcích $('div').toggleClass('item'); // Přepne třídy .item1 a .item2 na všech div prvcích $('div').toggleClass('item1 item2'); // Přepne na všech div prvcích CSS třídu vrácenou callback funkcí $('div').toggleClass(function (index, currentClassName) { return 'item'; }); ``` ## Atributy uzlů {#api-attr} ### `.prop()` {#prop} Získá hodnotu JavaScript vlastnosti prvního prvku v kolekci. ```js // Získá hodnotu vlastnosti checked prvního prvku $('input').prop('checked'); ``` Pokud jsou zadány dva parametry, metoda nastaví zadanou JavaScript vlastnost na všech prvcích v kolekci. Hodnota vlastnosti může být libovolného typu nebo návratová hodnota callback funkce. Funkce zpětného volání má první parametr index prvku a druhý parametr původní hodnotu vlastnosti na prvku; uvnitř funkce `this` odkazuje na aktuální prvek. Pokud je hodnota vlastnosti nebo návratová hodnota callback funkce `undefined`, metoda nezmění původní vlastnost prvku. ```js // Nastaví hodnotu vlastnosti checked všech vybraných prvků na true $('input').prop('checked', true); // Nastaví hodnotu vlastnosti pomocí návratové hodnoty callback funkce $('input').prop('checked', function (index, oldPropValue) { return true; }); ``` Lze také nastavit více vlastností najednou předáním objektu. ```js // Nastaví více vlastností prvku najednou $('input').prop({ checked: false, disabled: function (index, oldPropValue) { return true; }, }); ``` ### `.removeProp()` {#removeProp} Odstraní zadanou JavaScript vlastnost ze všech prvků v kolekci. ```js $('input').removeProp('disabled'); ``` ### `.attr()` {#attr} Získá hodnotu HTML atributu prvního prvku v kolekci. ```js // Získá hodnotu atributu prvního prvku $('div').attr('username'); ``` Pokud jsou zadány dva parametry, metoda nastaví zadaný HTML atribut na všech prvcích v kolekci. Hodnota atributu může být řetězec, číslo nebo návratová hodnota callback funkce. Pokud je parametrem callback funkce, prvním parametrem funkce je index prvku, druhým parametrem je původní hodnota atributu na prvku. Uvnitř funkce `this` odkazuje na aktuální prvek. Pokud je hodnota atributu nebo návratová hodnota callback funkce `null`, metoda odstraní zadaný atribut; pokud je `undefined`, nezmění původní atribut prvku. ```js // Nastaví hodnotu atributu všem vybraným prvkům $('div').attr('username', 'mdui'); // Nastaví hodnotu atributu pomocí návratové hodnoty callback funkce $('div').attr('username', function (index, oldAttrValue) { return 'mdui'; }); ``` Lze také nastavit více atributů najednou předáním objektu. ```js // Nastaví více atributů prvku najednou $('div').attr({ username: 'mdui', lastname: function (index, oldAttrValue) { return 'test'; }, }); ``` ### `.removeAttr()` {#removeAttr} Odstraní zadané HTML atributy ze všech prvků v kolekci. Více názvů atributů lze oddělit mezerami. ```js // Odstraní jeden atribut ze všech prvků v kolekci $('div').removeAttr('username'); // Odstraní více atributů ze všech prvků v kolekci $('div').removeAttr('username lastname'); ``` ### `.val()` {#val} Vrátí hodnotu prvního prvku v kolekci. Pokud je prvkem ``, `` nebo `