# Przegląd Poznajmy mdui za pomocą CDN i najprostszy szablon strony. > Czytasz dokumentację mdui 2! > > Aby przeczytać dokumentację mdui 1, odwiedź [www.mdui.org/docs/](https://www.mdui.org/docs/). ## Szybki start {#getting-started} Najłatwiej użyć mdui, dołączając pliki CSS i JS bezpośrednio z CDN. Jeśli chcesz zainstalować mdui przez npm, zapoznaj się z sekcją [Instalacja](/pl/docs/2/getting-started/installation). **Dołączenie plików** Dodaj poniższy kod do znacznika `` strony: ```html ``` Jeśli potrzebujesz użyć atrybutów ikon komponentów (np. `icon="search"` w ``), musisz również dołączyć plik CSS dla ikon – zobacz [Używanie ikon Material Icons](/pl/docs/2/components/icon#usage-material-icons). mdui nie wymaga żadnych zależności – po dołączeniu powyższych plików wszystko działa. ## Najprostszy szablon strony {#template} Poniżej znajduje się najprostszy szablon strony. Możesz dodawać więcej komponentów i treści, aby zbudować witrynę. ```html Witaj, świecie! Witaj, świecie! ``` # Instalacja Możesz zainstalować mdui przez npm lub użyć go z CDN. Zalecana jest instalacja przez npm. ## Instalacja przez npm {#npm} ```bash npm install mdui --save ``` ### Import wszystkich komponentów {#full-import} W głównym pliku projektu zaimportuj poniższe dwa pliki, aby używać wszystkich komponentów mdui: ```js import 'mdui/mdui.css'; import 'mdui'; ``` Możesz też bezpośrednio importować potrzebne funkcje z mdui. Na przykład, aby zaimportować funkcję [`snackbar`](/pl/docs/2/functions/snackbar): ```js import { snackbar } from 'mdui'; ``` Pokaż wszystkie funkcje dostępne do importu z 'mdui' 
import {
  $,
  dialog,
  alert,
  confirm,
  prompt,
  snackbar,
  getTheme,
  setTheme,
  getColorFromImage,
  setColorScheme,
  removeColorScheme,
  loadLocale,
  setLocale,
  getLocale,
  throttle,
  observeResize,
  breakpoint
} from 'mdui';
 ### Import selektywny {#cherry-picking} Aby zoptymalizować rozmiar projektu, możesz zaimportować tylko potrzebne komponenty i funkcje. Na przykład, jeśli potrzebujesz tylko komponentu [``](/pl/docs/2/components/button) i funkcji [`snackbar`](/pl/docs/2/functions/snackbar): ```js // Plik CSS jest zawsze wymagany import 'mdui/mdui.css'; // Import komponentu import 'mdui/components/button.js'; // Import funkcji snackbar import { snackbar } from 'mdui/functions/snackbar.js'; ``` Na stronach dokumentacji każdego komponentu lub funkcji znajdziesz szczegółowe instrukcje dotyczące importu na żądanie. Pokaż wszystkie komponenty i funkcje dostępne do importu na żądanie 
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} Możesz użyć tagów `` i ` Kliknij mnie ``` ### Użycie wersji ES module {#es-module} Poniższy przykład pokazuje, jak używać wersji ES module mdui. W tej wersji możesz używać składni ES module do importowania mdui z CDN: ```html Kliknij mnie ``` # Szybki start Komponenty mdui to standardowe Web Components. Możesz ich używać jak znaczników `
`. Dokumentacja każdego komponentu zawiera pełny opis API: właściwości, metody, zdarzenia, sloty, CSS Part, niestandardowe właściwości CSS itp. Ten rozdział omawia podstawy korzystania z Web Components. ## Atrybuty {#attribute} Atrybuty dzielą się na atrybuty HTML i właściwości JavaScript. Zazwyczaj są one ze sobą zsynchronizowane: gdy zmienisz wartość atrybutu HTML, zmieni się też właściwość JavaScript i odwrotnie. Atrybuty HTML można ustawić bezpośrednio w ciągu HTML komponentu, a następnie odczytywać i modyfikować za pomocą `getAttribute` i `setAttribute`: ```html Kliknij mnie ``` Właściwości JavaScript można bezpośrednio odczytywać lub ustawiać na instancji komponentu: ```html Kliknij mnie ``` Niektóre właściwości mają typ logiczny (boolean). Dla nich obecność atrybutu HTML oznacza `true`, brak – `false`. Dla zgodności z niektórymi frameworkami, mdui traktuje również ciąg `"false"` jako wartość logiczną `false`. ```html ``` Czasami właściwością może być tablica, obiekt lub funkcja. Wtedy istnieje tylko właściwość JavaScript, bez odpowiadającego atrybutu HTML. Przykładowo, w komponencie [``](/pl/docs/2/components/slider) właściwość [`labelFormatter`](/pl/docs/2/components/slider#attributes-labelFormatter) jest funkcją i można ją ustawić tylko przez JavaScript: ```html ``` Poniżej fragment dokumentacji [``](/pl/docs/2/components/slider) dla przykładu: | Atrybut HTML | Właściwość JavaScript | reflect | | ------------ | --------------------- | -------------------------------------------------------------------------------------- | | `name` | `name` | | | `value` | `value` | | | | `labelFormatter` | | Dla `name` istnieją zarówno atrybut HTML, jak i właściwość JavaScript, a kolumna reflect wskazuje, że zmiana właściwości JavaScript zaktualizuje atrybut HTML. Dla `value` zmiana właściwości JavaScript nie aktualizuje atrybutu HTML. `labelFormatter` ma tylko właściwość JavaScript. ## Metody {#method} Niektóre komponenty udostępniają publiczne metody. Możesz je wywołać, aby uzyskać różne funkcjonalności. Na przykład metoda [`focus()`](/pl/docs/2/components/text-field#methods-focus) komponentu [``](/pl/docs/2/components/text-field) pozwala ustawić fokus na polu tekstowym. ```html ``` W dokumentacji każdego komponentu znajdziesz wszystkie dostępne metody i ich parametry. ## Zdarzenia {#event} Niektóre komponenty podczas wykonywania określonych akcji wyzwalają zdarzenia. Na przykład komponent [``](/pl/docs/2/components/dialog) wyzwala zdarzenie [`open`](/pl/docs/2/components/dialog#events-open) podczas otwierania. Możesz nasłuchiwać tego zdarzenia, aby wykonać własne akcje. ```html Okno dialogowe ``` W dokumentacji każdego komponentu znajdziesz wszystkie dostępne zdarzenia i ich parametry. Jeśli używasz mdui w innych frameworkach (Vue, React, Angular), możesz używać składni frameworka do wiązania zdarzeń. Jednak niektóre frameworki (np. React) pozwalają na wiązanie tylko standardowych zdarzeń (np. `click`), a nie niestandardowych (jak `open`). Dlatego w React, aby związać niestandardowe zdarzenie, musisz najpierw pobrać referencję do elementu i użyć `addEventListener`. Więcej informacji o używaniu mdui z React znajdziesz w sekcji [Integracja z frameworkami - React](/pl/docs/2/frameworks/react). ## Slot {#slot} Wiele komponentów udostępnia sloty, które umożliwiają wstawienie własnej treści HTML do wnętrza komponentu. Najczęściej spotykany jest slot domyślny – zwykły HTML lub zwykły tekst wewnątrz komponentu. Na przykład domyślny slot komponentu [``](/pl/docs/2/components/button) służy do ustawienia tekstu przycisku. W przykładzie „Kliknij mnie” to zawartość slotu domyślnego: ```html Kliknij mnie ``` Niektóre komponenty mają również sloty nazwane. Dla slotu nazwanego należy podać atrybut `slot` z odpowiednią nazwą. W poniższym przykładzie komponent [``](/pl/docs/2/components/icon) ma `slot="start"`, co oznacza, że jest to slot nazwany [`start`](/pl/docs/2/components/button#slots-icon) – ta ikona zostanie wstawiona do lewej strony wewnątrz przycisku: ```html Ustawienia ``` Jeśli komponent używa wielu slotów nazwanych, kolejność ich umieszczenia nie ma znaczenia – przeglądarka automatycznie umieści je we właściwych miejscach. W dokumentacji każdego komponentu znajdziesz wszystkie obsługiwane sloty. ## Niestandardowe właściwości CSS {#css-custom-properties} Niestandardowe właściwości CSS to zmienne w CSS. mdui definiuje szereg [globalnych niestandardowych właściwości CSS](/pl/docs/2/styles/design-tokens), które służą wewnątrz komponentów. Dzięki temu możesz modyfikować te właściwości, aby globalnie zmienić style komponentów mdui. Na przykład poniższy kod zmniejsza zaokrąglenia rogów wszystkich komponentów: ```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; } ``` Możesz też modyfikować te właściwości w lokalnym zakresie. Poniższy kod zmniejszy zaokrąglenia tylko dla elementu z klasą `sharp` i jego dzieci: ```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; } ``` Niektóre komponenty udostępniają również własne, niestandardowe właściwości CSS, które działają tylko dla danego komponentu i nie mają przedrostka `--mdui`. Na przykład poniższy kod zmienia właściwość `--z-index` dla komponentu [``](/pl/docs/2/components/dialog): ```css mdui-dialog { --z-index: 3000; } ``` W dokumentacji każdego komponentu znajdziesz obsługiwane przez niego niestandardowe właściwości CSS. ## CSS Part {#css-part} Komponenty mdui używają shadow DOM do enkapsulacji stylów i zachowań. Zwykłe selektory CSS nie mogą wybrać elementów wewnątrz shadow DOM. Dlatego niektóre komponenty dodają atrybut `part` do elementów w shadow DOM. Możesz użyć selektora `::part`, aby wybrać te elementy i nadpisać część stylów. Na przykład poniższy kod używa parta [`button`](/pl/docs/2/components/button#cssParts-button) do zmiany wewnętrznego odstępu przycisku, a partów [`label`](/pl/docs/2/components/button#cssParts-label), [`icon`](/pl/docs/2/components/button#cssParts-icon), [`end-icon`](/pl/docs/2/components/button#cssParts-end-icon) do zmiany koloru tekstu i ikon: ```html Przycisk ``` Strukturę elementów shadow DOM i ich domyślne style możesz podejrzeć w narzędziach deweloperskich przeglądarki. Zanim użyjesz CSS Part, zastanów się, czy globalne lub lokalne niestandardowe właściwości CSS nie spełnią twoich potrzeb. Jeśli tak, to preferuj je do dostosowywania stylów. W dokumentacji każdego komponentu znajdziesz wszystkie publiczne `part`. ## Mechanizm aktualizacji komponentów {#update-mechanism} Komponenty mdui są oparte na [Lit](https://lit.dev/). Lit to lekka biblioteka ułatwiająca tworzenie Web Components. Podczas korzystania z komponentów mdui warto znać mechanizm renderowania i aktualizacji. Gdy zmienisz właściwość komponentu mdui, komponent zostanie ponownie wyrenderowany. Jednak to ponowne renderowanie nie jest synchroniczne. Kiedy zmienisz wiele właściwości jednocześnie, Lit buforuje te zmiany do następnego cyklu aktualizacji, dzięki czemu niezależnie od liczby zmian, każdy komponent renderuje się tylko raz. Ponadto renderowane są tylko te części shadow DOM, które uległy zmianie. W poniższym przykładzie ustawiamy właściwość JavaScript `disabled` przycisku na `true`, a następnie od razu odczytujemy atrybut HTML. Ponieważ komponent nie został jeszcze ponownie wyrenderowany, odczytany atrybut HTML nadal będzie `false`: ```js const button = document.querySelector('mdui-button'); button.disabled = true; console.log(button.hasAttribute('disabled')); // false ``` Aby poczekać na zakończenie ponownego renderowania po zmianie właściwości, możesz użyć właściwości `updateComplete` komponentu. Zwraca ona Promise, który zostanie rozwiązany po zakończeniu renderowania: ```js const button = document.querySelector('mdui-button'); button.disabled = true; button.updateComplete.then(() => { console.log(button.hasAttribute('disabled')); // true }); ``` # Wsparcie TypeScript mdui jest napisane w TypeScript, więc oferuje pełne wsparcie typów. Wszystkie oficjalne biblioteki mdui zawierają pliki deklaracji typów i mogą być używane bezpośrednio. ## Typy instancji komponentów {#instance} Czasami może być konieczne rzutowanie zmiennej JavaScript na instancję komponentu mdui. Możesz wtedy zaimportować odpowiedni typ komponentu bezpośrednio z mdui. Na przykład, aby zaimportować typ komponentu Tooltip z pliku komponentu: ```ts import type { Tooltip } from 'mdui/components/tooltip.js'; ``` Lub bezpośrednio z mdui: ```ts import type { Tooltip } from 'mdui'; ``` Następnie możesz rzutować zmienną JavaScript na typ Tooltip: ```ts const tooltip = document.querySelector('mdui-tooltip') as Tooltip; ``` Wtedy Twoje IDE będzie wyświetlać autouzupełnienie dla właściwości i metody zmiennej `tooltip`. Jeśli dodasz nasłuchiwanie zdarzeń na zmiennej `tooltip`, IDE będzie również podpowiadać nazwy zdarzeń, typy zdarzeń i wskazywanie `this` w funkcji zwrotnej: ```ts tooltip.addEventListener('open', function (event) {}); ``` ## Typy zdarzeń {#event} Każdy komponent eksportuje interfejs odwzorowujący nazwy zdarzeń i odpowiadające im obiekty zdarzeń. Interfejs nazywa się `${ComponentName}EventMap`. Na przykład komponent Tooltip eksportuje interfejs `TooltipEventMap`: ```ts export interface TooltipEventMap { open: CustomEvent; opened: CustomEvent; close: CustomEvent; closed: CustomEvent; } ``` Możesz zaimportować ten interfejs z pliku komponentu: ```ts import type { TooltipEventMap } from 'mdui/components/tooltip.js'; ``` Lub bezpośrednio z mdui: ```ts import type { TooltipEventMap } from 'mdui'; ``` Należy pamiętać, że interfejs ten zawiera tylko zdarzenia specyficzne dla komponentu. Komponenty mdui dziedziczą po `HTMLElement`, więc obsługują także zdarzenia `HTMLElement`. Aby uzyskać wszystkie typy zdarzeń komponentu, możesz użyć typu przecięcia (intersection): ```ts type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap; ``` # Wsparcie IDE mdui oferuje pełne wsparcie dla VS Code i WebStorm. W tych środowiskach otrzymasz podpowiedzi kodu, tooltipy z dokumentacją itp. ## VS Code {#vscode} ### mdui zainstalowane przez npm {#vscode-npm} Jeśli zainstalowałeś mdui przez npm, wykonaj poniższe kroki, aby włączyć wsparcie IDE w bieżącym projekcie: 1. W katalogu głównym projektu utwórz folder `.vscode`. 2. W folderze `.vscode` utwórz plik `settings.json`. 3. Dodaj następujący kod do pliku `settings.json`: ```json { "html.customData": ["./node_modules/mdui/html-data.en.json"], "css.customData": ["./node_modules/mdui/css-data.en.json"] } ``` Jeśli plik `settings.json` już istnieje, po prostu dodaj te dwie linie do głównego obiektu JSON. Po zmianie uruchom ponownie VS Code. ### mdui używane przez CDN {#vscode-cdn} Jeśli używasz mdui przez CDN, możesz zainstalować rozszerzenie mdui do VS Code, aby uzyskać wsparcie IDE. W sklepie z rozszerzeniami VS Code wyszukaj `mdui` i wybierz pierwszy wynik, lub [kliknij tutaj, aby zainstalować](vscode:extension/zdhxiong.mdui). Po instalacji wsparcie IDE będzie włączone we wszystkich projektach. Zaleca się instalację przez npm i konfigurację `settings.json` zamiast instalowania rozszerzenia VS Code, aby wsparcie IDE było zgodne z używaną wersją mdui. ## WebStorm {#webstorm} ### mdui zainstalowane przez npm {#webstorm-npm} Jeśli zainstalowałeś mdui przez npm, wykonaj poniższe kroki, aby włączyć wsparcie IDE w bieżącym projekcie: 1. W pliku `package.json` w głównym katalogu projektu dodaj następujący kod do głównego obiektu: ```json { "web-types": ["./node_modules/mdui/web-types.en.json"] } ``` Jeśli `web-types` już istnieje w głównym obiekcie `package.json`, dodaj `./node_modules/mdui/web-types.en.json` do tablicy `web-types`. Po zmianie uruchom ponownie WebStorm. ### mdui używane przez CDN {#webstorm-cdn} Jeśli używasz mdui przez CDN, możesz zainstalować wtyczkę mdui do WebStorm, aby uzyskać wsparcie IDE. W sklepie z wtyczkami WebStorm wyszukaj `mdui` i wybierz pierwszy wynik. Po instalacji wsparcie IDE będzie włączone we wszystkich projektach. Zaleca się instalację przez npm i konfigurację wsparcia IDE zamiast instalowania wtyczki WebStorm, aby wsparcie IDE było zgodne z używaną wersją mdui. ## Różnice we wsparciu między VS Code a WebStorm {#difference} Wsparcie mdui dla VS Code i WebStorm różni się. Poniższa tabela przedstawia szczegółowe różnice: | Obszar wsparcia (autouzupełnianie, podpowiedzi) | VS Code | WebStorm | | --------------------------------------------------- | ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | | Nazwy tagów HTML | | | | Nazwy atrybutów w tagach HTML | | | | Wartości wyliczeniowe atrybutów HTML | | (brak podpowiedzi komentarzy dla wartości) | | Nazwy zdarzeń w tagach HTML | | | | Wartości atrybutu `name` slotów w HTML | | | | Nazwy części (`part`) w selektorze `::part()` w CSS | | | | Niestandardowe właściwości CSS wewnątrz komponentów | | | | Globalne niestandardowe właściwości CSS | | | | Globalne klasy CSS | | | # Lokalizacja Domyślnie mdui korzysta z języka angielskiego. Jeśli potrzebujesz innego języka, musisz skonfigurować wielojęzyczność. ## Sposób użycia {#usage} mdui udostępnia trzy funkcje do realizacji wielojęzyczności: - [`loadLocale`](/pl/docs/2/functions/loadLocale): ładuje pakiet językowy. Parametr to funkcja, która przyjmuje kod języka i zwraca Promise z odpowiednim pakietem. Wywołaj tę funkcję w głównym pliku projektu. - [`setLocale`](/pl/docs/2/functions/setLocale): przełącza na wskazany język. Parametr to nowy kod języka, zwraca Promise rozwiązujący się po załadowaniu pakietu. - [`getLocale`](/pl/docs/2/functions/getLocale): pobiera bieżący kod języka. Przykład użycia: ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; import { setLocale } from 'mdui/functions/setLocale.js'; import { getLocale } from 'mdui/functions/getLocale.js'; // W punkcie wejściowym projektu wywołaj loadLocale loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`)); // Gdy chcesz zmienić język, wywołaj tę funkcję. Po rozwiązaniu Promise język zostanie zmieniony setLocale('zh-cn').then(() => { // Wywołanie getLocale pobierze bieżący kod języka console.log(getLocale()); // zh-cn }); ``` ## Zdarzenia stanu {#event} Podczas rozpoczynania, kończenia lub błędu zmiany języka, na obiekcie `window` wyzwalane jest zdarzenie `mdui-localize-status`. Możesz go nasłuchiwać, aby wykonać własne akcje, np. zapisać kod języka w ciasteczku po pomyślnej zmianie. Właściwość `detail.status` zdarzenia opisuje rodzaj zmiany stanu: `loading`, `ready`, `error`:
detail.status Opis
loading

Rozpoczęto ładowanie nowego pakietu językowego.

Obiekt detail zawiera:

  • loadingLocale: kod języka, który jest ładowany.
ready

Nowy pakiet językowy został załadowany pomyślnie.

Obiekt detail zawiera:

  • readyLocale: kod języka, który został załadowany.
error

Ładowanie nowego pakietu językowego nie powiodło się.

Obiekt detail zawiera:

  • errorLocale: kod języka, który nie został załadowany.
  • errorMessage: komunikat błędu.
Przykład użycia: ```js window.addEventListener('mdui-localize-status', (event) => { if (event.detail.status === 'loading') { console.log( `Rozpoczynanie ładowania pakietu: ${event.detail.loadingLocale}`, ); } else if (event.detail.status === 'ready') { console.log(`Pakiet ${event.detail.readyLocale} załadowany pomyślnie`); } else if (event.detail.status === 'error') { console.error( `Nie udało się załadować pakietu ${event.detail.errorLocale}: ${event.detail.errorMessage}`, ); } }); ``` ## Sposoby ładowania pakietów językowych {#load-locale} ### Ładowanie leniwe {#lazy-load} Użycie [dynamicznego importu](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) pozwala pobrać odpowiedni pakiet dopiero przy przełączaniu na dany język. Jest to metoda zalecana. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`)); ``` ### Wstępne ładowanie {#pre-load} Podczas ładowania strony pobierane są wszystkie potrzebne pakiety językowe. Dzięki temu przy zmianie języka nie trzeba ich ponownie pobierać, co przyspiesza przełączanie. ```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)); ``` ### Import statyczny {#static-imports} Ta metoda pozwala spakować wszystkie potrzebne pakiety językowe razem z kodem projektu do jednego pliku, dzięki czemu nie trzeba ich oddzielnie pobierać. ```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)); ``` ## Ładowanie pakietów językowych przez CDN {#cdn} Jeśli używasz mdui przez CDN, możesz ładować pakiety językowe bezpośrednio z CDN. Przykład użycia: ```html ``` ## Obsługiwane języki {#languages} Obecnie mdui obsługuje następujące języki: | Język | Kod języka | | ----------------------------- | ---------- | | arabski | ar-eg | | azerbejdżański | az-az | | bułgarski | bg-bg | | bengalski (Bangladesz) | bn-bd | | białoruski | be-by | | kataloński | ca-es | | czeski | cs-cz | | duński | da-dk | | niemiecki | de-de | | grecki | el-gr | | angielski | en-gb | | angielski (amerykański) | en-us | | hiszpański | es-es | | estoński | et-ee | | perski | fa-ir | | fiński | fi-fi | | francuski (Belgia) | fr-be | | francuski (Kanada) | fr-ca | | francuski (Francja) | fr-fr | | irlandzki | ga-ie | | galicyjski (Hiszpania) | gl-es | | hebrajski | he-il | | hindi | hi-in | | chorwacki | hr-hr | | węgierski | hu-hu | | ormiański | hy-am | | indonezyjski | id-id | | włoski | it-it | | islandzki | is-is | | japoński | ja-jp | | gruziński | ka-ge | | khmerski | km-kh | | kurdyjski (północny) | kmr-iq | | kannada | kn-in | | kazachski | kk-kz | | koreański | ko-kr | | litewski | lt-lt | | łotewski | lv-lv | | macedoński | mk-mk | | malajalam | ml-in | | mongolski | mn-mn | | malajski (Malezja) | ms-my | | norweski | nb-no | | nepalski | ne-np | | niderlandzki (Belgia) | nl-be | | niderlandzki | nl-nl | | polski | pl-pl | | portugalski (Brazylia) | pt-br | | portugalski | pt-pt | | rumuński | ro-ro | | rosyjski | ru-ru | | słowacki | sk-sk | | serbski | sr-rs | | słoweński | sl-si | | szwedzki | sv-se | | tamilski | ta-in | | tajski | th-th | | turecki | tr-tr | | urdu (Pakistan) | ur-pk | | ukraiński | uk-ua | | wietnamski | vi-vn | | chiński uproszczony | zh-cn | | chiński tradycyjny (Hongkong) | zh-hk | | chiński tradycyjny (Tajwan) | zh-tw | ## Przesyłanie nowych tłumaczeń {#contribute} Aby dodać nowe tłumaczenie lub ulepszyć istniejące, otwórz Pull Request na GitHubie. Pakiety językowe znajdują się w [`packages/mdui/src/xliff`](https://github.com/zdhxiong/mdui/tree/v2/packages/mdui/src/xliff). Możesz edytować je bezpośrednio na GitHubie. # Częste pytania Poniżej znajdziesz najczęściej zadawane pytania społeczności mdui i oficjalne odpowiedzi. Przed zadaniem pytania, sprawdź, czy podobny problem został już omówiony. ## Dlaczego tagi self-closing nie działają? {#no-self-closing} mdui jest biblioteką komponentów opartą na Web Components. Specyfikacja Web Components nie obsługuje tagów samozamykających się, dlatego upewnij się, że używasz tagów zamykających dla komponentów mdui. ```html ``` ## Jak ukryć komponent przed jego pełnym załadowaniem? {#waiting-load} Ponieważ komponenty mdui są rejestrowane przez JavaScript, przed załadowaniem i zarejestrowaniem plików JS komponenty mogą być tymczasowo niestylizowane. Poniższe dwa sposoby rozwiązują ten problem: Pierwszy sposób: użyj pseudoklasy CSS [`:defined`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:defined), aby ukryć niezarejestrowane komponenty mdui. Poniższy kod CSS ukryje wszystkie niezarejestrowane komponenty mdui i wyświetli je natychmiast po rejestracji: ```css :not(:defined) { visibility: hidden; } ``` Drugi sposób: użyj metody JavaScript [`customElements.whenDefined()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined). Zwraca ona Promise, który zostanie rozwiązany, gdy dany komponent zostanie zarejestrowany. Aby obsłużyć sytuacje, w których niektóre komponenty nie mogą się załadować, możesz użyć [`Promise.allSettled()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled). Przykład poniżej najpierw ukrywa `` przez `opacity: 0`, a po zarejestrowaniu komponentów płynnie go wyświetla. `Promise.allSettled()` czeka na wszystkie Promisy, aby nawet jeśli jakiś komponent nie mógł się załadować, strona i tak się wyświetliła: ```html ``` # LLMs.txt mdui dostarcza `llms.txt` oraz `llms-full.txt`, które służą do dostarczania LLM-om (dużym modelom językowym) precyzyjnego, możliwego do zacytowania kontekstu, pomagając AI w bardziej niezawodnym odpowiadaniu na pytania związane z mdui. ## Jak używać llms.txt do dostarczania kontekstu AI {#context} Dwa punkty wejścia: - `llms.txt`: https://www.mdui.org/pl/docs/2/llms.txt - `llms-full.txt`: https://www.mdui.org/pl/docs/2/llms-full.txt `llms.txt` to skrócony indeks, odpowiedni dla modeli z dostępem do sieci, które mogą pobrać potrzebne strony Markdown lub do wstępnego zarysu projektu. `llms-full.txt` zawiera pełny kontekst, w tym zawartość wszystkich stron z `llms.txt`, odpowiedni dla modeli bez dostępu do sieci lub gdy trzeba dostarczyć pełny kontekst jednorazowo. ## Wersja Markdown dokumentacji {#md-mirror} Każda strona dokumentacji ma odpowiadającą jej wersję Markdown: wystarczy dodać `.md` na końcu adresu URL (dla strony głównej dodaj `index.md`). Na przykład: https://www.mdui.org/pl/docs/2/components/button → https://www.mdui.org/pl/docs/2/components/button.md https://www.mdui.org/pl/docs/2/ → https://www.mdui.org/pl/docs/2/index.md Możesz bezpośrednio podać ten link Markdown lub jego czysty tekst jako kontekst, aby uzyskać bardziej skupione i dokładne odpowiedzi. ## Jak używać w ChatGPT, Claude i innych LLM {#how-to-use} Jeśli model obsługuje dostęp do sieci / przesyłanie plików, wybierz jedną z poniższych opcji lub ich kombinację: 1. Bezpośrednie wklejenie: Wklej zawartość `llms-full.txt` jako prompt systemowy lub pierwszą wiadomość. Przykład: „Poniżej znajduje się kontekst mdui. Odpowiadaj ściśle na jego podstawie na kolejne pytania; w przypadku sprzeczności priorytet ma ten kontekst:\n\n[wklej zawartość llms-full.txt]”. 2. Przesłanie pliku: Prześlij plik `llms-full.txt` (lub `llms.txt`) i w pierwszym prompcie zaznacz „użyj załącznika jako głównego kontekstu”. Przykład: „Na podstawie załączonej dokumentacji mdui podaj użycie i typowe pułapki ``”. 3. Odczyt online: Podaj w rozmowie link do `llms.txt` lub `llms-full.txt`. Przykład: „Przeczytaj i postępuj zgodnie z https://www.mdui.org/pl/docs/2/llms-full.txt jako kontekstem, odpowiadaj na moje pytania dotyczące mdui”. 4. Wskazanie konkretnej strony: Jeśli dyskutujesz tylko o konkretnym komponencie/funkcji, podaj bezpośrednio adres Markdown tej strony. Przykład: „Przeczytaj https://www.mdui.org/pl/docs/2/components/button.md i na podstawie tego dokumentu podaj trzy najlepsze praktyki”. **Wskazówka**: Możesz kliknąć ikonę w prawym górnym rogu strony, aby jednym kliknięciem skopiować powyższy link, otworzyć wersję Markdown bieżącej strony lub otworzyć bieżącą stronę / `llms-full.txt` jako kontekst w ChatGPT. # Serwer MCP mdui dostarcza dedykowany serwer [MCP (Model Context Protocol)](https://modelcontextprotocol.io/) `@mdui/mcp`, który zapewnia asystentom AI działającym lokalnie możliwość wyszukiwania komponentów, ikon, niestandardowych właściwości CSS i dokumentacji. Możesz go używać z narzędziami programistycznymi takimi jak Claude Code, Cursor, GitHub Copilot, aby wspomóc generowanie kodu i lepsze korzystanie z komponentów i stylów mdui. ## Narzędzia {#tools} Serwer MCP mdui udostępnia asystentom AI następujące narzędzia: - `list_components`: Wyświetla listę wszystkich komponentów mdui. - `get_component_metadata`: Pobiera szczegółowe metadane API dla pojedynczego komponentu. - `list_css_classes`: Wyświetla listę globalnych nazw klas CSS. - `list_css_variables`: Wyświetla listę globalnych niestandardowych właściwości CSS. - `list_documents`: Wyświetla listę wszystkich dokumentów. - `get_document`: Pobiera pełną zawartość pojedynczego dokumentu. - `list_icon_codes`: Wyświetla listę kodów ikon, których można używać w atrybutach lub API. - `list_icon_components`: Wyświetla listę niezależnych komponentów ikon oraz instrukcje importu ESM. ## Sposób użycia {#usage} Serwer MCP obsługuje tylko [transport stdio](https://modelcontextprotocol.io/specification/2025-06-18/basic/transports#stdio) i możesz użyć go bezpośrednio w klientach takich jak VS Code, Cursor, Claude Code, Windsurf, Zed oraz w asystentach AI obsługujących protokół stdio. ### VS Code {#vscode} > Upewnij się, że masz zainstalowane rozszerzenia [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) i [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat). 1. W katalogu głównym projektu utwórz `.vscode/mcp.json` i dodaj następującą konfigurację: ```json { "servers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Kliknij przycisk „Uruchom” w pliku `mcp.json`. 3. Rozpocznij rozmowę w GitHub Copilot Chat. ### Cursor {#cursor} 1. W katalogu głównym projektu utwórz lub edytuj `.cursor/mcp.json` i dodaj następującą konfigurację: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Przejdź do Settings > Cursor Settings > MCP & Integrations i włącz serwer mdui. 3. Rozpocznij rozmowę w Cursor Chat. ### Claude Code {#claude-code} 1. W terminalu uruchom następującą komendę, aby dodać serwer MCP mdui: ```bash claude mcp add mdui -- npx -y @mdui/mcp ``` 2. Następnie uruchom `claude`, aby rozpocząć sesję. 3. Wprowadź prompt, aby rozpocząć używanie. ### Windsurf {#windsurf} 1. Przejdź do Settings > Windsurf Settings > Cascade 2. Kliknij Manage MCPs, a następnie „View raw config” i dodaj w pliku konfiguracyjnym: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` > Jeśli serwer MCP nie pojawi się automatycznie, kliknij Refresh, aby odświeżyć listę. 3. Wprowadź prompt, aby rozpocząć rozmowę. ### Zed {#zed} 1. Otwórz Settings > Open Settings i dodaj następującą konfigurację w pliku `settings.json`: ```json { "context_servers": { "mdui": { "source": "custom", "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Wprowadź prompt, aby rozpocząć używanie. ### Niestandardowy klient MCP {#custom} Gdy używasz niestandardowego klienta MCP w środowisku lokalnym lub deweloperskim, po prostu dodaj ten serwer do pliku konfiguracyjnego klienta. Na przykład: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` # Tryb ciemny Wszystkie komponenty mdui obsługują tryb ciemny i mogą automatycznie przełączać motyw zgodnie z ustawieniami systemu operacyjnego. Możesz w każdej chwili kliknąć ikonę w prawym górnym rogu dokumentacji, aby przełączyć motyw i zobaczyć wygląd komponentów w różnych trybach. Aby użyć trybu ciemnego, dodaj klasę `mdui-theme-dark` do znacznika ``: ```html ``` Aby motyw przełączał się automatycznie zgodnie z ustawieniami systemu, dodaj klasę `mdui-theme-auto` do ``: ```html ``` Możesz także używać różnych motywów w różnych częściach strony. W poniższym przykładzie na `` ustawiono tryb ciemny, ale na jednym z `
` dodano klasę `mdui-theme-light` – w tym divie elementy będą w trybie jasnym, a reszta strony w ciemnym: ```html
``` Oprócz bezpośredniego dodawania klas CSS, mdui udostępnia dwie funkcje ułatwiające operowanie motywem: - [`getTheme`](/pl/docs/2/functions/getTheme): pobiera motyw z bieżącej strony lub określonego elementu. - [`setTheme`](/pl/docs/2/functions/setTheme): ustawia motyw na bieżącej stronie lub wskazanym elemencie. --- Należy pamiętać, że mdui ustawia style `color` i `background-color` na selektorach `:root`, `.mdui-theme-light`, `.mdui-theme-dark`, `.mdui-theme-auto`. Jeśli nie odpowiadają Ci te domyślne style, możesz je samodzielnie nadpisać. Poniższy przykład ustawia w trybie jasnym białe tło i czarny tekst, a w trybie ciemnym czarne tło i biały tekst: ```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; } } ``` # Kolor dynamiczny mdui obsługuje kolory dynamiczne. Wystarczy podać wartość koloru, a mdui automatycznie wygeneruje pełny schemat kolorów. Ponadto mdui obsługuje wyodrębnianie koloru głównego z podanej tapety i generowanie na jego podstawie schematu. Możesz w każdej chwili kliknąć ikonę w prawym górnym rogu dokumentacji, aby przełączyć schemat kolorów i zobaczyć wygląd komponentów w różnych schematach. Schemat kolorów to zestaw niestandardowych właściwości CSS. Komponenty mdui odnoszą się do tych właściwości, więc zmiana schematu aktualizuje wszystkie komponenty. Pełną listę właściwości znajdziesz w [Tokeny projektowe – kolory](/pl/docs/2/styles/design-tokens#color). ## Generowanie schematu kolorów {#color-scheme} Użyj funkcji [`setColorScheme`](/pl/docs/2/functions/setColorScheme) do wygenerowania schematu. Funkcja przyjmuje szesnastkową wartość koloru i ustawia schemat na elemencie ``. ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // Wygeneruj schemat na podstawie #0061a4 i ustaw na setColorScheme('#0061a4'); ``` W drugim parametrze możesz określić `target`, aby ustawić schemat na wskazanym elemencie. ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // Wygeneruj schemat na podstawie #0061a4 i ustaw na elemencie .foo setColorScheme('#0061a4', { target: document.querySelector('.foo'), }); ``` Domyślnie generowany schemat zawiera tylko kolory z [Tokeny projektowe – kolory](/pl/docs/2/styles/design-tokens#color). Możesz podać `customColors`, aby dodać lub nadpisać kolory. ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // Wygeneruj schemat na podstawie #0061a4, zmodyfikuj istniejącą grupę kolorów error i dodaj nową grupę music setColorScheme('#0061a4', { customColors: [ { name: 'error', value: '#69F0AE', }, { name: 'music', value: '#FFC107', }, ], }); ``` Dla każdego niestandardowego koloru generowane są cztery właściwości CSS: - `--mdui-color-{name}` - `--mdui-color-on-{name}` - `--mdui-color-{name}-container` - `--mdui-color-on-{name}-container` Parametr `{name}` odpowiada polu `name` przekazanemu w obiekcie `customColors`, czyli nazwie koloru niestandardowego. Nazwa koloru niestandardowego może odpowiadać nazwom już istniejącym w domyślnym schemacie, takim jak `primary`, `secondary`, `tertiary` czy `error`. Jeśli użyjesz jednej z tych nazw, cztery powiązane właściwości CSS zostaną wygenerowane na podstawie podanej przez Ciebie wartości. Przykładowo, w powyższym kodzie zdefiniowano kolor `error`. Ponieważ `error` jest standardową nazwą używaną przez komponenty mdui do sygnalizowania błędów, ustawienie go na odcień zieleni spowoduje, że wszystkie stany błędów w komponentach również staną się zielone. Nazwa koloru niestandardowego może być również zupełnie nowa, jak np. `music` w powyższym przykładzie. W takim przypadku wygenerowany schemat będzie dodatkowo zawierać cztery właściwości CSS, których możesz użyć we własnych stylach: ```html
Muzyka
Muzyka (kontener)
``` Możesz również użyć funkcji [`removeColorScheme`](/pl/docs/2/functions/removeColorScheme), aby usunąć schemat wygenerowany powyższymi metodami. Funkcja przyjmuje parametry pozwalające określić, z którego elementu usunąć schemat; domyślnie usuwa go z elementu ``. ## Wyodrębnianie koloru z tapety {#from-wallpaper} Funkcja [`getColorFromImage`](/pl/docs/2/functions/getColorFromImage) wyodrębnia kolor główny z podanego obrazu i zwraca Promise z wartością szesnastkową. Następnie możesz użyć `setColorScheme`. ```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)); ``` # Typografia mdui udostępnia klasy CSS `mdui-prose` i `mdui-table`, które są przeznaczone do optymalizacji wyglądu artykułów i tabel. ## Składanie artykułów {#prose} Na elemencie nadrzędnym artykułu możesz dodać klasę `mdui-prose`, aby poprawić wyświetlanie całego artykułu, w tym także tabel `` w nim zawartych. Przykład: ```html

Tytuł

Treść

``` ## Styl tabeli {#table} Dodaj klasę `mdui-table` do elementu ``, aby poprawić wygląd tabeli. Przykład: ```html
``` Aby umożliwić poziome przewijanie elementu `` w jego elemencie nadrzędnym, dodaj klasę `mdui-table` do elementu nadrzędnego. Przykład: ```html
``` # Tokeny projektowe Tokeny projektowe (Design Tokens) to sposób na zarządzanie systemem projektowym. Dzięki nim można wyodrębnić wszystkie powtarzalne elementy (kolory, czcionki, odstępy itp.) jako niezależne zmienne, aby ujednolicić zarządzanie nimi w całym systemie projektu. mdui używa globalnych niestandardowych właściwości CSS do implementacji tokenów projektowych. Oznacza to, że wystarczy zmodyfikować właściwości CSS, aby globalnie zmienić style wszystkich komponentów mdui. Dla własnych stylów również zaleca się korzystanie z tych właściwości CSS, aby zachować spójność z komponentami mdui, a także aby style te automatycznie aktualizowały się przy zmianie koloru dynamicznego. ## Kolory {#color} mdui udostępnia osobne zestawy niestandardowych właściwości CSS dla trybu jasnego i ciemnego. W trybie jasnym nazwy właściwości mają postać `--mdui-color-{name}-light`, w trybie ciemnym `--mdui-color-{name}-dark`. Ponadto mdui udostępnia właściwości `--mdui-color-{name}`, które w trybie jasnym odnoszą się do `--mdui-color-{name}-light`, a w ciemnym do `--mdui-color-{name}-dark`, dzięki czemu automatycznie dostosowują się do aktualnego trybu. Jeśli chcesz zmodyfikować niektóre kolory, musisz zmienić zarówno `--mdui-color-{name}-light`, jak i `--mdui-color-{name}-dark`. Podczas odczytu używaj `--mdui-color-{name}`. Wartości właściwości to trzy składowe RGB oddzielone przecinkami. Przykład użycia: ```css /* Modyfikacja koloru primary */ :root { --mdui-color-primary-light: 103, 80, 164; --mdui-color-primary-dark: 208, 188, 255; } /* Ustawienie tła elementu .foo na kolor primary */ .foo { background-color: rgb(var(--mdui-color-primary)); } /* Ustawienie tła elementu .bar na kolor primary z przezroczystością 0.8 */ .bar { background-color: rgba(var(--mdui-color-primary), 0.8); } ``` Jeśli potrzebujesz utworzyć całkowicie nowy schemat kolorów, zalecamy użycie funkcji [`setColorScheme`](/pl/docs/2/functions/setColorScheme), która na podstawie podanego koloru wygeneruje cały schemat.
Nazwa koloru Niestandardowa właściwość CSS Wartość domyślna Przykład
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
## Zaokrąglenia {#shape-corner} mdui oferuje 7 różnych rozmiarów zaokrągleń. Przykład użycia: ```css /* Modyfikacja rozmiaru zaokrąglenia extra-small */ :root { --mdui-shape-corner-extra-small: 0.3rem; } /* Ustawienie zaokrąglenia elementu .foo na extra-small */ .foo { border-radius: var(--mdui-shape-corner-extra-small); } ``` | Niestandardowa właściwość CSS | Wartość domyślna | Przykład | | --------------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------- | | `--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` |
| ## Typografia {#typescale} mdui oferuje 15 różnych stylów tekstu, w tym 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. Przykład użycia: ```css /* Modyfikacja stylu 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; } /* Ustawienie stylu elementu .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); } ```
Niestandardowa właściwość CSS Wartość domyślna Przykład
--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
## Nieprzezroczystość warstwy stanu {#state-layer} Niektóre komponenty mdui w trakcie interakcji nakładają na siebie półprzezroczystą warstwę. Na przykład komponent [``](/pl/docs/2/components/button) wyświetla półprzezroczystą warstwę, gdy najedziesz na niego myszą, skupisz się na nim, naciśniesz go lub przeciągniesz. Możesz modyfikować nieprzezroczystość tej warstwy poprzez modyfikowanie właściwości CSS. Poniżej znajduje się przykład użycia: ```css /* Modyfikacja nieprzezroczystości warstwy stanu */ :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; } ``` | Niestandardowa właściwość CSS | Wartość domyślna | Przykład | | ----------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------ | | `--mdui-state-layer-hover` | `0.08` |
| | `--mdui-state-layer-focus` | `0.12` |
| | `--mdui-state-layer-pressed` | `0.12` |
| | `--mdui-state-layer-dragged` | `0.16` |
| ## Wysokość (cień) {#elevation} Niektóre komponenty mdui mają cień, aby symulować uniesienie. Możesz go modyfikować za pomocą właściwości CSS. Poniżej znajduje się przykład użycia: ```css /* Modyfikacja cienia dla 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%); } /* Ustawienie cienia dla elementu foo na level1 */ .foo { box-shadow: var(--mdui-elevation-level1); } ``` | Niestandardowa właściwość CSS | Wartość domyślna | Przykład | | ----------------------------- | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | `--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%)` |
| ## Animacja {#motion} Krzywe przyspieszenia i czasy trwania animacji w komponentach mdui można konfigurować za pomocą właściwości CSS. Poniżej znajduje się przykład użycia: ```css /* Modyfikacja krzywej przyspieszenia standard i czasu trwania short1 */ :root { --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --mdui-motion-duration-short1: 40ms; } /* Ustawienie przejścia dla elementu foo z użyciem krzywej standard i czasu short1 */ .foo { transition: all var(--mdui-motion-duration-short1) var(--mdui-motion-easing-standard); } ```
Typ Niestandardowa właściwość CSS Wartość domyślna
Krzywe przyspieszenia --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)
Czasy trwania --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
## Breakpointy responsywne {#breakpoint} mdui udostępnia serię responsywnych breakpointów, które można konfigurować za pomocą niestandardowych właściwości CSS. Poniżej znajduje się przykład użycia: ```css /* Modyfikacja wartości breakpoint sm */ :root { --mdui-breakpoint-sm: 560px; } ``` Należy pamiętać, że te niestandardowe właściwości CSS nie mogą być używane w media queries CSS. Poniżej znajduje się przykład błędnego użycia: ```css /* Błędne użycie. W media queries nie można używać niestandardowych właściwości CSS */ @media (min-width: var(--mdui-breakpoint-sm)) { } ``` Jeśli chcesz sprawdzić breakpoint w JavaScript, możesz użyć funkcji [`breakpoint`](/pl/docs/2/functions/breakpoint). | Niestandardowa właściwość CSS | Wartość domyślna | | ----------------------------- | ---------------- | | `--mdui-breakpoint-xs` | `0px` | | `--mdui-breakpoint-sm` | `600px` | | `--mdui-breakpoint-md` | `840px` | | `--mdui-breakpoint-lg` | `1080px` | | `--mdui-breakpoint-xl` | `1440px` | | `--mdui-breakpoint-xxl` | `1920px` | # Integracja z React Używając mdui w React, wystarczy postępować zgodnie z instrukcjami na stronie [Instalacja](/pl/docs/2/getting-started/installation#npm). ## Uwagi {#notes} Używając mdui w React istnieją pewne ograniczenia. Są to ogólne ograniczenia dotyczące używania Web Components w React, a nie ograniczenia samej biblioteki mdui. ### Obsługa zdarzeń {#event-binding} Ponieważ React nie obsługuje zdarzeń niestandardowych, podczas korzystania ze zdarzeń dostarczanych przez komponenty mdui należy najpierw uzyskać referencję do komponentu za pomocą atrybutu `ref`. Poniżej znajduje się przykład użycia zdarzeń komponentów mdui w React: ```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('przełącznik został przełączony'); }; switchRef.current.addEventListener('change', handleToggle); return () => { switchRef.current.removeEventListener('change', handleToggle); }; }, []); return ; } export default App; ``` ### Deklaracje typów TypeScript dla JSX {#jsx-typescript} Jeśli używasz mdui w plikach TypeScript (.tsx), musisz dodać deklaracje typów TypeScript. Musisz ręcznie zaimportować plik deklaracji typów mdui w pliku .d.ts projektu: ```ts /// ``` # Integracja z Vue Używając mdui w Vue, najpierw postępuj zgodnie z instrukcjami na stronie [Instalacja](/pl/docs/2/getting-started/installation#npm), a następnie wykonaj niezbędną konfigurację. ## Konfiguracja {#configuration} Musisz skonfigurować Vue, aby nie parsowało komponentów mdui jako komponentów Vue. W pliku `vite.config` ustaw opcję `compilerOptions.isCustomElement`: ```js // vite.config.js import vue from '@vitejs/plugin-vue'; export default { plugins: [ vue({ template: { compilerOptions: { // wszystkie nazwy znaczników zaczynające się od mdui- to komponenty mdui isCustomElement: (tag) => tag.startsWith('mdui-'), }, }, }), ], }; ``` Więcej informacji na temat tej konfiguracji znajdziesz w [oficjalnej dokumentacji Vue](https://pl.vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue). ## Uwagi {#notes} ### Dwukierunkowe wiązanie danych {#data-binding} Nie możesz używać `v-model` do dwukierunkowego wiązania danych na komponentach mdui. Musisz samodzielnie obsłużyć wiązanie i aktualizację danych. Na przykład: ```html ``` ### Konfiguracja eslint {#eslint} Jeśli używasz [`eslint-plugin-vue`](https://www.npmjs.com/package/eslint-plugin-vue), dodaj następującą regułę w pliku `.eslintrc.js`: ```js rules: { 'vue/no-deprecated-slot-attribute': 'off' } ``` # Integracja z Angular Używając mdui w Angularze, najpierw postępuj zgodnie z instrukcjami na stronie [Instalacja](/pl/docs/2/getting-started/installation#npm), aby ukończyć instalację, a następnie wykonaj niezbędną konfigurację. ## Konfiguracja {#configuration} Po pierwsze, musimy włączyć obsługę Web Components w Angular. Przykład: ```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 zakończeniu konfiguracji możemy importować i używać komponentów mdui w kodzie komponentów Angular: ```js import { Dialog } from 'mdui/components/dialog.js'; @Component({ selector: 'app-dialog-example', template: `
Treść okna dialogowego
` }) export class DialogExampleComponent implements OnInit { // Użyj @ViewChild, aby uzyskać referencję do elementu #dialog @ViewChild('dialog') dialog?: ElementRef; ... constructor(...) { } ngOnInit() { } ... openDialog() { // Użyj nativeElement, aby uzyskać dostęp do komponentu mdui this.dialog?.nativeElement.open = true; } } ``` # Integracja z innymi frameworkami mdui jest rozwijany przy użyciu natywnie obsługiwanych przez przeglądarki Web Components, dzięki czemu można go używać we wszystkich frameworkach webowych. Poniżej przedstawiono metody używania mdui w popularnych frameworkach. ## Aurelia {#Aurelia} Po zakończeniu instalacji zgodnie z instrukcjami na stronie [Instalacja](/pl/docs/2/getting-started/installation#npm), musisz zainstalować i skonfigurować dodatkowy pakiet (tylko dla Aurelia 2): ```bash npm install aurelia-mdui --save ``` Następnie zarejestruj go w swojej aplikacji: ```typescript import { MduiWebTask } from 'aurelia-mdui'; Aurelia.register(MduiWebTask).app(MyApp).start(); ``` **Uwaga** Proszę zgłaszać błędy na stronie [https://github.com/mreiche/aurelia-mdui](https://github.com/mreiche/aurelia-mdui) ## WebCell {#WebCell} Podczas używania mdui w [WebCell](https://web-cell.dev/) wystarczy postępować zgodnie z instrukcjami na stronie [Instalacja](/pl/docs/2/getting-started/installation#npm) – obsługa Web Components, TypeScript i JSX jest wbudowana i działa od razu po wyjęciu z pudełka. Możesz też użyć [oficjalnego szablonu GitHub](https://github.com/EasyWebApp/WebCell-mobile), aby [utworzyć nowy projekt jednym kliknięciem](https://github.com/new?template_name=WebCell-mobile&template_owner=EasyWebApp). # Komponent Awatar Awatar reprezentuje użytkownika lub przedmioty, obsługuje wiele form, w tym obrazy, ikony lub znaki. ## Sposób użycia {#usage} Zaimportuj komponent: ```js import 'mdui/components/avatar.js'; ``` Zaimportuj typ TypeScript komponentu: ```ts import type { Avatar } from 'mdui/components/avatar.js'; ``` Przykład użycia: ```html ``` ## Przykłady {#examples} ### Awatar obrazkowy {#example-src} Możesz użyć atrybutu `src`, aby wskazać link do obrazu jako awatar, lub dostarczyć element `` w domyślnym slocie jako awatar. ```html Przykład awatara obrazkowego ``` Możesz użyć atrybutu `fit`, aby zdefiniować, jak obraz ma być dopasowany do ramki kontenera, podobnie jak natywne [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). ### Awatar ikonowy {#example-icon} Możesz użyć atrybutu `icon`, aby wskazać ikonę Material Icons jako awatar, lub dostarczyć element ikony w domyślnym slocie jako awatar. ```html ``` ### Awatar znakowy {#example-char} Możesz użyć dowolnego tekstu w domyślnym slocie jako awatar. ```html A ``` ## mdui-avatar API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
src src true string

Adres URL obrazka awatara
fit fit true 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'

Jak obraz ma być dopasowany do kontenera, tak samo jak natywna właściwość object-fit. Dozwolone wartości:

  • contain: Zachowuje proporcje obrazu, treść jest skalowana proporcjonalnie
  • cover: Zachowuje proporcje obrazu, ale część treści może zostać przycięta
  • fill: Wartość domyślna, nie zachowuje proporcji obrazu, treść jest rozciągana, aby wypełnić cały kontener
  • none: Zachowuje oryginalny rozmiar obrazu, treść nie jest skalowana ani rozciągana
  • scale-down: Zachowuje proporcje obrazu, rozmiar treści jest taki sam jak mniejszy z none lub contain
icon icon true string

Nazwa ikony Material Icons dla awatara
label label true string

Alternatywny opis tekstowy dla awatara
### Slots
Nazwa Opis
(domyślny)

Niestandardowa zawartość awatara, np. tekst, element <img>, ikony itp.
### CSS Parts
Nazwa Opis
image

Element <img> komponentu, gdy awatar używa obrazu
icon

Element <mdui-icon> komponentu, gdy awatar używa ikony
### Właściwości niestandardowe CSS
Nazwa Opis
--shape-corner

Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
# Komponent Badge Badge wyświetla dynamiczne informacje, takie jak liczniki lub wskaźniki stanu. Może zawierać tekst lub liczby. ## Sposób użycia {#usage} Zaimportuj komponent: ```js import 'mdui/components/badge.js'; ``` Zaimportuj typ TypeScript komponentu: ```ts import type { Badge } from 'mdui/components/badge.js'; ``` Przykład użycia: ```html 12 ``` ## Przykłady {#examples} ### Kształt {#example-variant} Atrybut `variant` ustawia kształt badge. Gdy `variant` ma wartość `large`, wyświetlany jest duży badge. Możesz określić tekst do wyświetlenia w domyślnym slocie. ```html 99+ ``` ## mdui-badge API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
variant variant true 'small' | 'large' 'large'

Kształt Badge. Dozwolone wartości:

  • small: Mała plakietka, bez tekstu
  • large: Duża plakietka, z tekstem
### Slots
Nazwa Opis
(domyślny)

Tekst wyświetlany na plakietce
### Właściwości niestandardowe CSS
Nazwa Opis
--shape-corner

Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
# Komponent BottomAppBar Dolny pasek aplikacji wyświetla elementy nawigacyjne i inne ważne akcje na dole strony na urządzeniach mobilnych. ## Sposób użycia {#usage} Zaimportuj komponent: ```js import 'mdui/components/bottom-app-bar.js'; ``` Zaimportuj typ TypeScript komponentu: ```ts import type { BottomAppBar } from 'mdui/components/bottom-app-bar.js'; ``` Przykład użycia: (Uwaga: `style="position: relative"` w przykładzie służy tylko do demonstracji; w produkcji usuń ten styl.) ```html
``` **Uwagi:** Ten komponent domyślnie używa pozycjonowania `position: fixed` i automatycznie dodaje styl `padding-bottom` do `body`, aby zapobiec zasłanianiu treści strony przez komponent. Jednak w następujących dwóch przypadkach domyślnie używane jest pozycjonowanie `position: absolute`: 1. Gdy określony jest atrybut `scroll-target`, styl `padding-bottom` jest dodawany do elementu `scroll-target`. 2. Gdy komponent znajduje się wewnątrz komponentu [``](/pl/docs/2/components/layout). Wtedy styl `padding-bottom` nie jest dodawany. ## Przykłady {#examples} ### Umieszczenie w określonym kontenerze {#example-scroll-target} Domyślnie dolny pasek aplikacji jest wyświetlany na dole strony względem bieżącego okna. Jeśli chcesz umieścić dolny pasek aplikacji w określonym kontenerze, możesz określić atrybut `scroll-target`, którego wartością jest selektor CSS lub element DOM kontenera z przewijaną treścią. W tym przypadku dolny pasek aplikacji będzie wyświetlany względem elementu nadrzędnego (musisz samodzielnie dodać do elementu nadrzędnego style `position: relative; overflow: hidden`). ```html
Treść
``` ### Ukrywanie podczas przewijania {#example-scroll-behavior} Ustawienie atrybutu `scroll-behavior` na `hide` spowoduje ukrycie dolnego paska aplikacji podczas przewijania strony w dół i pokazanie go podczas przewijania w górę. Atrybut `scroll-threshold` ustawia, po przewinięciu ilu pikseli zaczyna się ukrywanie dolnego paska aplikacji. ```html
Treść
``` ### Stały pływający przycisk akcji {#example-fab-detach} Jeśli dolny pasek aplikacji zawiera [pływający przycisk akcji](/pl/docs/2/components/fab), możesz dodać atrybut `fab-detach`, aby podczas przewijania strony, gdy dolny pasek aplikacji jest ukryty, pływający przycisk akcji pozostał w prawym dolnym rogu strony. ```html
``` ## mdui-bottom-app-bar API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
hide hide true boolean false

Określa, czy pasek aplikacji jest ukryty.
fab-detach fabDetach true boolean false

Określa, czy odłączyć <mdui-fab> od dolnego paska aplikacji. Jeśli true, <mdui-fab> pozostaje na stronie, gdy pasek jest ukryty.
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Zachowanie podczas przewijania. Dozwolone wartości:

  • hide: Ukrywanie podczas przewijania
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Element, na którym nasłuchiwane są zdarzenia przewijania. Może to być selektor CSS, element DOM lub obiekt JQ. Domyślnie nasłuchiwane są zdarzenia przewijania okna (window).
scroll-threshold scrollThreshold true number

Odległość przewinięcia w px wymagana do aktywacji zachowania przewijania.
order order true number

Kolejność tego komponentu w układzie <mdui-layout>, sortowana od najmniejszej do największej. Domyślnie 0.
### Zdarzenia
Nazwa Opis
show

Wywoływane przed wyświetleniem. Można zapobiec wyświetleniu, wywołując event.preventDefault()
shown

Wywoływane po zakończeniu animacji wyświetlania
hide

Wywoływane przed ukryciem. Można zapobiec ukryciu, wywołując event.preventDefault()
hidden

Wywoływane po zakończeniu animacji ukrywania
### Slots
Nazwa Opis
(domyślny)

Elementy wewnątrz dolnego paska aplikacji
### Właściwości niestandardowe CSS
Nazwa Opis
--shape-corner

Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
--z-index

Wartość CSS z-index komponentu
# Komponent Przycisk Przycisk służy głównie do wykonywania akcji, takich jak wysyłanie wiadomości e-mail, udostępnianie dokumentów lub komentowanie postów. ## Sposób użycia {#usage} Zaimportuj komponent: ```js import 'mdui/components/button.js'; ``` Zaimportuj typ TypeScript komponentu: ```ts import type { Button } from 'mdui/components/button.js'; ``` Przykład użycia: ```html Przycisk ``` ## Przykłady {#examples} ### Kształt {#example-variant} Atrybut `variant` ustawia kształt przycisku. ```html Podniesiony Wypełniony Tonowany Z obramowaniem Tekstowy ``` ### Pełna szerokość {#example-full-width} Atrybut `full-width` sprawia, że przycisk zajmie całą szerokość elementu nadrzędnego. ```html Przycisk ``` ### Ikona {#example-icon} Ustawienie atrybutów `icon` i `end-icon` pozwala dodać ikony Material Icons odpowiednio po lewej i prawej stronie przycisku. Możesz również dodać elementy po lewej i prawej stronie przycisku za pomocą slotów `icon` i `end-icon`. ```html Ikona Slot ``` ### Link {#example-link} Ustawienie atrybutu `href` zmienia przycisk w link, a dodatkowo możesz użyć atrybutów związanych z linkami: `download`, `target`, `rel`. ```html Link ``` ### Stan wyłączony i ładowania {#example-disabled} Dodanie atrybutu `disabled` wyłącza przycisk; dodanie atrybutu `loading` dodaje stan ładowania. ```html Wyłączony Ładowanie Ładowanie i wyłączony ``` ## mdui-button API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
variant variant true 'elevated' | 'filled' | 'tonal' | 'outlined' | 'text' 'filled'

Wariant przycisku. Dozwolone wartości:

  • elevated: Przycisk z cieniem, odpowiedni do sytuacji, w których przycisk ma być wizualnie oddzielony od tła
  • filled: Wyrazisty wygląd, odpowiedni do kluczowych akcji w ważnych procesach, np. „Zapisz”, „Potwierdź”
  • tonal: Wygląd pośredni między filled a outlined, odpowiedni do akcji o średnim i wysokim priorytecie, np. „Dalej” w procesie
  • outlined: Przycisk z obramowaniem, odpowiedni do akcji o średnim priorytecie i pomocniczych, np. „Wstecz”
  • text: Przycisk tekstowy, odpowiedni dla akcji o najniższym priorytecie
full-width fullWidth true boolean false

Określa, czy przycisk wypełnia całą szerokość elementu nadrzędnego.
icon icon true string

Nazwa ikony Material Icons po lewej stronie. Można również ustawić za pomocą slot="icon"
end-icon endIcon true string

Nazwa ikony Material Icons po prawej stronie. Można również ustawić za pomocą slot="end-icon"
href href true string

Docelowy adres URL łącza.

Jeśli atrybut jest ustawiony, komponent jest renderowany jako element <a>, co umożliwia korzystanie z atrybutów dotyczących łączy.
download download true string

Nazwa pliku do pobrania.

Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut href.
target target true '_blank' | '_parent' | '_self' | '_top'

Sposób otwarcia łącza. Dozwolone wartości:

  • _blank: Otwiera w nowym oknie
  • _parent: Otwiera w oknie nadrzędnym
  • _self: Otwiera w bieżącej ramce
  • _top: Otwiera w całym oknie

Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut href.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Relacja między bieżącym dokumentem a dokumentem, do którego prowadzi łącze. Dozwolone wartości:

  • alternate: Alternatywna wersja bieżącego dokumentu
  • author: Autor bieżącego dokumentu lub artykułu
  • bookmark: Stałe łącze do najbliższej sekcji nadrzędnej
  • external: Dokument, do którego prowadzi łącze, nie znajduje się w tej samej witrynie co bieżący dokument
  • help: Łącze do powiązanej dokumentacji pomocy
  • license: Główna treść bieżącego dokumentu jest objęta prawami autorskimi dołączonego pliku
  • me: Bieżący dokument reprezentuje właściciela treści, do której prowadzi łącze
  • next: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest następnym dokumentem w tej sekwencji
  • nofollow: Autor lub wydawca bieżącego dokumentu nie rekomenduje dokumentu, do którego prowadzi łącze
  • noreferrer: Pomija nagłówek Referer. Efekt podobny do noopener
  • opener: Jeśli hiperłącze utworzy kontekst przeglądania najwyższego poziomu (tj. wartość atrybutu target to _blank), tworzy podrzędny kontekst przeglądania
  • prev: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest poprzednim dokumentem w tej sekwencji
  • search: Zawiera łącze do zasobu umożliwiającego przeszukiwanie bieżącego pliku i powiązanych z nim stron
  • tag: Zawiera znacznik (identyfikowany przez podany adres) mający zastosowanie do bieżącego dokumentu

Uwaga: Dostępne tylko wtedy, gdy określono atrybut href.
autofocus autofocus true boolean false

Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
tabindex tabIndex false number

Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).
disabled disabled true boolean false

Określa, czy komponent jest wyłączony.
loading loading true boolean false

Określa, czy komponent jest w stanie ładowania.
name name true string ''

Nazwa przycisku, która zostanie wysłana wraz z danymi formularza.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href.
value value true string ''

Wartość początkowa przycisku, która zostanie wysłana wraz z danymi formularza.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href.
type type true 'submit' | 'reset' | 'button' 'button'

Typ przycisku. Typ domyślny to button. Dozwolone typy:

  • submit: Kliknięcie przycisku przesyła dane formularza do serwera
  • reset: Kliknięcie przycisku resetuje wszystkie elementy formularza do ich wartości początkowych
  • button: Ten typ przycisku nie ma domyślnego zachowania

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href.
form form true string

Powiązany element <form>. Wartość tego atrybutu powinna być id elementu <form> na tej samej stronie.

Jeśli ten atrybut nie jest określony, element ten musi być elementem potomnym elementu <form>. Ten atrybut umożliwia umieszczenie elementu w dowolnym miejscu na stronie, nie tylko jako element potomny elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie określono atrybutu href.
formaction formAction true string

Określa adres URL do przesłania formularza.

Jeśli ten atrybut jest określony, zastępuje atrybut action elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie określono atrybutu href i type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Określa typ zawartości przesyłanej do serwera podczas wysyłania formularza. Dozwolone wartości:

  • application/x-www-form-urlencoded: Wartość domyślna, gdy atrybut nie jest określony
  • multipart/form-data: Używany, gdy formularz zawiera element <input type="file">
  • text/plain: Nowość w HTML5, używana do debugowania

Jeśli ten atrybut jest określony, zastępuje atrybut enctype elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie określono atrybutu href i type="submit".
formmethod formMethod true 'post' | 'get'

Określa metodę HTTP używaną do przesłania formularza. Dozwolone wartości:

  • post: Dane formularza są zawarte w treści formularza i wysyłane do serwera
  • get: Dane formularza są dołączane do adresu URI formularza za pomocą separatora ?, a wygenerowany adres URI jest wysyłany do serwera. Tej metody należy używać, gdy formularz nie powoduje skutków ubocznych i zawiera tylko znaki ASCII

Jeśli ten atrybut jest ustawiony, zastępuje atrybut method elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href i type="submit".
formnovalidate formNoValidate true boolean false

Jeśli ten atrybut jest ustawiony, formularz nie jest walidowany podczas wysyłania.

Jeśli ten atrybut jest ustawiony, zastępuje atrybut novalidate elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href i type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Określa, gdzie wyświetlić odpowiedź otrzymaną po przesłaniu formularza. Dozwolone wartości:

  • _self: Otwiera w bieżącej ramce
  • _blank: Otwiera w nowym oknie
  • _parent: Otwiera w oknie nadrzędnym
  • _top: Otwiera w całym oknie

Jeśli ten atrybut jest ustawiony, zastępuje atrybut target elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href i type="submit".
undefined validity false ValidityState

Obiekt stanu walidacji formularza, zobacz ValidityState
undefined validationMessage false string

Jeśli walidacja formularza nie powiedzie się, ten atrybut zawiera komunikat informacyjny. Jeśli walidacja się powiedzie, ten atrybut jest pustym ciągiem znaków
### Metody
Nazwa Opis
click(): void

Symuluje kliknięcie myszą na elemencie
focus(options?: FocusOptions): void

Przenosi fokus na bieżący element.

Można przekazać obiekt jako parametr, którego właściwości obejmują:

  • preventScroll: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na true.
blur(): void

Usuwa fokus z bieżącego elementu
checkValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true
reportValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true.

Jeśli walidacja się nie powiedzie, na komponencie wyświetlany jest również komunikat o niepowodzeniu walidacji.
setCustomValidity(message: string): void

Ustawia niestandardowy komunikat o błędzie. Dopóki ten tekst nie jest pusty, oznacza to, że pole nie przeszło walidacji
### Zdarzenia
Nazwa Opis
focus

Wywoływane po otrzymaniu fokusu
blur

Wywoływane po utracie fokusu
invalid

Wywoływane, gdy pole formularza nie przejdzie walidacji
### Slots
Nazwa Opis
(domyślny)

Tekst przycisku
icon

Element po lewej stronie przycisku
end-icon

Element po prawej stronie przycisku
### CSS Parts
Nazwa Opis
button

Wewnętrzny element <button> lub <a>
label

Tekst przycisku
icon

Ikona po lewej stronie przycisku
end-icon

Ikona po prawej stronie przycisku
loading

Element <mdui-circular-progress> w stanie ładowania
### Właściwości niestandardowe CSS
Nazwa Opis
--shape-corner

Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
# Komponent ButtonIcon Przycisk z ikoną służy głównie do wykonywania drugorzędnych operacji. ## Sposób użycia {#usage} Zaimportuj komponent: ```js import 'mdui/components/button-icon.js'; ``` Zaimportuj typ TypeScript komponentu: ```ts import type { ButtonIcon } from 'mdui/components/button-icon.js'; ``` Przykład użycia: ```html ``` ## Przykłady {#examples} ### Ikona {#example-icon} Atrybut `icon` określa nazwę ikony Material Icons. Możesz również określić element ikony za pomocą domyślnego slotu. ```html ``` ### Kształt {#example-variant} Atrybut `variant` ustawia kształt przycisku z ikoną. ```html ``` ### Z możliwością wyboru {#example-selectable} Dodanie atrybutu `selectable` umożliwia wybór przycisku z ikoną. ```html ``` Atrybut `selected-icon` określa nazwę ikony Material Icons dla stanu zaznaczonego. Możesz również określić element ikony dla stanu zaznaczonego za pomocą slotu `selected-icon`. ```html ``` Gdy przycisk z ikoną jest zaznaczony, atrybut `selected` staje się `true`. Możesz również dodać atrybut `selected`, aby przycisk z ikoną był domyślnie zaznaczony. ```html ``` ### Link {#example-link} Dodanie atrybutu `href` zmienia przycisk z ikoną w link, a dodatkowo możesz użyć atrybutów związanych z linkami: `download`, `target`, `rel`. ```html ``` ### Stan wyłączony i ładowania {#example-disabled} Dodanie atrybutu `disabled` wyłącza przycisk z ikoną; dodanie atrybutu `loading` dodaje stan ładowania. ```html ``` ## mdui-button-icon API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
variant variant true 'standard' | 'filled' | 'tonal' | 'outlined' 'standard'

Wariant przycisku z ikoną. Dozwolone wartości:

  • standard: Odpowiedni dla akcji o najniższym priorytecie
  • filled: Wyrazisty wygląd, odpowiedni do akcji o wysokim priorytecie
  • tonal: Wygląd pośredni między filled a outlined, odpowiedni do akcji o średnim i wysokim priorytecie
  • outlined: Odpowiedni dla akcji o średnim priorytecie
icon icon true string

Nazwa ikony Material Icons. Można również ustawić za pomocą domyślnego slotu
selected-icon selectedIcon true string

Nazwa ikony Material Icons dla stanu zaznaczonego. Można również ustawić za pomocą slot="selected-icon"
selectable selectable true boolean false

Określa, czy przycisk jest zaznaczalny.
selected selected true boolean false

Określa, czy jest zaznaczony.
href href true string

Docelowy adres URL łącza.

Jeśli atrybut jest ustawiony, komponent jest renderowany jako element <a>, co umożliwia korzystanie z atrybutów dotyczących łączy.
download download true string

Nazwa pliku do pobrania.

Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut href.
target target true '_blank' | '_parent' | '_self' | '_top'

Sposób otwarcia łącza. Dozwolone wartości:

  • _blank: Otwiera w nowym oknie
  • _parent: Otwiera w oknie nadrzędnym
  • _self: Otwiera w bieżącej ramce
  • _top: Otwiera w całym oknie

Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut href.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Relacja między bieżącym dokumentem a dokumentem, do którego prowadzi łącze. Dozwolone wartości:

  • alternate: Alternatywna wersja bieżącego dokumentu
  • author: Autor bieżącego dokumentu lub artykułu
  • bookmark: Stałe łącze do najbliższej sekcji nadrzędnej
  • external: Dokument, do którego prowadzi łącze, nie znajduje się w tej samej witrynie co bieżący dokument
  • help: Łącze do powiązanej dokumentacji pomocy
  • license: Główna treść bieżącego dokumentu jest objęta prawami autorskimi dołączonego pliku
  • me: Bieżący dokument reprezentuje właściciela treści, do której prowadzi łącze
  • next: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest następnym dokumentem w tej sekwencji
  • nofollow: Autor lub wydawca bieżącego dokumentu nie rekomenduje dokumentu, do którego prowadzi łącze
  • noreferrer: Pomija nagłówek Referer. Efekt podobny do noopener
  • opener: Jeśli hiperłącze utworzy kontekst przeglądania najwyższego poziomu (tj. wartość atrybutu target to _blank), tworzy podrzędny kontekst przeglądania
  • prev: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest poprzednim dokumentem w tej sekwencji
  • search: Zawiera łącze do zasobu umożliwiającego przeszukiwanie bieżącego pliku i powiązanych z nim stron
  • tag: Zawiera znacznik (identyfikowany przez podany adres) mający zastosowanie do bieżącego dokumentu

Uwaga: Dostępne tylko wtedy, gdy określono atrybut href.
autofocus autofocus true boolean false

Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
tabindex tabIndex false number

Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).
disabled disabled true boolean false

Określa, czy komponent jest wyłączony.
loading loading true boolean false

Określa, czy komponent jest w stanie ładowania.
name name true string ''

Nazwa przycisku, która zostanie wysłana wraz z danymi formularza.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href.
value value true string ''

Wartość początkowa przycisku, która zostanie wysłana wraz z danymi formularza.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href.
type type true 'submit' | 'reset' | 'button' 'button'

Typ przycisku. Typ domyślny to button. Dozwolone typy:

  • submit: Kliknięcie przycisku przesyła dane formularza do serwera
  • reset: Kliknięcie przycisku resetuje wszystkie elementy formularza do ich wartości początkowych
  • button: Ten typ przycisku nie ma domyślnego zachowania

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href.
form form true string

Powiązany element <form>. Wartość tego atrybutu powinna być id elementu <form> na tej samej stronie.

Jeśli ten atrybut nie jest określony, element ten musi być elementem potomnym elementu <form>. Ten atrybut umożliwia umieszczenie elementu w dowolnym miejscu na stronie, nie tylko jako element potomny elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie określono atrybutu href.
formaction formAction true string

Określa adres URL do przesłania formularza.

Jeśli ten atrybut jest określony, zastępuje atrybut action elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie określono atrybutu href i type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Określa typ zawartości przesyłanej do serwera podczas wysyłania formularza. Dozwolone wartości:

  • application/x-www-form-urlencoded: Wartość domyślna, gdy atrybut nie jest określony
  • multipart/form-data: Używany, gdy formularz zawiera element <input type="file">
  • text/plain: Nowość w HTML5, używana do debugowania

Jeśli ten atrybut jest określony, zastępuje atrybut enctype elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie określono atrybutu href i type="submit".
formmethod formMethod true 'post' | 'get'

Określa metodę HTTP używaną do przesłania formularza. Dozwolone wartości:

  • post: Dane formularza są zawarte w treści formularza i wysyłane do serwera
  • get: Dane formularza są dołączane do adresu URI formularza za pomocą separatora ?, a wygenerowany adres URI jest wysyłany do serwera. Tej metody należy używać, gdy formularz nie powoduje skutków ubocznych i zawiera tylko znaki ASCII

Jeśli ten atrybut jest ustawiony, zastępuje atrybut method elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href i type="submit".
formnovalidate formNoValidate true boolean false

Jeśli ten atrybut jest ustawiony, formularz nie jest walidowany podczas wysyłania.

Jeśli ten atrybut jest ustawiony, zastępuje atrybut novalidate elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href i type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Określa, gdzie wyświetlić odpowiedź otrzymaną po przesłaniu formularza. Dozwolone wartości:

  • _self: Otwiera w bieżącej ramce
  • _blank: Otwiera w nowym oknie
  • _parent: Otwiera w oknie nadrzędnym
  • _top: Otwiera w całym oknie

Jeśli ten atrybut jest ustawiony, zastępuje atrybut target elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href i type="submit".
undefined validity false ValidityState

Obiekt stanu walidacji formularza, zobacz ValidityState
undefined validationMessage false string

Jeśli walidacja formularza nie powiedzie się, ten atrybut zawiera komunikat informacyjny. Jeśli walidacja się powiedzie, ten atrybut jest pustym ciągiem znaków
### Metody
Nazwa Opis
click(): void

Symuluje kliknięcie myszą na elemencie
focus(options?: FocusOptions): void

Przenosi fokus na bieżący element.

Można przekazać obiekt jako parametr, którego właściwości obejmują:

  • preventScroll: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na true.
blur(): void

Usuwa fokus z bieżącego elementu
checkValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true
reportValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true.

Jeśli walidacja się nie powiedzie, na komponencie wyświetlany jest również komunikat o niepowodzeniu walidacji.
setCustomValidity(message: string): void

Ustawia niestandardowy komunikat o błędzie. Dopóki ten tekst nie jest pusty, oznacza to, że pole nie przeszło walidacji
### Zdarzenia
Nazwa Opis
focus

Wywoływane po otrzymaniu fokusu
blur

Wywoływane po utracie fokusu
change

Wywoływane po zmianie stanu zaznaczenia
invalid

Wywoływane, gdy pole formularza nie przejdzie walidacji
### Slots
Nazwa Opis
(domyślny)

Komponent ikony
selected-icon

Element ikony wyświetlany w stanie zaznaczonym
### CSS Parts
Nazwa Opis
button

Wewnętrzny element <button> lub <a>
icon

Ikona w stanie niezaznaczonym
selected-icon

Ikona w stanie zaznaczonym
loading

Element <mdui-circular-progress> w stanie ładowania
### Właściwości niestandardowe CSS
Nazwa Opis
--shape-corner

Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
# Komponent Karta Karta jest wszechstronnym komponentem służącym do grupowania treści i akcji związanych z jednym tematem. ## Sposób użycia {#usage} Zaimportuj komponent: ```js import 'mdui/components/card.js'; ``` Zaimportuj typ TypeScript komponentu: ```ts import type { Card } from 'mdui/components/card.js'; ``` Przykład użycia: ```html Karta ``` ## Przykłady {#examples} ### Kształt {#example-variant} Atrybut `variant` ustawia kształt karty. ```html ``` ### Klikalna {#example-clickable} Dodanie atrybutu `clickable` sprawia, że karta staje się klikalna, dodaje efekt najechania kursorem i efekt fali po kliknięciu. ```html ``` ### Link {#example-link} Dodanie atrybutu `href` zmienia kartę w link, a dodatkowo możesz użyć atrybutów związanych z linkami: `download`, `target`, `rel`. ```html ``` ### Stan wyłączony {#example-disabled} Dodanie atrybutu `disabled` wyłącza kartę. ```html ``` ## mdui-card API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
variant variant true 'elevated' | 'filled' | 'outlined' 'elevated'

Wariant karty. Dozwolone wartości:

  • elevated: Karta z cieniem, wyższy stopień wizualnego oddzielenia od tła
  • filled: Karta z wypełnieniem kolorem, niższy stopień wizualnego oddzielenia od tła
  • outlined: Karta z obramowaniem, najwyższy stopień wizualnego oddzielenia od tła
clickable clickable true boolean false

Określa, czy karta jest klikalna. Jeśli true, karta reaguje na najechanie i kliknięcie (efekt fali).
disabled disabled true boolean false

Określa, czy karta jest wyłączona.
href href true string

Docelowy adres URL łącza.

Jeśli atrybut jest ustawiony, komponent jest renderowany jako element <a>, co umożliwia korzystanie z atrybutów dotyczących łączy.
download download true string

Nazwa pliku do pobrania.

Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut href.
target target true '_blank' | '_parent' | '_self' | '_top'

Sposób otwarcia łącza. Dozwolone wartości:

  • _blank: Otwiera w nowym oknie
  • _parent: Otwiera w oknie nadrzędnym
  • _self: Otwiera w bieżącej ramce
  • _top: Otwiera w całym oknie

Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut href.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Relacja między bieżącym dokumentem a dokumentem, do którego prowadzi łącze. Dozwolone wartości:

  • alternate: Alternatywna wersja bieżącego dokumentu
  • author: Autor bieżącego dokumentu lub artykułu
  • bookmark: Stałe łącze do najbliższej sekcji nadrzędnej
  • external: Dokument, do którego prowadzi łącze, nie znajduje się w tej samej witrynie co bieżący dokument
  • help: Łącze do powiązanej dokumentacji pomocy
  • license: Główna treść bieżącego dokumentu jest objęta prawami autorskimi dołączonego pliku
  • me: Bieżący dokument reprezentuje właściciela treści, do której prowadzi łącze
  • next: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest następnym dokumentem w tej sekwencji
  • nofollow: Autor lub wydawca bieżącego dokumentu nie rekomenduje dokumentu, do którego prowadzi łącze
  • noreferrer: Pomija nagłówek Referer. Efekt podobny do noopener
  • opener: Jeśli hiperłącze utworzy kontekst przeglądania najwyższego poziomu (tj. wartość atrybutu target to _blank), tworzy podrzędny kontekst przeglądania
  • prev: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest poprzednim dokumentem w tej sekwencji
  • search: Zawiera łącze do zasobu umożliwiającego przeszukiwanie bieżącego pliku i powiązanych z nim stron
  • tag: Zawiera znacznik (identyfikowany przez podany adres) mający zastosowanie do bieżącego dokumentu

Uwaga: Dostępne tylko wtedy, gdy określono atrybut href.
autofocus autofocus true boolean false

Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
tabindex tabIndex false number

Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).
### Metody
Nazwa Opis
click(): void

Symuluje kliknięcie myszą na elemencie
focus(options?: FocusOptions): void

Przenosi fokus na bieżący element.

Można przekazać obiekt jako parametr, którego właściwości obejmują:

  • preventScroll: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na true.
blur(): void

Usuwa fokus z bieżącego elementu
### Zdarzenia
Nazwa Opis
focus

Wywoływane po otrzymaniu fokusu
blur

Wywoływane po utracie fokusu
### Slots
Nazwa Opis
(domyślny)

Treść karty
### Właściwości niestandardowe CSS
Nazwa Opis
--shape-corner

Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
# Komponent Checkbox Checkbox umożliwia wybranie jednej lub wielu opcji z zestawu lub przełączenie stanu włącz/wyłącz dla pojedynczej opcji. ## Sposób użycia {#usage} Zaimportuj komponent: ```js import 'mdui/components/checkbox.js'; ``` Zaimportuj typ TypeScript komponentu: ```ts import type { Checkbox } from 'mdui/components/checkbox.js'; ``` Przykład użycia: ```html Checkbox ``` ## Przykłady {#examples} ### Stan zaznaczenia {#example-checked} Gdy checkbox jest zaznaczony, atrybut `checked` ma wartość `true`. Dodanie atrybutu `checked` sprawia, że checkbox jest domyślnie zaznaczony. ```html Checkbox ``` ### Stan wyłączony {#example-disabled} Dodanie atrybutu `disabled` wyłącza checkbox. ```html Checkbox Checkbox ``` ### Stan nieokreślony {#example-indeterminate} Dodanie atrybutu `indeterminate` oznacza, że checkbox jest w stanie nieokreślonym. ```html Checkbox ``` ### Ikona {#example-icon} Za pomocą atrybutów `unchecked-icon`, `checked-icon`, `indeterminate-icon` można ustawić odpowiednio ikony Material Icons dla stanu niezaznaczonego, zaznaczonego i nieokreślonego. Można je również ustawić za pomocą slotów `unchecked-icon`, `checked-icon`, `indeterminate-icon`. ```html Checkbox Checkbox
Checkbox Checkbox ``` ## mdui-checkbox API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
disabled disabled true boolean false

Określa, czy checkbox jest wyłączony.
checked checked true boolean false

Określa, czy checkbox jest zaznaczony.
undefined defaultChecked false boolean false

Domyślny stan zaznaczenia. Po zresetowaniu formularza zostanie przywrócony do tego stanu. Ten atrybut można ustawić tylko za pomocą właściwości JavaScript
indeterminate indeterminate true boolean false

Określa, czy checkbox jest w stanie nieokreślonym.
required required true boolean false

Określa, czy zaznaczenie tego checkboxa jest wymagane podczas przesyłania formularza.
form form true string

Powiązany element <form>. Wartość tego atrybutu powinna być id elementu <form> na tej samej stronie.

Jeśli ten atrybut nie jest określony, element ten musi być elementem potomnym elementu <form>. Ten atrybut umożliwia umieszczenie elementu w dowolnym miejscu na stronie, nie tylko jako element potomny elementu <form>.
name name true string ''

Nazwa checkboxa, która zostanie wysłana wraz z danymi formularza
value value true string 'on'

Wartość checkboxa, która zostanie wysłana wraz z danymi formularza
unchecked-icon uncheckedIcon true string

Nazwa ikony Material Icons dla stanu niezaznaczonego. Można również ustawić za pomocą slot="unchecked-icon"
checked-icon checkedIcon true string

Nazwa ikony Material Icons dla stanu zaznaczonego. Można również ustawić za pomocą slot="checked-icon"
indeterminate-icon indeterminateIcon true string

Nazwa ikony Material Icons dla stanu nieokreślonego. Można również ustawić za pomocą slot="indeterminate-icon"
undefined validity false ValidityState

Obiekt stanu walidacji formularza, zobacz ValidityState
undefined validationMessage false string

Jeśli walidacja formularza nie powiedzie się, ten atrybut zawiera komunikat informacyjny. Jeśli walidacja się powiedzie, ten atrybut jest pustym ciągiem znaków
autofocus autofocus true boolean false

Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
tabindex tabIndex false number

Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).
### Metody
Nazwa Opis
checkValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true
reportValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true.

Jeśli walidacja się nie powiedzie, na komponencie wyświetlany jest również komunikat o niepowodzeniu walidacji.
setCustomValidity(message: string): void

Ustawia niestandardowy komunikat o błędzie. Dopóki ten tekst nie jest pusty, oznacza to, że pole nie przeszło walidacji
click(): void

Symuluje kliknięcie myszą na elemencie
focus(options?: FocusOptions): void

Przenosi fokus na bieżący element.

Można przekazać obiekt jako parametr, którego właściwości obejmują:

  • preventScroll: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na true.
blur(): void

Usuwa fokus z bieżącego elementu
### Zdarzenia
Nazwa Opis
focus

Wywoływane po otrzymaniu fokusu
blur

Wywoływane po utracie fokusu
change

Wywoływane po zmianie stanu zaznaczenia
input

Wywoływane po zmianie stanu zaznaczenia
invalid

Wywoływane, gdy pole formularza nie przejdzie walidacji
### Slots
Nazwa Opis
(domyślny)

Tekst checkboxa
unchecked-icon

Ikona dla stanu niezaznaczonego
checked-icon

Ikona dla stanu zaznaczonego
indeterminate-icon

Ikona dla stanu nieokreślonego
### CSS Parts
Nazwa Opis
control

Kontener ikony po lewej stronie
unchecked-icon

Ikona dla stanu niezaznaczonego
checked-icon

Ikona dla stanu zaznaczonego
indeterminate-icon

Ikona dla stanu nieokreślonego
label

Tekst checkboxa
# Komponent Chip Komponent Chip pomaga użytkownikowi w wprowadzaniu informacji, dokonywaniu wyborów, filtrowaniu treści lub wykonywaniu powiązanych operacji. ## Sposób użycia {#usage} Zaimportuj komponent: ```js import 'mdui/components/chip.js'; ``` Zaimportuj typ TypeScript komponentu: ```ts import type { Chip } from 'mdui/components/chip.js'; ``` Przykład użycia: ```html Chip ``` ## Przykłady {#examples} ### Kształt {#example-variant} Atrybut `variant` ustawia kształt chipa. Chip ma 4 kształty, możesz wybrać w zależności od przeznaczenia: - `assist`: Służy do wyświetlania pomocniczych działań związanych z bieżącym kontekstem. Na przykład na stronie zamawiania jedzenia, zapewnia funkcje takie jak udostępnianie, dodawanie do ulubionych. - `filter`: Służy do filtrowania treści. Na przykład na stronie wyników wyszukiwania, do filtrowania wyników wyszukiwania. - `input`: Służy do reprezentowania fragmentów informacji wprowadzonych przez użytkownika. Na przykład kontakty w polu „Do” w Gmailu. - `suggestion`: Służy do dostarczania dynamicznie generowanych rekomendacji w celu uproszczenia działań użytkownika. Na przykład w aplikacji do czatu, gdy aplikacja sugeruje wiadomość, którą użytkownik może chcieć wysłać. ```html Assist Filter Input Suggestion ``` ### Cień {#example-elevated} Dodanie atrybutu `elevated` sprawia, że chip ma cień. ```html Chip ``` ### Ikona {#example-icon} Dodanie atrybutów `icon` i `end-icon` pozwala dodać ikony Material Icons odpowiednio po lewej i prawej stronie chipa. Możesz również dodać elementy po lewej i prawej stronie chipa za pomocą slotów `icon` i `end-icon`. ```html Ikona Ikona końcowa Slot ``` ### Link {#example-link} Dodanie atrybutu `href` zmienia chip w link, a dodatkowo możesz użyć atrybutów związanych z linkami: `download`, `target`, `rel`. ```html Link ``` ### Stan wyłączony i ładowania {#example-disabled} Dodanie atrybutu `disabled` wyłącza chip; dodanie atrybutu `loading` dodaje stan ładowania. ```html Wyłączony Ładowanie Ładowanie i wyłączony ``` ### Z możliwością wyboru {#example-selectable} Dodanie atrybutu `selectable` umożliwia wybór chipa. ```html Chip ``` Atrybut `selected-icon` określa nazwę ikony Material Icons dla stanu zaznaczonego. Możesz również określić element ikony dla stanu zaznaczonego za pomocą slotu `selected-icon`. ```html Chip Chip ``` Gdy chip jest zaznaczony, atrybut `selected` staje się `true`. Możesz również dodać atrybut `selected`, aby chip był domyślnie zaznaczony. ```html Chip ``` ### Możliwość usunięcia {#example-deletable} Dodanie atrybutu `deletable` spowoduje pojawienie się ikony usuwania po prawej stronie chipa. Kliknięcie tej ikony wyzwala zdarzenie `delete`. Możesz określić nazwę ikony Material Icons dla ikony usuwania za pomocą atrybutu `delete-icon` lub określić element ikony usuwania za pomocą slotu `delete-icon`. ```html Chip Chip Chip ``` ## mdui-chip API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
variant variant true 'assist' | 'filter' | 'input' | 'suggestion' 'assist'

Wariant chipa. Dozwolone wartości:

  • assist: Służy do prezentowania pomocniczych akcji związanych z bieżącym kontekstem, np. udostępnianie, dodawanie do ulubionych na stronie zamawiania posiłków
  • filter: Służy do filtrowania treści, np. filtrowanie wyników wyszukiwania na stronie wyników
  • input: Służy do reprezentowania fragmentów informacji wprowadzonych przez użytkownika, np. kontaktów w polu „Odbiorca” w Gmailu
  • suggestion: Służy do dostarczania dynamicznie generowanych rekomendacji w celu uproszczenia działań użytkownika, np. przewidywanie wiadomości, które użytkownik może chcieć wysłać w aplikacji do czatu
elevated elevated true boolean false

Określa, czy wyświetlać cień.
selectable selectable true boolean false

Określa, czy można zaznaczyć.
selected selected true boolean false

Określa, czy jest zaznaczony.
deletable deletable true boolean false

Określa, czy chip można usunąć. Gdy true, po prawej stronie chipa pojawi się ikona usuwania
icon icon true string

Nazwa ikony Material Icons po lewej stronie. Można również ustawić za pomocą slot="icon"
selected-icon selectedIcon true string

Nazwa ikony Material Icons po lewej stronie w stanie zaznaczonym. Można również ustawić za pomocą slot="selected-icon"
end-icon endIcon true string

Nazwa ikony Material Icons po prawej stronie. Można również ustawić za pomocą slot="end-icon"
delete-icon deleteIcon true string

Nazwa ikony Material Icons dla ikony usuwania po prawej stronie, gdy chip jest usuwalny. Można również ustawić za pomocą slot="delete-icon"
href href true string

Docelowy adres URL łącza.

Jeśli atrybut jest ustawiony, komponent jest renderowany jako element <a>, co umożliwia korzystanie z atrybutów dotyczących łączy.
download download true string

Nazwa pliku do pobrania.

Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut href.
target target true '_blank' | '_parent' | '_self' | '_top'

Sposób otwarcia łącza. Dozwolone wartości:

  • _blank: Otwiera w nowym oknie
  • _parent: Otwiera w oknie nadrzędnym
  • _self: Otwiera w bieżącej ramce
  • _top: Otwiera w całym oknie

Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut href.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Relacja między bieżącym dokumentem a dokumentem, do którego prowadzi łącze. Dozwolone wartości:

  • alternate: Alternatywna wersja bieżącego dokumentu
  • author: Autor bieżącego dokumentu lub artykułu
  • bookmark: Stałe łącze do najbliższej sekcji nadrzędnej
  • external: Dokument, do którego prowadzi łącze, nie znajduje się w tej samej witrynie co bieżący dokument
  • help: Łącze do powiązanej dokumentacji pomocy
  • license: Główna treść bieżącego dokumentu jest objęta prawami autorskimi dołączonego pliku
  • me: Bieżący dokument reprezentuje właściciela treści, do której prowadzi łącze
  • next: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest następnym dokumentem w tej sekwencji
  • nofollow: Autor lub wydawca bieżącego dokumentu nie rekomenduje dokumentu, do którego prowadzi łącze
  • noreferrer: Pomija nagłówek Referer. Efekt podobny do noopener
  • opener: Jeśli hiperłącze utworzy kontekst przeglądania najwyższego poziomu (tj. wartość atrybutu target to _blank), tworzy podrzędny kontekst przeglądania
  • prev: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest poprzednim dokumentem w tej sekwencji
  • search: Zawiera łącze do zasobu umożliwiającego przeszukiwanie bieżącego pliku i powiązanych z nim stron
  • tag: Zawiera znacznik (identyfikowany przez podany adres) mający zastosowanie do bieżącego dokumentu

Uwaga: Dostępne tylko wtedy, gdy określono atrybut href.
autofocus autofocus true boolean false

Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
tabindex tabIndex false number

Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).
disabled disabled true boolean false

Określa, czy komponent jest wyłączony.
loading loading true boolean false

Określa, czy komponent jest w stanie ładowania.
name name true string ''

Nazwa przycisku, która zostanie wysłana wraz z danymi formularza.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href.
value value true string ''

Wartość początkowa przycisku, która zostanie wysłana wraz z danymi formularza.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href.
type type true 'submit' | 'reset' | 'button' 'button'

Typ przycisku. Typ domyślny to button. Dozwolone typy:

  • submit: Kliknięcie przycisku przesyła dane formularza do serwera
  • reset: Kliknięcie przycisku resetuje wszystkie elementy formularza do ich wartości początkowych
  • button: Ten typ przycisku nie ma domyślnego zachowania

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href.
form form true string

Powiązany element <form>. Wartość tego atrybutu powinna być id elementu <form> na tej samej stronie.

Jeśli ten atrybut nie jest określony, element ten musi być elementem potomnym elementu <form>. Ten atrybut umożliwia umieszczenie elementu w dowolnym miejscu na stronie, nie tylko jako element potomny elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie określono atrybutu href.
formaction formAction true string

Określa adres URL do przesłania formularza.

Jeśli ten atrybut jest określony, zastępuje atrybut action elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie określono atrybutu href i type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Określa typ zawartości przesyłanej do serwera podczas wysyłania formularza. Dozwolone wartości:

  • application/x-www-form-urlencoded: Wartość domyślna, gdy atrybut nie jest określony
  • multipart/form-data: Używany, gdy formularz zawiera element <input type="file">
  • text/plain: Nowość w HTML5, używana do debugowania

Jeśli ten atrybut jest określony, zastępuje atrybut enctype elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie określono atrybutu href i type="submit".
formmethod formMethod true 'post' | 'get'

Określa metodę HTTP używaną do przesłania formularza. Dozwolone wartości:

  • post: Dane formularza są zawarte w treści formularza i wysyłane do serwera
  • get: Dane formularza są dołączane do adresu URI formularza za pomocą separatora ?, a wygenerowany adres URI jest wysyłany do serwera. Tej metody należy używać, gdy formularz nie powoduje skutków ubocznych i zawiera tylko znaki ASCII

Jeśli ten atrybut jest ustawiony, zastępuje atrybut method elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href i type="submit".
formnovalidate formNoValidate true boolean false

Jeśli ten atrybut jest ustawiony, formularz nie jest walidowany podczas wysyłania.

Jeśli ten atrybut jest ustawiony, zastępuje atrybut novalidate elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href i type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Określa, gdzie wyświetlić odpowiedź otrzymaną po przesłaniu formularza. Dozwolone wartości:

  • _self: Otwiera w bieżącej ramce
  • _blank: Otwiera w nowym oknie
  • _parent: Otwiera w oknie nadrzędnym
  • _top: Otwiera w całym oknie

Jeśli ten atrybut jest ustawiony, zastępuje atrybut target elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href i type="submit".
undefined validity false ValidityState

Obiekt stanu walidacji formularza, zobacz ValidityState
undefined validationMessage false string

Jeśli walidacja formularza nie powiedzie się, ten atrybut zawiera komunikat informacyjny. Jeśli walidacja się powiedzie, ten atrybut jest pustym ciągiem znaków
### Metody
Nazwa Opis
click(): void

Symuluje kliknięcie myszą na elemencie
focus(options?: FocusOptions): void

Przenosi fokus na bieżący element.

Można przekazać obiekt jako parametr, którego właściwości obejmują:

  • preventScroll: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na true.
blur(): void

Usuwa fokus z bieżącego elementu
checkValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true
reportValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true.

Jeśli walidacja się nie powiedzie, na komponencie wyświetlany jest również komunikat o niepowodzeniu walidacji.
setCustomValidity(message: string): void

Ustawia niestandardowy komunikat o błędzie. Dopóki ten tekst nie jest pusty, oznacza to, że pole nie przeszło walidacji
### Zdarzenia
Nazwa Opis
focus

Wywoływane po otrzymaniu fokusu
blur

Wywoływane po utracie fokusu
invalid

Wywoływane, gdy pole formularza nie przejdzie walidacji
change

Wywoływane po zmianie stanu zaznaczenia
delete

Wywoływane po kliknięciu ikony usuwania
### Slots
Nazwa Opis
(domyślny)

Tekst chipa
icon

Element po lewej stronie
end-icon

Element po prawej stronie
selected-icon

Element po lewej stronie w stanie zaznaczonym
delete-icon

Element usuwania po prawej stronie, gdy chip jest usuwalny
### CSS Parts
Nazwa Opis
button

Wewnętrzny element <button> lub <a>
label

Tekst chipa
icon

Ikona po lewej stronie
end-icon

Ikona po prawej stronie
selected-icon

Ikona po lewej stronie w stanie zaznaczonym
delete-icon

Ikona usuwania po prawej stronie, gdy chip jest usuwalny
loading

Element <mdui-circular-progress> w stanie ładowania
### Właściwości niestandardowe CSS
Nazwa Opis
--shape-corner

Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
# Komponent CircularProgress Okrągły wskaźnik postępu wyświetla postęp zadania, na przykład ładowania danych lub wysyłania formularza. ## Sposób użycia {#usage} Zaimportuj komponent: ```js import 'mdui/components/circular-progress.js'; ``` Zaimportuj typ TypeScript komponentu: ```ts import type { CircularProgress } from 'mdui/components/circular-progress.js'; ``` Przykład użycia: ```html ``` ## Przykłady {#examples} ### Stały postęp {#example-value} Okrągły wskaźnik postępu domyślnie ma nieokreślony postęp. Możesz ustawić bieżący postęp za pomocą atrybutu `value`. Domyślna maksymalna wartość postępu to `1`. ```html ``` Maksymalną wartość postępu można ustawić za pomocą atrybutu `max`. ```html ``` ## mdui-circular-progress API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
max max true number 1

Maksymalna wartość wskaźnika postępu. Domyślnie 1
value value false number

Bieżąca wartość wskaźnika postępu. Jeśli wartość nie jest określona, wyświetlany jest stan nieokreślony
# Komponent Collapse Komponent panelu zwijanego grupuje i ukrywa złożone obszary treści, aby zachować porządek na stronie. Należy pamiętać, że sam komponent panelu zwijanego nie zawiera żadnych stylów; musisz samodzielnie dodać style lub użyć go razem z innymi komponentami. ## Sposób użycia {#usage} Zaimportuj komponenty: ```js import 'mdui/components/collapse.js'; import 'mdui/components/collapse-item.js'; ``` Zaimportuj typy TypeScript komponentów: ```ts import type { Collapse } from 'mdui/components/collapse.js'; import type { CollapseItem } from 'mdui/components/collapse-item.js'; ``` Przykład użycia: ```html pierwsza treść druga treść ``` ## Przykłady {#examples} ### Tytuł i treść panelu {#example-header} Za pomocą atrybutu `header` komponentu `` można ustawić tekst nagłówka panelu. Można również użyć slotu `header` do określenia elementu nagłówka panelu. Domyślny slot komponentu służy do treści panelu. ```html Pozycja 1
Pozycja 1 - element podrzędny
Pozycja 2
Pozycja 2 - element podrzędny
``` ### Tryb akordeonu {#example-accordion} Dodanie atrybutu `accordion` do komponentu `` włącza tryb akordeonu, dzięki czemu tylko jeden panel może być otwarty jednocześnie. ```html Pozycja 1
Pozycja 1 - element podrzędny
Pozycja 2
Pozycja 2 - element podrzędny
``` ### Ustawianie aktywnego panelu {#example-value} Za pomocą atrybutu `value` komponentu `` możesz pobrać aktualnie otwarty panel lub ustawić panel, który ma być otwarty. W trybie akordeonu wartością atrybutu `value` jest ciąg znaków. Możesz go obsługiwać za pomocą atrybutu HTML lub właściwości JavaScript. W trybie nieakordeonowym wartością atrybutu `value` jest tablica, którą można obsługiwać tylko za pomocą właściwości JavaScript. ```html Tryb akordeonu Pozycja 1
Pozycja 1 - element podrzędny
Pozycja 2
Pozycja 2 - element podrzędny
Tryb nieakordeonowy Pozycja 1
Pozycja 1 - element podrzędny
Pozycja 2
Pozycja 2 - element podrzędny
``` ### Stan wyłączony {#example-disabled} Dodanie atrybutu `disabled` do komponentu `` wyłącza całą grupę paneli zwijanych. Podobnie, dodanie atrybutu `disabled` do komponentu `` wyłącza określony panel zwijany. ```html Wszystkie wyłączone Pozycja 1
Pozycja 1 - element podrzędny
Pozycja 2
Pozycja 2 - element podrzędny
Wyłączony pierwszy panel Pozycja 1
Pozycja 1 - element podrzędny
Pozycja 2
Pozycja 2 - element podrzędny
``` ### Element wyzwalający zwijanie {#example-trigger} Domyślnie kliknięcie w dowolny obszar nagłówka panelu powoduje zwinięcie/rozwiniecie. Możesz określić element wyzwalający zwijanie za pomocą atrybutu `trigger` komponentu ``. Atrybut `trigger` może być selektorem CSS lub elementem DOM. ```html Pozycja 1
Pozycja 1 - element podrzędny
``` ## mdui-collapse-item API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
value value true string

Wartość tego elementu panelu zwijanego
header header true string

Tekst nagłówka tego elementu panelu zwijanego
disabled disabled true boolean false

Określa, czy ten element panelu zwijanego jest wyłączony.
trigger trigger false string | HTMLElement | JQ<HTMLElement>

Kliknięcie tego elementu powoduje zwinięcie/rozwinięcie. Wartością może być selektor CSS, element DOM lub obiekt JQ. Domyślnie kliknięcie całego obszaru nagłówka powoduje zwinięcie/rozwinięcie
### Zdarzenia
Nazwa Opis
open

Wywoływane przed otwarciem
opened

Wywoływane po zakończeniu animacji otwierania
close

Wywoływane przed zamknięciem
closed

Wywoływane po zakończeniu animacji zamykania
### Slots
Nazwa Opis
(domyślny)

Treść główna elementu panelu zwijanego
header

Treść nagłówka elementu panelu zwijanego
### CSS Parts
Nazwa Opis
header

Treść nagłówka panelu zwijanego
body

Treść główna panelu zwijanego
## mdui-collapse API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
accordion accordion true boolean false

Określa, czy włączyć tryb akordeonu.
value value false string | string[]

Wartość aktualnie rozwiniętego <mdui-collapse-item>

Uwaga: Atrybut HTML tej właściwości jest zawsze ciągiem znaków i można ustawić wartość początkową tylko wtedy, gdy accordion ma wartość true; wartość właściwości JavaScript jest ciągiem znaków, gdy accordion ma wartość true, a tablicą ciągów znaków, gdy accordion ma wartość false. Dlatego gdy accordion ma wartość false, tę wartość można zmienić tylko poprzez modyfikację wartości właściwości JavaScript.
disabled disabled true boolean false

Określa, czy panel zwijany jest wyłączony.
### Zdarzenia
Nazwa Opis
change

Wywoływane, gdy zmienia się aktualnie rozwinięty element panelu zwijanego
### Slots
Nazwa Opis
(domyślny)

Komponent <mdui-collapse-item>
# Komponent Dialog Okno dialogowe wyświetla ważne powiadomienia podczas interakcji użytkownika. Oprócz bezpośredniego używania tego komponentu, mdui udostępnia cztery funkcje: [`mdui.dialog`](/pl/docs/2/functions/dialog), [`mdui.alert`](/pl/docs/2/functions/alert), [`mdui.confirm`](/pl/docs/2/functions/confirm), [`mdui.prompt`](/pl/docs/2/functions/prompt). Funkcje te upraszczają korzystanie z komponentu Dialog. ## Sposób użycia {#usage} Zaimportuj komponent: ```js import 'mdui/components/dialog.js'; ``` Zaimportuj typ TypeScript komponentu: ```ts import type { Dialog } from 'mdui/components/dialog.js'; ``` Przykład użycia: ```html Dialog Zamknij Otwórz okno dialogowe ``` ## Przykłady {#examples} ### Zamknięcie po kliknięciu na osłonie {#example-close-on-overlay-click} Dodanie atrybutu `close-on-overlay-click` zamknie okno dialogowe po kliknięciu na osłonę. ```html Dialog Otwórz okno dialogowe ``` ### Zamknięcie po naciśnięciu klawisza ESC {#example-close-on-esc} Dodanie atrybutu `close-on-esc` zamknie okno dialogowe po naciśnięciu klawisza ESC. ```html Dialog Otwórz okno dialogowe ``` ### Pełny ekran {#example-fullscreen} Dodanie atrybutu `fullscreen` wyświetli okno dialogowe na pełnym ekranie. ```html Dialog Zamknij Otwórz okno dialogowe ``` ### Ikona {#example-icon} Ustawienie atrybutu `icon` spowoduje dodanie ikony Material Icons nad oknem dialogowym. ```html Dialog Otwórz okno dialogowe ``` Możesz również dodać element ikony nad oknem dialogowym za pomocą slotu `icon`. ```html Dialog Otwórz okno dialogowe ``` ### Tytuł i opis {#example-headline} Ustaw tytuł i opis okna dialogowego za pomocą atrybutów `headline` i `description`. ```html Otwórz okno dialogowe ``` Możesz również ustawić elementy tytułu i opisu za pomocą slotów `headline` i `description`. ```html Usunąć wybrane obrazy? Obrazy zostaną trwale usunięte z Twojego konta i wszystkich synchronizowanych urządzeń. Otwórz okno dialogowe ``` ### Przyciski akcji na dole {#example-action} Możesz dodać przyciski akcji na dole za pomocą slotu `action`. ```html Anuluj Usuń Otwórz okno dialogowe ``` Dodanie atrybutu `stacked-actions` spowoduje ułożenie przycisków akcji na dole w pionie. ```html Włącz przyspieszenie Nie, dziękuję Otwórz okno dialogowe ``` ### Treść na górze {#example-header} Możesz ustawić treść na górze okna dialogowego za pomocą slotu `header`. ```html Tytuł Zapisz
Otwórz okno dialogowe ``` ## mdui-dialog API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
icon icon true string

Nazwa ikony Material Icons u góry. Można również ustawić za pomocą slot="icon"
headline headline true string

Tytuł. Można również ustawić za pomocą slot="headline"
description description true string

Tekst pod tytułem. Można również ustawić za pomocą slot="description"
open open true boolean false

Określa, czy okno dialogowe jest otwarte.
fullscreen fullscreen true boolean false

Określa, czy wyświetlić okno dialogowe na pełnym ekranie.
close-on-esc closeOnEsc true boolean false

Określa, czy klawisz ESC zamyka okno dialogowe.
close-on-overlay-click closeOnOverlayClick true boolean false

Określa, czy kliknięcie nakładki zamyka okno dialogowe.
stacked-actions stackedActions true boolean false

Określa, czy przyciski akcji mają być ułożone pionowo.
### Zdarzenia
Nazwa Opis
open

Wywoływane przed otwarciem okna dialogowego. Można zapobiec otwarciu, wywołując event.preventDefault()
opened

Wywoływane po zakończeniu animacji otwierania okna dialogowego
close

Wywoływane przed zamknięciem okna dialogowego. Można zapobiec zamknięciu, wywołując event.preventDefault()
closed

Wywoływane po zakończeniu animacji zamykania okna dialogowego
overlay-click

Wywoływane po kliknięciu warstwy nakładki
### Slots
Nazwa Opis
header

Element u góry, domyślnie zawiera slot icon i headline
icon

Ikona u góry
headline

Tytuł u góry
description

Tekst pod tytułem
(domyślny)

Główna treść okna dialogowego
action

Elementy na pasku akcji na dole
### CSS Parts
Nazwa Opis
overlay

Warstwa nakładki
panel

Kontener okna dialogowego
header

Część nagłówkowa okna dialogowego, zawiera ikonę i nagłówek
icon

Ikona u góry, znajdująca się w nagłówku
headline

Tytuł u góry, znajdujący się w nagłówku
body

Część główna okna dialogowego
description

Część z tekstem dodatkowym, znajdująca się w części głównej
action

Przyciski akcji na dole
### Właściwości niestandardowe CSS
Nazwa Opis
--shape-corner

Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
--z-index

Wartość CSS z-index komponentu
# Komponent Divider Separator to cienka linia grupująca treść w listach i kontenerach. ## Sposób użycia {#usage} Zaimportuj komponent: ```js import 'mdui/components/divider.js'; ``` Zaimportuj typ TypeScript komponentu: ```ts import type { Divider } from 'mdui/components/divider.js'; ``` Przykład użycia: ```html ``` ## Przykłady {#examples} ### Separator pionowy {#example-vertical} Dodanie atrybutu `vertical` wyświetli separator w pionie. ```html
``` ### Wcięcie z lewej strony {#example-inset} Dodanie atrybutu `inset` spowoduje wcięcie separatora z lewej strony. Jest to często używane na listach, aby wyrównać separator z tekstem po lewej stronie. ```html Pozycja 1 Pozycja 2 ``` ### Wcięcie z obu stron {#example-middle} Dodanie atrybutu `middle` spowoduje wcięcie separatora z obu stron. ```html Pozycja 1 Pozycja 2 ``` ## mdui-divider API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
vertical vertical true boolean false

Określa, czy jest to separator pionowy.
inset inset true boolean false

Określa, czy dodać wcięcie z lewej strony.
middle middle true boolean false

Określa, czy dodać wcięcie z obu stron.
# Komponent Dropdown Komponent listy rozwijanej wyświetla określoną treść w wyskakującej kontrolce, często używany razem z komponentem Menu. ## Sposób użycia {#usage} Zaimportuj komponent: ```js import 'mdui/components/dropdown.js'; ``` Zaimportuj typ TypeScript komponentu: ```ts import type { Dropdown } from 'mdui/components/dropdown.js'; ``` Przykład użycia: ```html otwórz listę rozwijaną Pozycja 1 Pozycja 2 ``` ## Przykłady {#examples} ### Stan wyłączony {#example-disabled} Dodanie atrybutu `disabled` wyłącza komponent listy rozwijanej. ```html otwórz listę rozwijaną Pozycja 1 Pozycja 2 ``` ### Pozycja otwarcia {#example-placement} Atrybut `placement` ustawia pozycję otwarcia listy rozwijanej. ```html otwórz listę rozwijaną Pozycja 1 Pozycja 2 ``` ### Sposób wyzwalania {#example-trigger} Atrybut `trigger` ustawia sposób wyzwalania listy rozwijanej. ```html otwórz listę rozwijaną Pozycja 1 Pozycja 2 ``` ### Otwieranie w miejscu kursora {#example-open-on-pointer} Dodanie atrybutu `open-on-pointer` spowoduje otwarcie listy rozwijanej w miejscu kursora. Zwykle używane razem z `trigger="contextmenu"`, aby otworzyć menu prawym przyciskiem myszy. ```html Kliknij prawym przyciskiem myszy w tym obszarze, aby otworzyć menu Pozycja 1 Pozycja 2 ``` ### Pozostawianie menu otwartego {#example-stay-open-on-click} Gdy używasz menu w komponencie listy rozwijanej, domyślnie kliknięcie elementu menu automatycznie zamyka listę rozwijaną. Dodanie atrybutu `stay-open-on-click` pozwala zachować otwartą listę rozwijaną po kliknięciu elementu menu. ```html otwórz listę rozwijaną Pozycja 1 Pozycja 2 ``` ### Opóźnienie otwierania/zamykania {#example-delay} Gdy ustawiony jest `trigger="hover"`, możesz ustawić opóźnienie otwierania i zamykania za pomocą atrybutów `open-delay` i `close-delay`. ```html otwórz listę rozwijaną Pozycja 1 Pozycja 2 ``` ## mdui-dropdown API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
open open true boolean false

Określa, czy lista rozwijana jest otwarta.
disabled disabled true boolean false

Określa, czy lista rozwijana jest wyłączona.
trigger trigger true 'click' | 'hover' | 'focus' | 'contextmenu' | 'manual' | string 'click'

Sposób wyzwalania listy rozwijanej. Obsługuje wiele wartości oddzielonych spacjami. Dozwolone wartości:

  • click: Wywoływane po kliknięciu
  • hover: Wywoływane po najechaniu myszą
  • focus: Wywoływane po otrzymaniu fokusu
  • contextmenu: Wywoływane po kliknięciu prawym przyciskiem myszy lub długim naciśnięciu na ekranie dotykowym
  • manual: Można otwierać i zamykać listę rozwijaną tylko programowo, nie można określić innych sposobów wyzwalania
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'

Pozycja treści listy rozwijanej. Dozwolone wartości:

  • auto: Automatyczne określenie pozycji
  • top-start: Nad elementem, wyrównany do lewej
  • top: Nad elementem, wyśrodkowany
  • top-end: Nad elementem, wyrównany do prawej
  • bottom-start: Pod elementem, wyrównany do lewej
  • bottom: Pod elementem, wyśrodkowany
  • bottom-end: Pod elementem, wyrównany do prawej
  • left-start: Po lewej stronie, wyrównany do góry
  • left: Po lewej stronie, wyśrodkowany
  • left-end: Po lewej stronie, wyrównany do dołu
  • right-start: Po prawej stronie, wyrównany do góry
  • right: Po prawej stronie, wyśrodkowany
  • right-end: Po prawej stronie, wyrównany do dołu
stay-open-on-click stayOpenOnClick true boolean false

Określa, czy lista rozwijana pozostaje otwarta po kliknięciu <mdui-menu-item>.
open-delay openDelay true number 150

Opóźnienie otwarcia listy rozwijanej po najechaniu myszą, w milisekundach
close-delay closeDelay true number 150

Opóźnienie zamknięcia listy rozwijanej po najechaniu myszą, w milisekundach
open-on-pointer openOnPointer true boolean false

Określa, czy otworzyć listę rozwijaną w miejscu kursora, często używane do otwierania menu kontekstowego po kliknięciu prawym przyciskiem myszy.
### Zdarzenia
Nazwa Opis
open

Wywoływane przed otwarciem listy rozwijanej. Można zapobiec otwarciu, wywołując event.preventDefault()
opened

Wywoływane po zakończeniu animacji otwierania listy rozwijanej
close

Wywoływane przed zamknięciem listy rozwijanej. Można zapobiec zamknięciu, wywołując event.preventDefault()
closed

Wywoływane po zakończeniu animacji zamykania listy rozwijanej
### Slots
Nazwa Opis
(domyślny)

Treść listy rozwijanej
trigger

Element wyzwalający listę rozwijaną, np. element <mdui-button>
### CSS Parts
Nazwa Opis
trigger

Kontener elementu wyzwalającego listę rozwijaną, tj. kontener slotu trigger
panel

Kontener treści listy rozwijanej
### Właściwości niestandardowe CSS
Nazwa Opis
--z-index

Wartość CSS z-index komponentu
# Komponent Fab Pływający przycisk akcji (FAB) wyróżnia główną akcję, umieszczając kluczową akcję w łatwo dostępnym miejscu. ## Sposób użycia {#usage} Zaimportuj komponent: ```js import 'mdui/components/fab.js'; ``` Zaimportuj typ TypeScript komponentu: ```ts import type { Fab } from 'mdui/components/fab.js'; ``` Przykład użycia: ```html ``` ## Przykłady {#examples} ### Ikona {#example-icon} Atrybut `icon` określa nazwę ikony Material Icons. Możesz również określić element ikony za pomocą slotu `icon`. ```html ``` ### Stan rozszerzony {#example-extended} Dodanie atrybutu `extended` ustawia FAB w stan rozszerzony, w którym tekst w domyślnym slocie zostanie wyświetlony. ```html Utwórz ``` ### Kształt {#example-variant} Atrybut `variant` ustawia kształt FAB. ```html ``` ### Rozmiar {#example-size} Atrybut `size` ustawia rozmiar FAB. ```html ``` ### Link {#example-link} Dodanie atrybutu `href` nadaje FAB funkcję linku, a dodatkowo możesz użyć atrybutów związanych z linkami: `download`, `target`, `rel`. ```html ``` ### Stan wyłączony i ładowania {#example-disabled} Dodanie atrybutu `disabled` wyłącza FAB; dodanie atrybutu `loading` dodaje stan ładowania. ```html ``` ## mdui-fab API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
variant variant true 'primary' | 'surface' | 'secondary' | 'tertiary' 'primary'

Wariant FAB. Różne warianty tego komponentu różnią się tylko kolorem. Dozwolone wartości:

  • primary: Używa koloru tła Primary container
  • surface: Używa koloru tła Surface container high
  • secondary: Używa koloru tła Secondary container
  • tertiary: Używa koloru tła Tertiary container
size size true 'normal' | 'small' | 'large' 'normal'

Rozmiar FAB. Dozwolone wartości:

  • normal: Normalny rozmiar FAB
  • small: Mały FAB
  • large: Duży FAB
icon icon true string

Nazwa ikony Material Icons. Można również ustawić za pomocą slot="icon"
extended extended true boolean false

Określa, czy FAB jest w stanie rozwiniętym.
href href true string

Docelowy adres URL łącza.

Jeśli atrybut jest ustawiony, komponent jest renderowany jako element <a>, co umożliwia korzystanie z atrybutów dotyczących łączy.
download download true string

Nazwa pliku do pobrania.

Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut href.
target target true '_blank' | '_parent' | '_self' | '_top'

Sposób otwarcia łącza. Dozwolone wartości:

  • _blank: Otwiera w nowym oknie
  • _parent: Otwiera w oknie nadrzędnym
  • _self: Otwiera w bieżącej ramce
  • _top: Otwiera w całym oknie

Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut href.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Relacja między bieżącym dokumentem a dokumentem, do którego prowadzi łącze. Dozwolone wartości:

  • alternate: Alternatywna wersja bieżącego dokumentu
  • author: Autor bieżącego dokumentu lub artykułu
  • bookmark: Stałe łącze do najbliższej sekcji nadrzędnej
  • external: Dokument, do którego prowadzi łącze, nie znajduje się w tej samej witrynie co bieżący dokument
  • help: Łącze do powiązanej dokumentacji pomocy
  • license: Główna treść bieżącego dokumentu jest objęta prawami autorskimi dołączonego pliku
  • me: Bieżący dokument reprezentuje właściciela treści, do której prowadzi łącze
  • next: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest następnym dokumentem w tej sekwencji
  • nofollow: Autor lub wydawca bieżącego dokumentu nie rekomenduje dokumentu, do którego prowadzi łącze
  • noreferrer: Pomija nagłówek Referer. Efekt podobny do noopener
  • opener: Jeśli hiperłącze utworzy kontekst przeglądania najwyższego poziomu (tj. wartość atrybutu target to _blank), tworzy podrzędny kontekst przeglądania
  • prev: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest poprzednim dokumentem w tej sekwencji
  • search: Zawiera łącze do zasobu umożliwiającego przeszukiwanie bieżącego pliku i powiązanych z nim stron
  • tag: Zawiera znacznik (identyfikowany przez podany adres) mający zastosowanie do bieżącego dokumentu

Uwaga: Dostępne tylko wtedy, gdy określono atrybut href.
autofocus autofocus true boolean false

Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
tabindex tabIndex false number

Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).
disabled disabled true boolean false

Określa, czy komponent jest wyłączony.
loading loading true boolean false

Określa, czy komponent jest w stanie ładowania.
name name true string ''

Nazwa przycisku, która zostanie wysłana wraz z danymi formularza.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href.
value value true string ''

Wartość początkowa przycisku, która zostanie wysłana wraz z danymi formularza.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href.
type type true 'submit' | 'reset' | 'button' 'button'

Typ przycisku. Typ domyślny to button. Dozwolone typy:

  • submit: Kliknięcie przycisku przesyła dane formularza do serwera
  • reset: Kliknięcie przycisku resetuje wszystkie elementy formularza do ich wartości początkowych
  • button: Ten typ przycisku nie ma domyślnego zachowania

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href.
form form true string

Powiązany element <form>. Wartość tego atrybutu powinna być id elementu <form> na tej samej stronie.

Jeśli ten atrybut nie jest określony, element ten musi być elementem potomnym elementu <form>. Ten atrybut umożliwia umieszczenie elementu w dowolnym miejscu na stronie, nie tylko jako element potomny elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie określono atrybutu href.
formaction formAction true string

Określa adres URL do przesłania formularza.

Jeśli ten atrybut jest określony, zastępuje atrybut action elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie określono atrybutu href i type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Określa typ zawartości przesyłanej do serwera podczas wysyłania formularza. Dozwolone wartości:

  • application/x-www-form-urlencoded: Wartość domyślna, gdy atrybut nie jest określony
  • multipart/form-data: Używany, gdy formularz zawiera element <input type="file">
  • text/plain: Nowość w HTML5, używana do debugowania

Jeśli ten atrybut jest określony, zastępuje atrybut enctype elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie określono atrybutu href i type="submit".
formmethod formMethod true 'post' | 'get'

Określa metodę HTTP używaną do przesłania formularza. Dozwolone wartości:

  • post: Dane formularza są zawarte w treści formularza i wysyłane do serwera
  • get: Dane formularza są dołączane do adresu URI formularza za pomocą separatora ?, a wygenerowany adres URI jest wysyłany do serwera. Tej metody należy używać, gdy formularz nie powoduje skutków ubocznych i zawiera tylko znaki ASCII

Jeśli ten atrybut jest ustawiony, zastępuje atrybut method elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href i type="submit".
formnovalidate formNoValidate true boolean false

Jeśli ten atrybut jest ustawiony, formularz nie jest walidowany podczas wysyłania.

Jeśli ten atrybut jest ustawiony, zastępuje atrybut novalidate elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href i type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Określa, gdzie wyświetlić odpowiedź otrzymaną po przesłaniu formularza. Dozwolone wartości:

  • _self: Otwiera w bieżącej ramce
  • _blank: Otwiera w nowym oknie
  • _parent: Otwiera w oknie nadrzędnym
  • _top: Otwiera w całym oknie

Jeśli ten atrybut jest ustawiony, zastępuje atrybut target elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href i type="submit".
undefined validity false ValidityState

Obiekt stanu walidacji formularza, zobacz ValidityState
undefined validationMessage false string

Jeśli walidacja formularza nie powiedzie się, ten atrybut zawiera komunikat informacyjny. Jeśli walidacja się powiedzie, ten atrybut jest pustym ciągiem znaków
### Metody
Nazwa Opis
click(): void

Symuluje kliknięcie myszą na elemencie
focus(options?: FocusOptions): void

Przenosi fokus na bieżący element.

Można przekazać obiekt jako parametr, którego właściwości obejmują:

  • preventScroll: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na true.
blur(): void

Usuwa fokus z bieżącego elementu
checkValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true
reportValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true.

Jeśli walidacja się nie powiedzie, na komponencie wyświetlany jest również komunikat o niepowodzeniu walidacji.
setCustomValidity(message: string): void

Ustawia niestandardowy komunikat o błędzie. Dopóki ten tekst nie jest pusty, oznacza to, że pole nie przeszło walidacji
### Zdarzenia
Nazwa Opis
focus

Wywoływane po otrzymaniu fokusu
blur

Wywoływane po utracie fokusu
invalid

Wywoływane, gdy pole formularza nie przejdzie walidacji
### Slots
Nazwa Opis
(domyślny)

Tekst
icon

Ikona
### CSS Parts
Nazwa Opis
button

Wewnętrzny element <button> lub <a>
label

Tekst po prawej stronie
icon

Ikona po lewej stronie
loading

Element <mdui-circular-progress> w stanie ładowania
### Właściwości niestandardowe CSS
Nazwa Opis
--shape-corner-small

Wielkość zaokrąglenia rogów komponentu, gdy size="small". Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
--shape-corner-normal

Wielkość zaokrąglenia rogów komponentu, gdy size="normal". Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
--shape-corner-large

Wielkość zaokrąglenia rogów komponentu, gdy size="large". Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
# Komponent Ikona Ikona reprezentuje typowe akcje. Obsługuje ikony Material Icons, a także ikony SVG. ## Sposób użycia {#usage} Zaimportuj komponent: ```js import 'mdui/components/icon.js'; ``` Zaimportuj typ TypeScript komponentu: ```ts import type { Icon } from 'mdui/components/icon.js'; ``` Przykład użycia: ```html ``` ### Używanie ikon Material Icons {#usage-material-icons} Aby używać ikon Material Icons za pośrednictwem tego komponentu, musisz osobno zaimportować plik CSS dla Material Icons. Material Icons ma 5 wariantów: Filled, Outlined, Rounded, Sharp, Two Tone. Zaimportuj odpowiedni plik CSS w zależności od wariantu ikony, którego chcesz użyć: ```html ``` Podczas korzystania z komponentu, wprowadź nazwę ikony w atrybucie `name`, z sufiksem wskazującym wariant (dla wariantu Filled nie dodawaj sufiksu). Poniżej przykład użycia 5 wariantów ikony `delete`: ```html ``` Możesz wyszukiwać ikony w narzędziu [Wyszukiwanie ikon Material Icons](/pl/docs/2/components/icon#search) na dole strony, a następnie kliknąć potrzebną ikonę, aby skopiować kod ikony do schowka. Ponadto mdui udostępnia niezależny pakiet [`@mdui/icons`](/pl/docs/2/libraries/icons), w którym każdy komponent ikony jest oddzielnym plikiem, umożliwiając importowanie tylko potrzebnych ikon bez konieczności importowania całej biblioteki ikon. ### Używanie ikon SVG {#usage-svg} Komponent obsługuje również używanie ikon SVG jako treści ikony. Możesz przekazać link do ikony SVG za pomocą atrybutu `src`. Na przykład: ```html ``` Możesz również przekazać treść SVG w domyślnym slocie komponentu. Na przykład: ```html ``` ## Przykłady {#examples} ### Ustawianie koloru {#example-color} Ustaw styl CSS `color` elementu `` lub jego rodzica, aby zmienić kolor ikony. ```html ``` ### Ustawianie rozmiaru {#example-size} Ustaw styl CSS `font-size` elementu `` lub jego rodzica, aby zmienić rozmiar ikony. ```html ``` ## mdui-icon API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
name name true string

Nazwa ikony Material Icons
src src true string

Ścieżka do ikony SVG
### Slots
Nazwa Opis
(domyślny)

Treść ikony svg
# Komponent Layout Komponent layoutu zapewnia elastyczny system układu do tworzenia złożonych układów stron. ## Sposób użycia {#usage} Zaimportuj komponenty: ```js import 'mdui/components/layout.js'; import 'mdui/components/layout-item.js'; import 'mdui/components/layout-main.js'; ``` Zaimportuj typy TypeScript komponentów: ```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'; ``` **Wprowadzenie:** System layoutu jest budowany zgodnie z zasadą od zewnątrz do wewnątrz. Każdy komponent layoutu (komponent ``) zajmuje miejsce w jednym z czterech kierunków (góra, dół, lewo, prawo), a kolejne komponenty layoutu zajmują miejsce w pozostałej przestrzeni. Następujące komponenty dziedziczą bezpośrednio z komponentu ``, więc mogą być również używane jako komponenty layoutu: - [``](/pl/docs/2/components/navigation-bar) - [``](/pl/docs/2/components/navigation-drawer) - [``](/pl/docs/2/components/navigation-rail) - [``](/pl/docs/2/components/bottom-app-bar) - [``](/pl/docs/2/components/top-app-bar) Ostatnią częścią systemu layoutu jest komponent ``, który zajmuje pozostałą przestrzeń. W nim możesz umieścić treść strony. ## Przykłady {#examples} ### Kolejność komponentów layoutu {#layout-default-order} Domyślnie komponenty layoutu zajmują miejsce w kolejności, w jakiej pojawiają się w kodzie. Możesz zrozumieć tę koncepcję na podstawie dwóch poniższych przykładów, w których [``](/pl/docs/2/components/top-app-bar) i [``](/pl/docs/2/components/navigation-drawer) występują w różnej kolejności w kodzie.

Proszę obejrzeć ten przykład na dużym monitorze.

```html Górny pasek aplikacji Wysuwany panel nawigacyjny Główny ``` ```html Wysuwany panel nawigacyjny Górny pasek aplikacji Główny ``` Można zauważyć, że gdy [``](/pl/docs/2/components/top-app-bar) jest umieszczony przed [``](/pl/docs/2/components/navigation-drawer), [``](/pl/docs/2/components/top-app-bar) najpierw zajmuje całą szerokość ekranu, a [``](/pl/docs/2/components/navigation-drawer) może zająć tylko wysokość w pozostałej przestrzeni. Po zamianie kolejności, [``](/pl/docs/2/components/navigation-drawer) najpierw zajmuje całą wysokość ekranu, a [``](/pl/docs/2/components/top-app-bar) zajmuje tylko szerokość w pozostałej przestrzeni. ### Pozycja komponentów layoutu {#example-placement} Dla komponentu `` możesz użyć atrybutu `placement`, aby określić jego pozycję w układzie: góra, dół, lewo, prawo. Dla komponentów [``](/pl/docs/2/components/navigation-drawer) i [``](/pl/docs/2/components/navigation-rail) możesz również użyć atrybutu `placement`, aby określić lewą lub prawą pozycję w układzie. W poniższym przykładzie umieściliśmy dwa komponenty `` po obu stronach aplikacji. ```html Górny pasek aplikacji Element layoutu Element layoutu Główny ``` ### Niestandardowa kolejność komponentów layoutu {#example-order} W większości przypadków, umieszczenie komponentów layoutu w odpowiedniej kolejności wystarczy, aby uzyskać pożądany układ. Możesz również użyć atrybutu `order`, aby określić kolejność układu. System ułoży komponenty według rosnącej wartości `order`, a w przypadku tej samej wartości `order` – według kolejności w kodzie. Domyślna wartość `order` dla wszystkich komponentów layoutu to `0`. ```html Element layoutu Górny pasek aplikacji
order="-1" Główny ``` ## mdui-layout-item API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
placement placement true 'top' | 'bottom' | 'left' | 'right' 'top'

Pozycja komponentu. Dozwolone wartości:

  • top: U góry
  • bottom: Na dole
  • left: Po lewej
  • right: Po prawej
order order true number

Kolejność tego komponentu w układzie <mdui-layout>, sortowana od najmniejszej do największej. Domyślnie 0.
### Slots
Nazwa Opis
(domyślny)

Może zawierać dowolną treść
## mdui-layout-main API ### Slots
Nazwa Opis
(domyślny)

Może zawierać dowolną treść
## mdui-layout API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
full-height fullHeight true boolean false

Ustawia wysokość bieżącego layoutu na 100%
### Slots
Nazwa Opis
(domyślny)

Może zawierać elementy <mdui-top-app-bar>, <mdui-bottom-app-bar>, <mdui-navigation-bar>, <mdui-navigation-drawer>, <mdui-navigation-rail>, <mdui-layout-item>, <mdui-layout-main>
# Komponent LinearProgress Liniowy wskaźnik postępu pokazuje postęp zadania, takiego jak ładowanie danych lub wysyłanie formularza. ## Sposób użycia {#usage} Zaimportuj komponent: ```js import 'mdui/components/linear-progress.js'; ``` Zaimportuj typ TypeScript komponentu: ```ts import type { LinearProgress } from 'mdui/components/linear-progress.js'; ``` Przykład użycia: ```html ``` ## Przykłady {#examples} ### Postęp {#example-value} Liniowy wskaźnik postępu domyślnie ma nieokreślony postęp. Możesz ustawić bieżący postęp za pomocą atrybutu `value`. Domyślna maksymalna wartość postępu to `1`. ```html ``` Maksymalną wartość postępu można ustawić za pomocą atrybutu `max`. ```html ``` ## mdui-linear-progress API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
max max true number 1

Maksymalna wartość wskaźnika postępu. Domyślnie 1
value value false number

Bieżąca wartość wskaźnika postępu. Jeśli wartość nie jest określona, znajduje się w stanie nieokreślonym
### CSS Parts
Nazwa Opis
indicator

Część wskaźnika
### Właściwości niestandardowe CSS
Nazwa Opis
--shape-corner

Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
# Komponent List Lista to pionowo ułożony indeks wyświetlający tekst lub obrazy, ułatwiający szybkie przeglądanie i dostęp do powiązanych informacji. ## Sposób użycia {#usage} Zaimportuj komponenty: ```js import 'mdui/components/list.js'; import 'mdui/components/list-item.js'; import 'mdui/components/list-subheader.js'; ``` Zaimportuj typy TypeScript komponentów: ```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'; ``` Przykład użycia: ```html Podnagłówek Pozycja 1 Pozycja 2 ``` ## Przykłady {#examples} ### Treść tekstowa {#example-text} Ustaw atrybut `headline` na komponencie ``, aby ustawić główny tekst elementu listy. Ustaw atrybut `description`, aby ustawić tekst pomocniczy. ```html ``` Możesz również ustawić główny tekst za pomocą domyślnego slotu, a tekst pomocniczy za pomocą slotu `description`. ```html Nagłówek Nagłówek Tekst pomocniczy ``` Domyślnie główny tekst i tekst pomocniczy są wyświetlane w całości, niezależnie od długości. Możesz ustawić atrybuty `headline-line` i `description-line`, aby ograniczyć liczbę wierszy odpowiednio dla głównego tekstu i tekstu pomocniczego, maksymalnie do 3 wierszy. ```html Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Nagłówek Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy Tekst pomocniczy ``` ### Treść po bokach {#example-side} Ustaw atrybuty `icon` i `end-icon` na komponencie ``, aby dodać ikony Material Icons odpowiednio po lewej i prawej stronie elementu listy. ```html Nagłówek ``` Możesz również dodać elementy po lewej i prawej stronie elementu listy za pomocą slotów `icon` i `end-icon`. ```html Nagłówek ``` ### Link {#example-link} Ustawienie atrybutu `href` zmienia element listy w link. Dodatkowo możesz użyć atrybutów związanych z linkami: `download`, `target`, `rel`. ```html Nagłówek ``` ### Stan wyłączony {#example-disabled} Dodanie atrybutu `disabled` do komponentu `` wyłącza ten element listy. Spowoduje to również wyłączenie komponentów takich jak checkbox, radio, switch wewnątrz elementu listy. ```html Nagłówek Nagłówek ``` ### Stan aktywny {#example-active} Dodanie atrybutu `active` do komponentu `` aktywuje ten element listy. ```html Nagłówek Nagłówek ``` ### Stan nieklikalny {#example-nonclickable} Dodanie atrybutu `nonclickable` do komponentu `` usuwa efekt najechania kursorem i efekt fali po kliknięciu. ```html Nagłówek Nagłówek ``` ### Zaokrąglony kształt {#example-rounded} Dodanie atrybutu `rounded` do komponentu `` nadaje temu elementowi listy zaokrąglony kształt. ```html Nagłówek Nagłówek ``` ### Wyrównanie w pionie {#example-alignment} Ustaw atrybut `alignment` na komponencie ``, aby dostosować wyrównanie elementów po lewej i prawej stronie względem elementu listy. Możliwe wartości: - `start`: Wyrównanie do góry - `center`: Wyrównanie do środka - `end`: Wyrównanie do dołu ```html Nagłówek Nagłówek Nagłówek ``` ### Niestandardowa treść {#example-custom} Użyj slotu `custom` w komponencie ``, aby całkowicie dostosować treść elementu listy. ```html
test
 ``` ## mdui-list-item API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
headline headline true string

Tekst główny. Można również ustawić za pomocą domyślnego slotu
headline-line headlineLine true 1 | 2 | 3

Liczba wierszy tekstu głównego, po przekroczeniu limitu tekst zostanie obcięty. Domyślnie brak ograniczenia liczby wierszy. Dozwolone wartości:

  • 1: Wyświetla jeden wiersz, po przekroczeniu obcina
  • 2: Wyświetla dwa wiersze, po przekroczeniu obcina
  • 3: Wyświetla trzy wiersze, po przekroczeniu obcina
description description true string

Tekst dodatkowy. Można również ustawić za pomocą slot="description"
description-line descriptionLine true 1 | 2 | 3

Liczba wierszy tekstu dodatkowego, po przekroczeniu limitu tekst zostanie obcięty. Domyślnie brak ograniczenia liczby wierszy. Dozwolone wartości:

  • 1: Wyświetla jeden wiersz, po przekroczeniu obcina
  • 2: Wyświetla dwa wiersze, po przekroczeniu obcina
  • 3: Wyświetla trzy wiersze, po przekroczeniu obcina
icon icon true string

Nazwa ikony Material Icons po lewej stronie. Można również ustawić za pomocą slot="icon"
end-icon endIcon true string

Nazwa ikony Material Icons po prawej stronie. Można również ustawić za pomocą slot="end-icon"
disabled disabled true boolean false

Określa, czy element listy jest wyłączony. Gdy jest wyłączony, staje się szary, a znajdujące się w nim kontrolki, takie jak <mdui-checkbox>, <mdui-radio>, <mdui-switch>, również zostaną wyłączone.
active active true boolean false

Określa, czy element listy jest aktywny.
nonclickable nonclickable true boolean false

Określa, czy element listy jest nieklikalny. Gdy jest ustawiony, znajdujące się w nim kontrolki, takie jak <mdui-checkbox>, <mdui-radio>, <mdui-switch>, pozostają interaktywne.
rounded rounded true boolean false

Określa, czy element listy ma zaokrąglone rogi.
alignment alignment true 'start' | 'center' | 'end' 'center'

Wyrównanie w pionie elementu listy. Dozwolone wartości:

  • start: Wyrównanie do góry
  • center: Wyrównanie do środka
  • end: Wyrównanie do dołu
href href true string

Docelowy adres URL łącza.

Jeśli atrybut jest ustawiony, komponent jest renderowany jako element <a>, co umożliwia korzystanie z atrybutów dotyczących łączy.
download download true string

Nazwa pliku do pobrania.

Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut href.
target target true '_blank' | '_parent' | '_self' | '_top'

Sposób otwarcia łącza. Dozwolone wartości:

  • _blank: Otwiera w nowym oknie
  • _parent: Otwiera w oknie nadrzędnym
  • _self: Otwiera w bieżącej ramce
  • _top: Otwiera w całym oknie

Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut href.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Relacja między bieżącym dokumentem a dokumentem, do którego prowadzi łącze. Dozwolone wartości:

  • alternate: Alternatywna wersja bieżącego dokumentu
  • author: Autor bieżącego dokumentu lub artykułu
  • bookmark: Stałe łącze do najbliższej sekcji nadrzędnej
  • external: Dokument, do którego prowadzi łącze, nie znajduje się w tej samej witrynie co bieżący dokument
  • help: Łącze do powiązanej dokumentacji pomocy
  • license: Główna treść bieżącego dokumentu jest objęta prawami autorskimi dołączonego pliku
  • me: Bieżący dokument reprezentuje właściciela treści, do której prowadzi łącze
  • next: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest następnym dokumentem w tej sekwencji
  • nofollow: Autor lub wydawca bieżącego dokumentu nie rekomenduje dokumentu, do którego prowadzi łącze
  • noreferrer: Pomija nagłówek Referer. Efekt podobny do noopener
  • opener: Jeśli hiperłącze utworzy kontekst przeglądania najwyższego poziomu (tj. wartość atrybutu target to _blank), tworzy podrzędny kontekst przeglądania
  • prev: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest poprzednim dokumentem w tej sekwencji
  • search: Zawiera łącze do zasobu umożliwiającego przeszukiwanie bieżącego pliku i powiązanych z nim stron
  • tag: Zawiera znacznik (identyfikowany przez podany adres) mający zastosowanie do bieżącego dokumentu

Uwaga: Dostępne tylko wtedy, gdy określono atrybut href.
autofocus autofocus true boolean false

Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
tabindex tabIndex false number

Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).
### Metody
Nazwa Opis
click(): void

Symuluje kliknięcie myszą na elemencie
focus(options?: FocusOptions): void

Przenosi fokus na bieżący element.

Można przekazać obiekt jako parametr, którego właściwości obejmują:

  • preventScroll: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na true.
blur(): void

Usuwa fokus z bieżącego elementu
### Zdarzenia
Nazwa Opis
focus

Wywoływane po otrzymaniu fokusu
blur

Wywoływane po utracie fokusu
### Slots
Nazwa Opis
(domyślny)

Tekst główny
description

Tekst dodatkowy
icon

Element po lewej stronie elementu listy
end-icon

Element po prawej stronie elementu listy
custom

Dowolna niestandardowa treść
### CSS Parts
Nazwa Opis
container

Kontener elementu listy
icon

Ikona po lewej stronie
end-icon

Ikona po prawej stronie
body

Część środkowa
headline

Tekst główny
description

Tekst dodatkowy
### Właściwości niestandardowe CSS
Nazwa Opis
--shape-corner

Wielkość zaokrąglenia rogów elementu listy. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
--shape-corner-rounded

Wielkość zaokrąglenia rogów elementu listy, gdy określono atrybut rounded. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
## mdui-list-subheader API ### Slots
Nazwa Opis
(domyślny)

Tekst podnagłówka listy
## mdui-list API ### Slots
Nazwa Opis
(domyślny)

Elementy <mdui-list-item>
# Komponent Menu Menu wyświetla listę opcji ułożonych w pionie. Menu pojawia się po kliknięciu z przyciskiem lub inną kontrolką. Jeśli potrzebujesz zaimplementować menu rozwijane, możesz użyć komponentu [``](/pl/docs/2/components/dropdown). ## Sposób użycia {#usage} Zaimportuj komponenty: ```js import 'mdui/components/menu.js'; import 'mdui/components/menu-item.js'; ``` Zaimportuj typy TypeScript komponentów: ```ts import type { Menu } from 'mdui/components/menu.js'; import type { MenuItem } from 'mdui/components/menu-item.js'; ``` Przykład użycia: ```html Pozycja 1 Pozycja 2 ``` ## Przykłady {#examples} ### Menu rozwijane {#example-dropdown} Użyj komponentu [``](/pl/docs/2/components/dropdown), aby zaimplementować menu rozwijane. ```html otwórz listę rozwijaną Pozycja 1 Pozycja 2 ``` ### Kompaktowy układ {#example-dense} Dodanie atrybutu `dense` do komponentu `` powoduje zastosowanie kompaktowego układu. ```html Pozycja 1 Pozycja 2 Pozycja 3 ``` ### Wyłączony element menu {#example-disabled} Dodanie atrybutu `disabled` do komponentu `` wyłącza element menu. ```html Pozycja 1 Pozycja 2 Pozycja 3 ``` ### Obsługa pojedynczego wyboru {#example-selects-single} Ustawienie atrybutu `selects` na `single` w komponencie `` umożliwia pojedynczy wybór. Wartość `value` komponentu `` jest wtedy równa wartości `value` zaznaczonego ``. ```html Pozycja 1 Pozycja 2 ``` ### Obsługa wielokrotnego wyboru {#example-selects-multiple} Ustawienie atrybutu `selects` na `multiple` w komponencie `` umożliwia wielokrotny wybór. Wartość `value` komponentu `` jest wtedy tablicą wartości `value` zaznaczonych ``. Uwaga: W trybie wielokrotnego wyboru, wartość `value` komponentu `` jest tablicą i może być odczytywana i ustawiana tylko za pomocą właściwości JavaScript. ```html Pozycja 1 Pozycja 2 Pozycja 3 ``` ### Ikona {#example-icon} Na komponencie `` możesz użyć atrybutów `icon` i `end-icon`, aby dodać ikony Material Icons odpowiednio po lewej i prawej stronie elementu menu. Użyj atrybutu `end-text`, aby dodać tekst po prawej stronie. Możesz również użyć slotów `icon`, `end-icon` i `end-text` do dodania ikon i tekstu. Jeśli chcesz pozostawić puste miejsce po lewej stronie elementu menu, aby zachować wyrównanie z innymi elementami, możesz ustawić atrybut `icon` na pusty ciąg znaków. ```html Pozycja 1 Pozycja 2 Ctrl+X Pozycja 3 ``` W trybie pojedynczego lub wielokrotnego wyboru możesz ustawić ikonę stanu zaznaczenia za pomocą atrybutu `selected-icon` lub slotu `selected-icon`. ```html Pozycja 1 Pozycja 2 ``` ### Link {#example-link} Ustawienie atrybutu `href` na komponencie `` zmienia element menu w link. Dodatkowo możesz użyć atrybutów związanych z linkami: `download`, `target`, `rel`. ```html Pozycja 1 Pozycja 2 ``` ### Podmenu {#example-submenu} W komponencie `` możesz użyć slotu `submenu`, aby określić elementy podmenu. ```html Odstępy między wierszami Pojedynczy 1,5 Podwójny Niestandardowy: 1,2 Styl akapitu ``` Na komponencie `` możesz ustawić sposób wyzwalania podmenu za pomocą atrybutu `submenu-trigger`. ```html Odstępy między wierszami Pojedynczy 1,5 Podwójny Niestandardowy: 1,2 Styl akapitu ``` Gdy `submenu-trigger` jest ustawiony na `hover`, możesz ustawić opóźnienie otwierania i zamykania podmenu za pomocą atrybutów `submenu-open-delay` i `submenu-close-delay` na komponencie ``. ```html Odstępy między wierszami Pojedynczy 1,5 Podwójny Niestandardowy: 1,2 Styl akapitu ``` ### Niestandardowa treść {#example-custom} W komponencie `` możesz użyć slotu `custom`, aby całkowicie dostosować treść elementu menu. ```html
ABS
Zwraca wartość bezwzględną liczby
ACOS
Arcus cosinus liczby, w radianach
ACOSH
Arcus cosinus hiperboliczny liczby
 ``` ## mdui-menu-item API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
value value true string

Wartość elementu menu
disabled disabled true boolean false

Określa, czy element menu jest wyłączony.
icon icon true string

Nazwa ikony Material Icons po lewej stronie. Można również ustawić za pomocą slot="icon"

Jeśli po lewej stronie nie ma być wyświetlana ikona, ale trzeba zarezerwować miejsce na ikonę, można przekazać pusty ciąg znaków jako placeholder
end-icon endIcon true string

Nazwa ikony Material Icons po prawej stronie. Można również ustawić za pomocą slot="end-icon"
end-text endText true string

Tekst po prawej stronie. Można również ustawić za pomocą slot="end-text"
selected-icon selectedIcon true string

Nazwa ikony Material Icons dla stanu zaznaczonego. Można również ustawić za pomocą slot="selected-icon"
submenu-open submenuOpen true boolean false

Określa, czy otworzyć podmenu.
href href true string

Docelowy adres URL łącza.

Jeśli atrybut jest ustawiony, komponent jest renderowany jako element <a>, co umożliwia korzystanie z atrybutów dotyczących łączy.
download download true string

Nazwa pliku do pobrania.

Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut href.
target target true '_blank' | '_parent' | '_self' | '_top'

Sposób otwarcia łącza. Dozwolone wartości:

  • _blank: Otwiera w nowym oknie
  • _parent: Otwiera w oknie nadrzędnym
  • _self: Otwiera w bieżącej ramce
  • _top: Otwiera w całym oknie

Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut href.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Relacja między bieżącym dokumentem a dokumentem, do którego prowadzi łącze. Dozwolone wartości:

  • alternate: Alternatywna wersja bieżącego dokumentu
  • author: Autor bieżącego dokumentu lub artykułu
  • bookmark: Stałe łącze do najbliższej sekcji nadrzędnej
  • external: Dokument, do którego prowadzi łącze, nie znajduje się w tej samej witrynie co bieżący dokument
  • help: Łącze do powiązanej dokumentacji pomocy
  • license: Główna treść bieżącego dokumentu jest objęta prawami autorskimi dołączonego pliku
  • me: Bieżący dokument reprezentuje właściciela treści, do której prowadzi łącze
  • next: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest następnym dokumentem w tej sekwencji
  • nofollow: Autor lub wydawca bieżącego dokumentu nie rekomenduje dokumentu, do którego prowadzi łącze
  • noreferrer: Pomija nagłówek Referer. Efekt podobny do noopener
  • opener: Jeśli hiperłącze utworzy kontekst przeglądania najwyższego poziomu (tj. wartość atrybutu target to _blank), tworzy podrzędny kontekst przeglądania
  • prev: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest poprzednim dokumentem w tej sekwencji
  • search: Zawiera łącze do zasobu umożliwiającego przeszukiwanie bieżącego pliku i powiązanych z nim stron
  • tag: Zawiera znacznik (identyfikowany przez podany adres) mający zastosowanie do bieżącego dokumentu

Uwaga: Dostępne tylko wtedy, gdy określono atrybut href.
autofocus autofocus true boolean false

Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
tabindex tabIndex false number

Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).
### Metody
Nazwa Opis
click(): void

Symuluje kliknięcie myszą na elemencie
focus(options?: FocusOptions): void

Przenosi fokus na bieżący element.

Można przekazać obiekt jako parametr, którego właściwości obejmują:

  • preventScroll: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na true.
blur(): void

Usuwa fokus z bieżącego elementu
### Zdarzenia
Nazwa Opis
focus

Wywoływane po otrzymaniu fokusu
blur

Wywoływane po utracie fokusu
submenu-open

Wywoływane przed otwarciem podmenu. Można zapobiec otwarciu, wywołując event.preventDefault()
submenu-opened

Wywoływane po zakończeniu animacji otwierania podmenu
submenu-close

Wywoływane przed zamknięciem podmenu. Można zapobiec zamknięciu, wywołując event.preventDefault()
submenu-closed

Wywoływane po zakończeniu animacji zamykania podmenu
### Slots
Nazwa Opis
(domyślny)

Tekst elementu menu
icon

Ikona po lewej stronie elementu menu
end-icon

Ikona po prawej stronie elementu menu
end-text

Tekst po prawej stronie elementu menu
selected-icon

Ikona dla stanu zaznaczonego
submenu

Podmenu
custom

Dowolna niestandardowa treść
### CSS Parts
Nazwa Opis
container

Kontener elementu menu
icon

Ikona po lewej stronie
label

Treść tekstowa
end-icon

Ikona po prawej stronie
end-text

Tekst po prawej stronie
selected-icon

Ikona dla stanu zaznaczonego
submenu

Element podmenu
## mdui-menu API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
selects selects true 'single' | 'multiple'

Stan zaznaczalności elementów menu. Domyślnie niezaznaczalne. Dozwolone wartości:

  • single: Pojedynczy wybór
  • multiple: Wielokrotny wybór
value value false string | string[]

Wartość aktualnie zaznaczonego <mdui-menu-item>.

Uwaga: Atrybut HTML tej właściwości jest zawsze ciągiem znaków i można ustawić wartość początkową przez atrybut HTML tylko wtedy, gdy selects="single"; wartość właściwości JavaScript jest ciągiem znaków, gdy selects="single", a tablicą ciągów znaków, gdy selects="multiple". Dlatego, gdy selects="multiple", aby zmienić tę wartość, można to zrobić tylko poprzez modyfikację wartości właściwości JavaScript.
dense dense true boolean false

Określa, czy elementy menu mają używać zwartego układu.
submenu-trigger submenuTrigger true 'click' | 'hover' | 'focus' | 'manual' | string 'click hover'

Sposób wyzwalania podmenu. Obsługuje wiele wartości oddzielonych spacjami. Dozwolone wartości:

  • click: Otwiera podmenu po kliknięciu elementu menu
  • hover: Otwiera podmenu po najechaniu myszą na element menu
  • focus: Otwiera podmenu po otrzymaniu fokusu na elemencie menu
  • manual: Można otwierać i zamykać podmenu tylko programowo, nie można określić innych sposobów wyzwalania
submenu-open-delay submenuOpenDelay true number 200

Opóźnienie otwarcia podmenu po najechaniu myszą, w milisekundach
submenu-close-delay submenuCloseDelay true number 200

Opóźnienie zamknięcia podmenu po najechaniu myszą, w milisekundach
### Metody
Nazwa Opis
focus(options?: FocusOptions): void

Przenosi fokus na bieżący element
blur(): void

Usuwa fokus z bieżącego elementu
### Zdarzenia
Nazwa Opis
change

Wywoływane po zmianie stanu zaznaczenia elementu menu
### Slots
Nazwa Opis
(domyślny)

Elementy podmenu (<mdui-menu-item>), separatory (<mdui-divider>) itp.
### Właściwości niestandardowe CSS
Nazwa Opis
--shape-corner

Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
# Komponent NavigationBar Pasek nawigacji umożliwia szybkie przechodzenie między kilkoma głównymi stronami na urządzeniach mobilnych. ## Sposób użycia {#usage} Zaimportuj komponenty: ```js import 'mdui/components/navigation-bar.js'; import 'mdui/components/navigation-bar-item.js'; ``` Zaimportuj typy TypeScript komponentów: ```ts import type { NavigationBar } from 'mdui/components/navigation-bar.js'; import type { NavigationBarItem } from 'mdui/components/navigation-bar-item.js'; ``` Przykład użycia: (Uwaga: `style="position: relative"` w przykładzie służy tylko do demonstracji; w produkcji usuń ten styl.) ```html Pozycja 1 Pozycja 2 Pozycja 3 ``` **Uwagi:** Ten komponent domyślnie używa pozycjonowania `position: fixed` i automatycznie dodaje styl `padding-bottom` do `body`, aby zapobiec zasłanianiu treści strony przez komponent. Jednak w następujących dwóch przypadkach domyślnie używane jest pozycjonowanie `position: absolute`: 1. Gdy określony jest atrybut `scroll-target`, styl `padding-bottom` jest dodawany do elementu `scroll-target`. 2. Gdy komponent znajduje się wewnątrz komponentu [``](/pl/docs/2/components/layout). Wtedy styl `padding-bottom` nie jest dodawany. ## Przykłady {#examples} ### Widoczność etykiety tekstowej {#example-label-visibility} Etykieta tekstowa na pasku nawigacji jest domyślnie zawsze widoczna, gdy liczba elementów nawigacji jest mniejsza lub równa 3; gdy jest większa niż 3, etykieta jest widoczna tylko dla zaznaczonego stanu. ```html Pozycja 1 Pozycja 2 Pozycja 3
Pozycja 1 Pozycja 2 Pozycja 3 Pozycja 4 ``` Możesz dostosować widoczność etykiety tekstowej, ustawiając atrybut `label-visibility` na komponencie ``. Dozwolone wartości: - `selected`: Tylko dla zaznaczonego stanu - `labeled`: Zawsze widoczna - `unlabeled`: Zawsze niewidoczna ```html Pozycja 1 Pozycja 2 Pozycja 3 selected labeled unlabeled ``` ### Umieszczenie w określonym kontenerze {#example-scroll-target} Domyślnie pasek nawigacji jest wyświetlany na dole strony względem bieżącego okna. Jeśli chcesz umieścić pasek nawigacji w określonym kontenerze, możesz określić atrybut `scroll-target` na komponencie ``. Wartością atrybutu powinien być selektor CSS lub element DOM kontenera z przewijaną treścią. W tym przypadku pasek nawigacji będzie wyświetlany względem elementu nadrzędnego (musisz samodzielnie dodać do elementu nadrzędnego style `position: relative; overflow: hidden`). ```html
Pozycja 1 Pozycja 2 Pozycja 3
Treść strony
``` ### Ukrywanie podczas przewijania {#example-scroll-behavior} Ustawienie atrybutu `scroll-behavior` na `hide` na komponencie `` spowoduje ukrycie paska nawigacji podczas przewijania strony w dół i pokazanie go podczas przewijania w górę. Atrybut `scroll-threshold` ustawia, po przewinięciu ilu pikseli zaczyna się ukrywanie paska nawigacji. ```html
Pozycja 1 Pozycja 2 Pozycja 3
Treść strony
``` ### Ikona {#example-icon} Na komponencie `` atrybut `icon` służy do ustawienia ikony dla nieaktywnego stanu, a `active-icon` dla aktywnego stanu. Możesz również użyć slotów `icon` i `active-icon` do ustawienia elementów ikony dla stanu nieaktywnego i aktywnego. ```html Pozycja 1 Pozycja 2 ``` ### Link {#example-link} Ustawienie atrybutu `href` na komponencie `` zmienia element nawigacji w link. Dodatkowo możesz użyć atrybutów związanych z linkami: `download`, `target`, `rel`. ```html Pozycja 1 Pozycja 2 ``` ### Badge {#example-badge} W komponencie `` możesz dodać badge za pomocą slotu `badge`. ```html Pozycja 1 99+ Pozycja 2 ``` ## mdui-navigation-bar-item API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
icon icon true string

Nazwa ikony Material Icons dla stanu nieaktywnego. Można również ustawić za pomocą slot="icon"
active-icon activeIcon true string

Nazwa ikony Material Icons dla stanu aktywnego. Można również ustawić za pomocą slot="active-icon"
value value true string

Wartość elementu nawigacyjnego
href href true string

Docelowy adres URL łącza.

Jeśli atrybut jest ustawiony, komponent jest renderowany jako element <a>, co umożliwia korzystanie z atrybutów dotyczących łączy.
download download true string

Nazwa pliku do pobrania.

Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut href.
target target true '_blank' | '_parent' | '_self' | '_top'

Sposób otwarcia łącza. Dozwolone wartości:

  • _blank: Otwiera w nowym oknie
  • _parent: Otwiera w oknie nadrzędnym
  • _self: Otwiera w bieżącej ramce
  • _top: Otwiera w całym oknie

Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut href.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Relacja między bieżącym dokumentem a dokumentem, do którego prowadzi łącze. Dozwolone wartości:

  • alternate: Alternatywna wersja bieżącego dokumentu
  • author: Autor bieżącego dokumentu lub artykułu
  • bookmark: Stałe łącze do najbliższej sekcji nadrzędnej
  • external: Dokument, do którego prowadzi łącze, nie znajduje się w tej samej witrynie co bieżący dokument
  • help: Łącze do powiązanej dokumentacji pomocy
  • license: Główna treść bieżącego dokumentu jest objęta prawami autorskimi dołączonego pliku
  • me: Bieżący dokument reprezentuje właściciela treści, do której prowadzi łącze
  • next: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest następnym dokumentem w tej sekwencji
  • nofollow: Autor lub wydawca bieżącego dokumentu nie rekomenduje dokumentu, do którego prowadzi łącze
  • noreferrer: Pomija nagłówek Referer. Efekt podobny do noopener
  • opener: Jeśli hiperłącze utworzy kontekst przeglądania najwyższego poziomu (tj. wartość atrybutu target to _blank), tworzy podrzędny kontekst przeglądania
  • prev: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest poprzednim dokumentem w tej sekwencji
  • search: Zawiera łącze do zasobu umożliwiającego przeszukiwanie bieżącego pliku i powiązanych z nim stron
  • tag: Zawiera znacznik (identyfikowany przez podany adres) mający zastosowanie do bieżącego dokumentu

Uwaga: Dostępne tylko wtedy, gdy określono atrybut href.
autofocus autofocus true boolean false

Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
tabindex tabIndex false number

Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).
### Metody
Nazwa Opis
click(): void

Symuluje kliknięcie myszą na elemencie
focus(options?: FocusOptions): void

Przenosi fokus na bieżący element.

Można przekazać obiekt jako parametr, którego właściwości obejmują:

  • preventScroll: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na true.
blur(): void

Usuwa fokus z bieżącego elementu
### Zdarzenia
Nazwa Opis
focus

Wywoływane po otrzymaniu fokusu
blur

Wywoływane po utracie fokusu
### Slots
Nazwa Opis
(domyślny)

Tekst elementu nawigacyjnego
icon

Ikona
active-icon

Element ikony dla stanu aktywnego
badge

Badge
### CSS Parts
Nazwa Opis
container

Kontener elementu nawigacyjnego
indicator

Wskaźnik
badge

Badge
icon

Ikona
active-icon

Ikona dla stanu aktywnego
label

Tekst elementu nawigacyjnego
### Właściwości niestandardowe CSS
Nazwa Opis
--shape-corner-indicator

Wielkość zaokrąglenia rogów wskaźnika. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
## mdui-navigation-bar API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
hide hide true boolean false

Określa, czy pasek nawigacji jest ukryty.
label-visibility labelVisibility true 'auto' | 'selected' | 'labeled' | 'unlabeled' 'auto'

Stan widoczności tekstu. Dozwolone wartości:

  • auto: Gdy liczba opcji jest mniejsza lub równa 3, tekst jest zawsze wyświetlany; gdy opcji jest więcej niż 3, tekst jest wyświetlany tylko dla stanu zaznaczonego
  • selected: Tekst wyświetlany tylko w stanie zaznaczonym
  • labeled: Tekst wyświetlany zawsze
  • unlabeled: Tekst nigdy nie wyświetlany
value value true string

Wartość aktualnie zaznaczonego <mdui-navigation-bar-item>
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Zachowanie podczas przewijania. Dozwolone wartości:

  • hide: Ukrywanie podczas przewijania
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Element, na którym nasłuchiwane są zdarzenia przewijania. Może to być selektor CSS, element DOM lub obiekt JQ. Domyślnie nasłuchiwane są zdarzenia przewijania okna (window).
scroll-threshold scrollThreshold true number

Odległość przewinięcia w px wymagana do aktywacji zachowania przewijania.
order order true number

Kolejność tego komponentu w układzie <mdui-layout>, sortowana od najmniejszej do największej. Domyślnie 0.
### Zdarzenia
Nazwa Opis
change

Wywoływane, gdy wartość się zmieni
show

Wywoływane przed wyświetleniem. Można zapobiec wyświetleniu, wywołując event.preventDefault()
shown

Wywoływane po zakończeniu animacji wyświetlania
hide

Wywoływane przed ukryciem. Można zapobiec ukryciu, wywołując event.preventDefault()
hidden

Wywoływane po zakończeniu animacji ukrywania
### Slots
Nazwa Opis
(domyślny)

Komponent <mdui-navigation-bar-item>
### Właściwości niestandardowe CSS
Nazwa Opis
--shape-corner

Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
--z-index

Wartość CSS z-index komponentu
# Komponent NavigationDrawer Wysuwany panel nawigacyjny udostępnia nawigację na boku strony, umożliwiając szybki dostęp do różnych stron lub treści. Zazwyczaj w wysuwanym panelu nawigacyjnym można użyć komponentu [``](/pl/docs/2/components/list) do dodania elementów nawigacji. ## Sposób użycia {#usage} Zaimportuj komponent: ```js import 'mdui/components/navigation-drawer.js'; ``` Zaimportuj typ TypeScript komponentu: ```ts import type { NavigationDrawer } from 'mdui/components/navigation-drawer.js'; ``` Przykład użycia: ```html Zamknij wysuwany panel nawigacyjny Otwórz wysuwany panel nawigacyjny ``` **Uwagi:** Ten komponent domyślnie używa pozycjonowania `position: fixed`. Gdy atrybut `modal` ma wartość `false`, a punkt przerwania jest większy lub równy [`--mdui-breakpoint-md`](/pl/docs/2/styles/design-tokens#breakpoint), automatycznie dodawany jest styl `padding-left` lub `padding-right` do `body`, aby zapobiec zasłanianiu treści strony przez komponent. Jednak w następujących dwóch przypadkach domyślnie używane jest pozycjonowanie `position: absolute`: 1. Gdy atrybut `contained` ma wartość `true`. 2. Gdy komponent znajduje się wewnątrz komponentu [``](/pl/docs/2/components/layout). Wtedy style `padding-left` lub `padding-right` nie są dodawane. ## Przykłady {#examples} ### Umieszczenie w określonym kontenerze {#example-contained} Domyślnie wysuwany panel nawigacyjny jest wyświetlany po lewej lub prawej stronie strony względem bieżącego okna. Jeśli chcesz umieścić wysuwany panel nawigacyjny w określonym kontenerze, możesz dodać atrybut `contained`. Wtedy panel będzie wyświetlany względem elementu nadrzędnego (musisz samodzielnie dodać do elementu nadrzędnego style `position: relative; overflow: hidden;`). ```html
Zamknij wysuwany panel nawigacyjny
Otwórz wysuwany panel nawigacyjny
``` ### Modalny {#example-modal} Dodanie atrybutu `modal` powoduje wyświetlenie osłony po otwarciu wysuwanego panelu nawigacyjnego. Należy pamiętać, że gdy szerokość okna lub elementu nadrzędnego jest mniejsza niż [`--mdui-breakpoint-md`](/pl/docs/2/styles/design-tokens#breakpoint), parametr ten jest ignorowany i osłona jest zawsze wyświetlana. Dodanie atrybutu `close-on-esc` zamknie wysuwany panel nawigacyjny po naciśnięciu klawisza ESC. Dodanie atrybutu `close-on-overlay-click` zamknie wysuwany panel nawigacyjny po kliknięciu na osłonę. ```html
Zamknij wysuwany panel nawigacyjny
Otwórz wysuwany panel nawigacyjny
``` ### Znajdowanie się po prawej stronie {#example-placement} Ustawienie atrybutu `placement` na `right` wyświetli wysuwany panel nawigacyjny po prawej stronie strony. ```html
Zamknij wysuwany panel nawigacyjny
Otwórz wysuwany panel nawigacyjny
``` ## mdui-navigation-drawer API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
open open true boolean false

Określa, czy panel nawigacyjny jest otwarty.
modal modal true boolean false

Określa, czy wyświetlać warstwę nakładki po otwarciu panelu nawigacyjnego.

Na urządzeniach z wąskim ekranem (szerokość ekranu mniejsza niż --mdui-breakpoint-md), warstwa nakładki jest zawsze wyświetlana, niezależnie od tego parametru
close-on-esc closeOnEsc true boolean false

Określa, czy naciśnięcie klawisza ESC zamyka panel nawigacyjny, gdy warstwa nakładki jest aktywna.
close-on-overlay-click closeOnOverlayClick true boolean false

Określa, czy kliknięcie warstwy nakładki zamyka panel nawigacyjny.
placement placement true 'left' | 'right' 'left'

Pozycja panelu nawigacyjnego. Dozwolone wartości:

  • left: Po lewej stronie
  • right: Po prawej stronie
contained contained true boolean false

Domyślnie panel nawigacyjny jest wyświetlany względem elementu body. Gdy ten atrybut jest ustawiony na true, panel nawigacyjny będzie wyświetlany względem swojego elementu nadrzędnego.

Uwaga: Podczas ustawiania tego atrybutu należy ręcznie ustawić style na elemencie nadrzędnym: position: relative; overflow: hidden;.
order order true number

Kolejność tego komponentu w układzie <mdui-layout>, sortowana od najmniejszej do największej. Domyślnie 0.
### Zdarzenia
Nazwa Opis
open

Wywoływane przed otwarciem panelu nawigacyjnego. Można zapobiec otwarciu, wywołując event.preventDefault()
opened

Wywoływane po zakończeniu animacji otwierania panelu nawigacyjnego
close

Wywoływane przed zamknięciem panelu nawigacyjnego. Można zapobiec zamknięciu, wywołując event.preventDefault()
closed

Wywoływane po zakończeniu animacji zamykania panelu nawigacyjnego
overlay-click

Wywoływane po kliknięciu warstwy nakładki
### Slots
Nazwa Opis
(domyślny)

Treść w panelu nawigacyjnym
### CSS Parts
Nazwa Opis
overlay

Warstwa nakładki
panel

Kontener panelu nawigacyjnego
### Właściwości niestandardowe CSS
Nazwa Opis
--shape-corner

Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
--z-index

Wartość CSS z-index komponentu
# Komponent NavigationRail Szyna nawigacyjna umożliwia dostęp do głównych sekcji na tabletach i komputerach stacjonarnych. ## Sposób użycia {#usage} Zaimportuj komponenty: ```js import 'mdui/components/navigation-rail.js'; import 'mdui/components/navigation-rail-item.js'; ``` Zaimportuj typy TypeScript komponentów: ```ts import type { NavigationRail } from 'mdui/components/navigation-rail.js'; import type { NavigationRailItem } from 'mdui/components/navigation-rail-item.js'; ``` Przykład użycia: (Uwaga: `style="position: relative"` w przykładzie służy tylko do demonstracji; w produkcji usuń ten styl.) ```html Ostatnie Obrazy Biblioteka ``` **Uwagi:** Ten komponent domyślnie używa pozycjonowania `position: fixed` i automatycznie dodaje styl `padding-left` lub `padding-right` do `body`, aby zapobiec zasłanianiu treści strony przez komponent. Jednak w następujących dwóch przypadkach domyślnie używane jest pozycjonowanie `position: absolute`: 1. Gdy atrybut `contained` komponentu `` ma wartość `true`. Wtedy style `padding-left` lub `padding-right` są dodawane do elementu nadrzędnego. 2. Gdy komponent znajduje się wewnątrz komponentu [``](/pl/docs/2/components/layout). Wtedy style `padding-left` lub `padding-right` nie są dodawane. ## Przykłady {#examples} ### Umieszczenie w określonym kontenerze {#example-contained} Domyślnie szyna nawigacyjna jest wyświetlana po lewej lub prawej stronie strony względem bieżącego okna. Jeśli chcesz umieścić szynę nawigacyjną w określonym kontenerze, możesz dodać atrybut `contained` do komponentu ``. Wtedy szyna nawigacyjna będzie wyświetlana względem elementu nadrzędnego (musisz samodzielnie dodać do elementu nadrzędnego styl `position: relative`). ```html
Ostatnie Obrazy Biblioteka
Treść strony
``` ### Znajdowanie się po prawej stronie {#example-placement} Ustawienie atrybutu `placement` na `right` na komponencie `` wyświetli szynę nawigacyjną po prawej stronie. ```html
Ostatnie Obrazy Biblioteka
Treść strony
``` ### Wyświetlanie separatora {#example-divider} Dodanie atrybutu `divider` do komponentu `` powoduje dodanie linii oddzielającej szynę nawigacyjną od treści strony. ```html
Ostatnie Obrazy Biblioteka
Treść strony
``` ### Dodawanie elementów na górze/na dole {#example-top-bottom} Możesz dodać elementy na górze i na dole komponentu `` za pomocą slotów `top` i `bottom`. ```html
Ostatnie Obrazy Biblioteka
Treść strony
``` ### Wyrównanie w pionie elementów nawigacji {#example-alignment} Ustaw atrybut `alignment` komponentu ``, aby zmienić wyrównanie w pionie elementów nawigacji. ```html
Ostatnie Obrazy Biblioteka
start center end
``` ### Ikona {#example-icon} Na komponencie `` możesz użyć atrybutu `icon` do ustawienia ikony dla nieaktywnego stanu, a `active-icon` dla aktywnego stanu. Możesz również użyć slotów `icon` i `active-icon` do ustawienia elementów ikony dla stanu nieaktywnego i aktywnego. ```html
Ostatnie Obrazy Biblioteka
Treść strony
``` ### Tylko ikona {#example-no-label} Komponent `` może zawierać tylko ikonę, bez tekstu. ```html
Treść strony
``` ### Link {#example-link} Ustawienie atrybutu `href` na komponencie `` zmienia element nawigacji w link. Dodatkowo możesz użyć atrybutów związanych z linkami: `download`, `target`, `rel`. ```html
Ostatnie Obrazy Biblioteka
Treść strony
``` ### Badge {#example-badge} W komponencie `` możesz dodać badge za pomocą slotu `badge`. ```html
Ostatnie 99+ Obrazy Biblioteka
Treść strony
``` ## mdui-navigation-rail-item API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
icon icon true string

Nazwa ikony Material Icons dla stanu nieaktywnego. Można również ustawić za pomocą slot="icon"
active-icon activeIcon true string

Nazwa ikony Material Icons dla stanu aktywnego. Można również ustawić za pomocą slot="active-icon"
value value true string

Wartość elementu nawigacyjnego
href href true string

Docelowy adres URL łącza.

Jeśli atrybut jest ustawiony, komponent jest renderowany jako element <a>, co umożliwia korzystanie z atrybutów dotyczących łączy.
download download true string

Nazwa pliku do pobrania.

Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut href.
target target true '_blank' | '_parent' | '_self' | '_top'

Sposób otwarcia łącza. Dozwolone wartości:

  • _blank: Otwiera w nowym oknie
  • _parent: Otwiera w oknie nadrzędnym
  • _self: Otwiera w bieżącej ramce
  • _top: Otwiera w całym oknie

Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut href.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Relacja między bieżącym dokumentem a dokumentem, do którego prowadzi łącze. Dozwolone wartości:

  • alternate: Alternatywna wersja bieżącego dokumentu
  • author: Autor bieżącego dokumentu lub artykułu
  • bookmark: Stałe łącze do najbliższej sekcji nadrzędnej
  • external: Dokument, do którego prowadzi łącze, nie znajduje się w tej samej witrynie co bieżący dokument
  • help: Łącze do powiązanej dokumentacji pomocy
  • license: Główna treść bieżącego dokumentu jest objęta prawami autorskimi dołączonego pliku
  • me: Bieżący dokument reprezentuje właściciela treści, do której prowadzi łącze
  • next: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest następnym dokumentem w tej sekwencji
  • nofollow: Autor lub wydawca bieżącego dokumentu nie rekomenduje dokumentu, do którego prowadzi łącze
  • noreferrer: Pomija nagłówek Referer. Efekt podobny do noopener
  • opener: Jeśli hiperłącze utworzy kontekst przeglądania najwyższego poziomu (tj. wartość atrybutu target to _blank), tworzy podrzędny kontekst przeglądania
  • prev: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest poprzednim dokumentem w tej sekwencji
  • search: Zawiera łącze do zasobu umożliwiającego przeszukiwanie bieżącego pliku i powiązanych z nim stron
  • tag: Zawiera znacznik (identyfikowany przez podany adres) mający zastosowanie do bieżącego dokumentu

Uwaga: Dostępne tylko wtedy, gdy określono atrybut href.
autofocus autofocus true boolean false

Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
tabindex tabIndex false number

Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).
### Metody
Nazwa Opis
click(): void

Symuluje kliknięcie myszą na elemencie
focus(options?: FocusOptions): void

Przenosi fokus na bieżący element.

Można przekazać obiekt jako parametr, którego właściwości obejmują:

  • preventScroll: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na true.
blur(): void

Usuwa fokus z bieżącego elementu
### Zdarzenia
Nazwa Opis
focus

Wywoływane po otrzymaniu fokusu
blur

Wywoływane po utracie fokusu
### Slots
Nazwa Opis
(domyślny)

Treść tekstowa
icon

Ikona
active-icon

Ikona dla stanu aktywnego
badge

Badge
### CSS Parts
Nazwa Opis
container

Kontener elementu nawigacyjnego
indicator

Wskaźnik
badge

Badge
icon

Ikona
active-icon

Ikona dla stanu aktywnego
label

Treść tekstowa
### Właściwości niestandardowe CSS
Nazwa Opis
--shape-corner-indicator

Wielkość zaokrąglenia rogów wskaźnika. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
## mdui-navigation-rail API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
value value true string

Wartość aktualnie zaznaczonego <mdui-navigation-rail-item>
placement placement true 'left' | 'right' 'left'

Pozycja szyny nawigacyjnej. Dozwolone wartości:

  • left: Po lewej stronie
  • right: Po prawej stronie
alignment alignment true 'start' | 'center' | 'end' 'start'

Wyrównanie elementów <mdui-navigation-rail-item>. Dozwolone wartości:

  • start: Wyrównanie do góry
  • center: Wyrównanie do środka
  • end: Wyrównanie do dołu
contained contained true boolean false

Domyślnie szyna nawigacyjna jest wyświetlana względem elementu body. Gdy ten atrybut jest ustawiony na true, szyna nawigacyjna będzie wyświetlana względem swojego elementu nadrzędnego.

Uwaga: Podczas ustawiania tego atrybutu należy ręcznie ustawić styl na elemencie nadrzędnym: position: relative;.
divider divider true boolean false

Określa, czy dodać separator między szyną nawigacyjną a treścią strony.
order order true number

Kolejność tego komponentu w układzie <mdui-layout>, sortowana od najmniejszej do największej. Domyślnie 0.
### Zdarzenia
Nazwa Opis
change

Wywoływane, gdy wartość się zmieni
### Slots
Nazwa Opis
(domyślny)

Komponent <mdui-navigation-rail-item>
top

Elementy u góry
bottom

Elementy na dole
### CSS Parts
Nazwa Opis
top

Kontener elementów górnych
bottom

Kontener elementów dolnych
items

Kontener komponentów <mdui-navigation-rail-item>
### Właściwości niestandardowe CSS
Nazwa Opis
--shape-corner

Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
--z-index

Wartość CSS z-index komponentu
# Komponent Radio Przycisk radiowy umożliwia wybranie jednej opcji z zestawu. Tylko jedna opcja może być zaznaczona jednocześnie. ## Sposób użycia {#usage} Zaimportuj komponenty: ```js import 'mdui/components/radio-group.js'; import 'mdui/components/radio.js'; ``` Zaimportuj typy TypeScript komponentów: ```ts import type { RadioGroup } from 'mdui/components/radio-group.js'; import type { Radio } from 'mdui/components/radio.js'; ``` Przykład użycia: ```html Chiński Angielski ``` ## Przykłady {#examples} ### Stan zaznaczenia {#example-checked} Wartość `value` komponentu `` to wartość `value` aktualnie zaznaczonego komponentu ``. Możesz również zmienić aktualnie zaznaczony przycisk radiowy, aktualizując wartość `value` komponentu ``. ```html Chiński Angielski ``` Możesz używać komponentu `` samodzielnie, odczytując i modyfikując stan zaznaczenia za pomocą atrybutu `checked`. ```html Radio ``` ### Stan wyłączony {#example-disabled} Dodanie atrybutu `disabled` do komponentu `` wyłącza całą grupę przycisków radiowych. ```html Chiński Angielski ``` Aby wyłączyć konkretny przycisk radiowy, dodaj atrybut `disabled` do komponentu ``. ```html Chiński Angielski ``` ### Ikona {#example-icon} Możesz ustawić atrybuty `unchecked-icon` i `checked-icon`, aby zdefiniować odpowiednio ikony Material Icons dla stanu niezaznaczonego i zaznaczonego. Możesz również użyć slotów `unchecked-icon` i `checked-icon`. ```html Chiński Angielski ``` ## mdui-radio-group API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
disabled disabled true boolean false

Określa, czy grupa przycisków radiowych jest wyłączona.
form form true string

Powiązany element <form>. Wartość tego atrybutu powinna być id elementu <form> na tej samej stronie.

Jeśli ten atrybut nie jest określony, element ten musi być elementem potomnym elementu <form>. Ten atrybut umożliwia umieszczenie elementu w dowolnym miejscu na stronie, nie tylko jako element potomny elementu <form>.
name name true string ''

Nazwa grupy przycisków radiowych, która zostanie wysłana wraz z danymi formularza
value value true string ''

Aktualnie zaznaczona wartość w grupie przycisków radiowych, która zostanie wysłana wraz z danymi formularza
undefined defaultValue false string ''

Domyślnie zaznaczona wartość. Po zresetowaniu formularza zostanie przywrócona do tej wartości. Ten atrybut można ustawić tylko za pomocą właściwości JavaScript
required required true boolean false

Określa, czy zaznaczenie jednego z przycisków radiowych jest wymagane podczas przesyłania formularza.
undefined validity false ValidityState

Obiekt stanu walidacji formularza, zobacz ValidityState
undefined validationMessage false string

Jeśli walidacja formularza nie powiedzie się, ten atrybut zawiera komunikat informacyjny. Jeśli walidacja się powiedzie, ten atrybut jest pustym ciągiem znaków
### Metody
Nazwa Opis
checkValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true
reportValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true.

Jeśli walidacja się nie powiedzie, na komponencie wyświetlany jest również komunikat o niepowodzeniu walidacji.
setCustomValidity(message: string): void

Ustawia niestandardowy komunikat o błędzie. Dopóki ten tekst nie jest pusty, oznacza to, że pole nie przeszło walidacji
### Zdarzenia
Nazwa Opis
change

Wywoływane po zmianie zaznaczonej wartości
input

Wywoływane po zmianie zaznaczonej wartości
invalid

Wywoływane, gdy pole formularza nie przejdzie walidacji
### Slots
Nazwa Opis
(domyślny)

Elementy <mdui-radio>
## mdui-radio API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
value value true string ''

Wartość bieżącego przycisku radiowego
disabled disabled true boolean false

Określa, czy przycisk radiowy jest wyłączony.
checked checked true boolean false

Określa, czy przycisk radiowy jest zaznaczony.
unchecked-icon uncheckedIcon true string

Nazwa ikony Material Icons dla stanu niezaznaczonego. Można również ustawić za pomocą slot="unchecked-icon"
checked-icon checkedIcon true string

Nazwa ikony Material Icons dla stanu zaznaczonego. Można również ustawić za pomocą slot="checked-icon"
autofocus autofocus true boolean false

Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
tabindex tabIndex false number

Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).
### Metody
Nazwa Opis
click(): void

Symuluje kliknięcie myszą na elemencie
focus(options?: FocusOptions): void

Przenosi fokus na bieżący element.

Można przekazać obiekt jako parametr, którego właściwości obejmują:

  • preventScroll: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na true.
blur(): void

Usuwa fokus z bieżącego elementu
### Zdarzenia
Nazwa Opis
focus

Wywoływane po otrzymaniu fokusu
blur

Wywoływane po utracie fokusu
change

Wywoływane po zaznaczeniu tego przycisku radiowego
### Slots
Nazwa Opis
(domyślny)

Treść tekstowa
unchecked-icon

Ikona dla stanu niezaznaczonego
checked-icon

Ikona dla stanu zaznaczonego
### CSS Parts
Nazwa Opis
control

Kontener ikony po lewej stronie
unchecked-icon

Ikona dla stanu niezaznaczonego
checked-icon

Ikona dla stanu zaznaczonego
label

Treść tekstowa
# Komponent RangeSlider Komponent suwaka zakresu umożliwia wybranie zakresu wartości. ## Sposób użycia {#usage} Zaimportuj komponent: ```js import 'mdui/components/range-slider.js'; ``` Zaimportuj typ TypeScript komponentu: ```ts import type { RangeSlider } from 'mdui/components/range-slider.js'; ``` Przykład użycia: ```html ``` ## Przykłady {#examples} ### Wartość domyślna {#example-value} Atrybut `value` pozwala odczytać lub ustawić bieżącą wartość suwaka zakresu. Wartość tego atrybutu jest tablicą i może być odczytywana i ustawiana tylko za pomocą właściwości JavaScript. ```html ``` ### Stan wyłączony {#example-disabled} Dodanie atrybutu `disabled` wyłącza suwak zakresu. ```html ``` ### Zakres {#example-min-max} Użyj atrybutów `min` i `max`, aby ustawić minimalną i maksymalną wartość suwaka zakresu. ```html ``` ### Krok {#example-step} Atrybut `step` ustawia krok suwaka zakresu. ```html ``` ### Znaczniki {#example-tickmarks} Dodanie atrybutu `tickmarks` wyświetli znaczniki na suwaku zakresu. ```html ``` ### Ukrywanie etykiety tekstowej {#example-nolabel} Dodanie atrybutu `nolabel` ukrywa etykietę tekstową na suwaku zakresu. ```html ``` ### Modyfikacja etykiety tekstowej {#example-labelFormatter} Właściwość JavaScript `labelFormatter` możesz zmienić format wyświetlanej etykiety tekstowej. Wartość tej właściwości to funkcja, której parametrem jest bieżąca wartość suwaka zakresu, a która zwraca tekst, który chcesz wyświetlić. ```html ``` ## mdui-range-slider API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
undefined defaultValue false number[] []

Wartość domyślna. Po zresetowaniu formularza zostanie przywrócona do tej wartości. Ten atrybut można ustawić tylko za pomocą właściwości JavaScript
undefined value false number[]

Wartość suwaka w formacie tablicy, która zostanie wysłana wraz z danymi formularza.

UWAGA: Tej właściwości nie można ustawić za pomocą atrybutu HTML. Aby zmienić tę wartość, można to zrobić tylko poprzez modyfikację wartości właściwości JavaScript.
autofocus autofocus true boolean false

Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
tabindex tabIndex false number

Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).
min min true number 0

Minimalna wartość suwaka, domyślnie 0
max max true number 100

Maksymalna wartość suwaka, domyślnie 100
step step true number 1

Skok wartości, domyślnie 1
tickmarks tickmarks true boolean false

Określa, czy dodać znaczniki podziałki
nolabel nolabel true boolean false

Określa, czy ukryć podpowiedź tekstową
disabled disabled true boolean false

Określa, czy komponent jest wyłączony.
form form true string

Powiązany element <form>. Wartość tego atrybutu powinna być id elementu <form> na tej samej stronie.

Jeśli ten atrybut nie jest określony, element ten musi być elementem potomnym elementu <form>. Ten atrybut umożliwia umieszczenie elementu w dowolnym miejscu na stronie, nie tylko jako element potomny elementu <form>.
name name true string ''

Nazwa suwaka, która zostanie wysłana wraz z danymi formularza
undefined validity false ValidityState

Obiekt stanu walidacji formularza, zobacz ValidityState
undefined validationMessage false string

Jeśli walidacja formularza nie powiedzie się, ten atrybut zawiera komunikat informacyjny. Jeśli walidacja się powiedzie, ten atrybut jest pustym ciągiem znaków
undefined labelFormatter false (value: number) => string

Funkcja formatująca etykietę. Przyjmuje bieżącą wartość suwaka, a zwraca tekst do wyświetlenia.
### Metody
Nazwa Opis
click(): void

Symuluje kliknięcie myszą na elemencie
focus(options?: FocusOptions): void

Przenosi fokus na bieżący element.

Można przekazać obiekt jako parametr, którego właściwości obejmują:

  • preventScroll: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na true.
blur(): void

Usuwa fokus z bieżącego elementu
checkValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true
reportValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true.

Jeśli walidacja się nie powiedzie, na komponencie wyświetlany jest również komunikat o niepowodzeniu walidacji.
setCustomValidity(message: string): void

Ustawia niestandardowy komunikat o błędzie. Dopóki ten tekst nie jest pusty, oznacza to, że pole nie przeszło walidacji
### Zdarzenia
Nazwa Opis
focus

Wywoływane po otrzymaniu fokusu
blur

Wywoływane po utracie fokusu
change

Wywoływane, gdy wartość ulegnie zmianie i element straci fokus
input

Wywoływane przy każdej zmianie wartości
invalid

Wywoływane, gdy pole formularza nie przejdzie walidacji
### CSS Parts
Nazwa Opis
track-inactive

Tor w stanie nieaktywnym
track-active

Tor w stanie aktywnym
handle

Uchwyt
label

Tekst podpowiedzi
tickmark

Znacznik podziałki
# Komponent Select Lista wyboru wyświetla opcje w rozwijanym menu, ułatwiając szybki wybór odpowiedniej treści. Ta strona dokumentuje użycie komponentu ``. W przypadku użycia elementów menu rozwijanego, zobacz [``](/pl/docs/2/components/menu#menu-item-api). ## Sposób użycia {#usage} Zaimportuj komponenty: ```js import 'mdui/components/select.js'; import 'mdui/components/menu-item.js'; ``` Zaimportuj typy TypeScript komponentów: ```ts import type { Select } from 'mdui/components/select.js'; import type { MenuItem } from 'mdui/components/menu-item.js'; ``` Przykład użycia: ```html Pozycja 1 Pozycja 2 ``` ## Przykłady {#examples} ### Kształt {#example-variant} Atrybut `variant` ustawia kształt listy wyboru. ```html Pozycja 1 Pozycja 2 Pozycja 1 Pozycja 2 ``` ### Obsługa wielokrotnego wyboru {#example-multiple} Lista wyboru domyślnie umożliwia pojedynczy wybór, a wartość `value` komponentu `` jest wartością `value` zaznaczonego [``](/pl/docs/2/components/menu#menu-item-api). Dodanie atrybutu `multiple` umożliwia wielokrotny wybór. Wartość `value` komponentu `` jest wtedy tablicą wartości `value` zaznaczonych [``](/pl/docs/2/components/menu#menu-item-api). Uwaga: W trybie wielokrotnego wyboru, wartość `value` komponentu `` jest tablicą i może być odczytywana i ustawiana tylko za pomocą właściwości JavaScript. ```html Pozycja 1 Pozycja 2 Pozycja 3 ``` ### Tekst pomocniczy {#example-helper-text} Atrybut `label` ustawia tekst etykiety nad listą wyboru. ```html Pozycja 1 Pozycja 2 ``` Atrybut `placeholder` ustawia tekst zastępczy, gdy nie wybrano wartości. ```html Pozycja 1 Pozycja 2 ``` Atrybut `helper` ustawia tekst pomocniczy na dole listy wyboru. Możesz również użyć slotu `helper`. ```html Pozycja 1 Pozycja 2 Pozycja 1 Pozycja 2 Tekst pomocniczy ``` ### Tryb tylko do odczytu {#example-readonly} Dodanie atrybutu `readonly` ustawia listę wyboru w tryb tylko do odczytu. ```html Pozycja 1 Pozycja 2 ``` ### Tryb wyłączony {#example-disabled} Dodanie atrybutu `disabled` wyłącza listę wyboru. ```html Pozycja 1 Pozycja 2 ``` ### Możliwość wyczyszczenia {#example-clearable} Dodanie atrybutu `clearable` powoduje pojawienie się przycisku czyszczenia po prawej stronie, gdy lista wyboru ma wartość. ```html Pozycja 1 Pozycja 2 ``` Możesz również dostosować przycisk czyszczenia za pomocą slotu `clear`. ```html Pozycja 1 Pozycja 2 ``` ### Pozycja menu rozwijanego {#example-placement} Atrybut `placement` ustawia pozycję rozwijanego menu. ```html Pozycja 1 Pozycja 2 ``` ### Wyrównanie tekstu do prawej {#example-end-aligned} Dodanie atrybutu `end-aligned` powoduje wyrównanie tekstu do prawej. ```html Pozycja 1 Pozycja 2 ``` ### Tekst i ikony przed i po {#example-prefix-suffix} Ustaw atrybuty `icon` i `end-icon`, aby dodać ikony Material Icons odpowiednio po lewej i prawej stronie listy wyboru. Możesz również użyć slotów `icon` i `end-icon` do dodania elementów. ```html Pozycja 1 Pozycja 2

Pozycja 1 Pozycja 2 ``` Ustaw atrybuty `prefix` i `suffix`, aby dodać tekst odpowiednio po lewej i prawej stronie listy wyboru. Możesz również użyć slotów `prefix` i `suffix` do dodania elementów tekstowych. Te teksty są wyświetlane tylko wtedy, gdy lista wyboru jest skupiona lub ma wartość. ```html Pozycja 1 Pozycja 2

Pozycja 1 Pozycja 2 $ /100 ``` ## mdui-select API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
variant variant true 'filled' | 'outlined' 'filled'

Styl listy wyboru. Dozwolone wartości:

  • filled: Lista wyboru z kolorem tła, silniejszy efekt wizualny
  • outlined: Lista wyboru z obramowaniem, słabszy efekt wizualny
multiple multiple true boolean false

Określa, czy lista wyboru obsługuje wielokrotny wybór.
name name true string ''

Nazwa listy wyboru, która zostanie wysłana wraz z danymi formularza
value value false string | string[] ''

Wartość listy wyboru, która zostanie wysłana wraz z danymi formularza.

Jeśli atrybut multiple nie jest określony, wartością jest ciąg znaków; jeśli atrybut multiple jest określony, wartością jest tablica ciągów znaków. Atrybut HTML może ustawić tylko wartość ciągu znaków; jeśli chcesz ustawić wartość tablicy, ustaw ją za pomocą właściwości JavaScript.
undefined defaultValue false string | string[] ''

Domyślnie zaznaczona wartość. Po zresetowaniu formularza zostanie przywrócona do tej wartości. Ten atrybut można ustawić tylko za pomocą właściwości JavaScript
label label true string

Tekst etykiety
placeholder placeholder true string

Tekst zastępczy
helper helper true string

Tekst pomocniczy pod listą wyboru. Można również ustawić za pomocą slot="helper"
clearable clearable true boolean false

Określa, czy można wyczyścić listę wyboru.
clear-icon clearIcon true string

Nazwa ikony Material Icons dla przycisku czyszczenia wyświetlanego po prawej stronie listy wyboru, gdy lista jest możliwa do wyczyszczenia. Można również ustawić za pomocą slot="clear-icon"
placement placement true 'auto' | 'bottom' | 'top' 'auto'

Pozycja listy wyboru. Dozwolone wartości:

  • auto: Automatyczne określenie pozycji
  • bottom: Poniżej
  • top: Powyżej
end-aligned endAligned true boolean false

Określa, czy tekst ma być wyrównany do prawej.
prefix prefix true string

Tekst prefiksu listy wyboru. Wyświetlany tylko w stanie fokusu lub gdy lista wyboru ma wartość. Można również ustawić za pomocą slot="prefix"
suffix suffix true string

Tekst sufiksu listy wyboru. Wyświetlany tylko w stanie fokusu lub gdy lista wyboru ma wartość. Można również ustawić za pomocą slot="suffix"
icon icon true string

Nazwa ikony Material Icons dla ikony prefiksu listy wyboru. Można również ustawić za pomocą slot="icon"
end-icon endIcon true string

Nazwa ikony Material Icons dla ikony sufiksu listy wyboru. Można również ustawić za pomocą slot="end-icon"
error-icon errorIcon true string

Nazwa ikony Material Icons wyświetlana po prawej stronie listy wyboru, gdy walidacja pola formularza nie powiedzie się. Można również ustawić za pomocą slot="error-icon"
form form true string

Powiązany element <form>. Wartość tego atrybutu powinna być id elementu <form> na tej samej stronie.

Jeśli ten atrybut nie jest określony, element ten musi być elementem potomnym elementu <form>. Ten atrybut umożliwia umieszczenie elementu w dowolnym miejscu na stronie, nie tylko jako element potomny elementu <form>.
readonly readonly true boolean false

Określa, czy jest w stanie tylko do odczytu.
disabled disabled true boolean false

Określa, czy lista wyboru jest wyłączona.
required required true boolean false

Określa, czy wybranie wartości jest wymagane podczas przesyłania formularza.
undefined validity false ValidityState

Obiekt stanu walidacji formularza, zobacz ValidityState
undefined validationMessage false string

Jeśli walidacja formularza nie powiedzie się, ten atrybut zawiera komunikat informacyjny. Jeśli walidacja się powiedzie, ten atrybut jest pustym ciągiem znaków
autofocus autofocus true boolean false

Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
tabindex tabIndex false number

Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).
### Metody
Nazwa Opis
checkValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true
reportValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true.

Jeśli walidacja się nie powiedzie, na komponencie wyświetlany jest również komunikat o niepowodzeniu walidacji.
setCustomValidity(message: string): void

Ustawia niestandardowy komunikat o błędzie. Dopóki ten tekst nie jest pusty, oznacza to, że pole nie przeszło walidacji
click(): void

Symuluje kliknięcie myszą na elemencie
focus(options?: FocusOptions): void

Przenosi fokus na bieżący element.

Można przekazać obiekt jako parametr, którego właściwości obejmują:

  • preventScroll: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na true.
blur(): void

Usuwa fokus z bieżącego elementu
### Zdarzenia
Nazwa Opis
focus

Wywoływane po otrzymaniu fokusu
blur

Wywoływane po utracie fokusu
change

Wywoływane po zmianie zaznaczonej wartości
invalid

Wywoływane, gdy pole formularza nie przejdzie walidacji
clear

Wywoływane po kliknięciu przycisku czyszczenia generowanego przez atrybut clearable. Można zapobiec wyczyszczeniu listy wyboru, wywołując event.preventDefault()
### Slots
Nazwa Opis
(domyślny)

Elementy <mdui-menu-item>
icon

Ikona po lewej stronie
end-icon

Ikona po prawej stronie
error-icon

Ikona po prawej stronie w stanie błędu walidacji
prefix

Tekst po lewej stronie
suffix

Tekst po prawej stronie
clear-button

Przycisk czyszczenia
clear-icon

Ikona w przycisku czyszczenia
helper

Tekst pomocniczy na dole
### CSS Parts
Nazwa Opis
chips

Kontener na chipy dla zaznaczonych wartości w trybie wielokrotnego wyboru
chip

Chip dla każdej zaznaczonej wartości w trybie wielokrotnego wyboru
chip__button

Element <button> wewnątrz chipa
chip__label

Tekst wewnątrz chipa
chip__delete-icon

Ikona usuwania wewnątrz chipa
text-field

Pole tekstowe, tj. element <mdui-text-field>
text-field__container

Kontener pola tekstowego wewnątrz text-field
text-field__icon

Ikona po lewej stronie wewnątrz text-field
text-field__end-icon

Ikona po prawej stronie wewnątrz text-field
text-field__error-icon

Ikona po prawej stronie w stanie błędu walidacji wewnątrz text-field
text-field__prefix

Tekst po lewej stronie wewnątrz text-field
text-field__suffix

Tekst po prawej stronie wewnątrz text-field
text-field__label

Tekst etykiety wewnątrz text-field
text-field__input

Element <input> wewnątrz text-field
text-field__clear-button

Przycisk czyszczenia wewnątrz text-field
text-field__clear-icon

Ikona w przycisku czyszczenia wewnątrz text-field
text-field__supporting

Kontener na dodatkowe informacje na dole wewnątrz text-field, obejmujący helper i error
text-field__helper

Tekst pomocniczy na dole wewnątrz text-field
text-field__error

Tekst opisu błędu na dole wewnątrz text-field
menu

Menu rozwijane, tj. element <mdui-menu>
# Komponent SegmentedButton Komponent segmentowanego przycisku grupuje zestaw przycisków, służących do wyboru opcji, przełączania widoków lub sortowania elementów. ## Sposób użycia {#usage} Zaimportuj komponenty: ```js import 'mdui/components/segmented-button-group.js'; import 'mdui/components/segmented-button.js'; ``` Zaimportuj typy TypeScript komponentów: ```ts import type { SegmentedButtonGroup } from 'mdui/components/segmented-button-group.js'; import type { SegmentedButton } from 'mdui/components/segmented-button.js'; ``` Przykład użycia: ```html Dzień Tydzień Miesiąc ``` ## Przykłady {#examples} ### Pełna szerokość {#example-full-width} Dodanie atrybutu `full-width` do elementu `` powoduje, że komponent zajmuje całą dostępną szerokość. ```html Dzień Tydzień Miesiąc ``` ### Tryb pojedynczego wyboru {#example-selects-single} Ustawienie atrybutu `selects` na `single` w elemencie `` umożliwia tryb pojedynczego wyboru. Wartość `value` komponentu `` jest wtedy równa wartości `value` zaznaczonego ``. ```html Dzień Tydzień Miesiąc Dzień Tydzień Miesiąc ``` ### Tryb wielokrotnego wyboru {#example-selects-multiple} Ustawienie atrybutu `selects` na `multiple` w elemencie `` umożliwia tryb wielokrotnego wyboru. Wartość `value` komponentu `` jest wtedy tablicą wartości `value` zaznaczonych ``. Uwaga: W trybie wielokrotnego wyboru, wartość `value` komponentu `` jest tablicą i może być odczytywana i ustawiana tylko za pomocą właściwości JavaScript. ```html Dzień Tydzień Miesiąc Dzień Tydzień Miesiąc ``` ### Ikona {#example-icon} Na elemencie `` możesz użyć atrybutów `icon` i `end-icon`, aby dodać ikony Material Icons odpowiednio po lewej i prawej stronie przycisku. Możesz również użyć slotów `icon` i `end-icon` do dodania elementów po lewej i prawej stronie. ```html Dzień Tydzień Miesiąc ``` Na elemencie `` możesz dodać atrybut `selected-icon`, aby ustawić ikonę Material Icons dla stanu zaznaczonego. Możesz również użyć slotu `selected-icon`. ```html Dzień Tydzień ``` ### Link {#example-link} Ustawienie atrybutu `href` na elemencie `` zmienia przycisk w link. Dodatkowo możesz użyć atrybutów związanych z linkami: `download`, `target`, `rel`. ```html Link Tydzień Miesiąc ``` ### Stan wyłączony i ładowania {#example-disabled} Dodanie atrybutu `disabled` do elementu `` wyłącza całą grupę przycisków segmentowanych. ```html Dzień Tydzień Miesiąc ``` Dodanie atrybutu `disabled` do elementu `` wyłącza konkretny przycisk; dodanie atrybutu `loading` dodaje stan ładowania. ```html Dzień Tydzień Miesiąc Rok ``` ## mdui-segmented-button-group API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
full-width fullWidth true boolean false

Określa, czy wypełnić całą szerokość elementu nadrzędnego.
selects selects true 'single' | 'multiple'

Stan zaznaczalności przycisku segmentowanego, domyślnie niezaznaczalny. Dozwolone wartości:

  • single: Pojedynczy wybór
  • multiple: Wielokrotny wybór
disabled disabled true boolean false

Określa, czy grupa przycisków segmentowanych jest wyłączona.
required required true boolean false

Określa, czy zaznaczenie jest wymagane podczas przesyłania formularza.
form form true string

Powiązany element <form>. Wartość tego atrybutu powinna być id elementu <form> na tej samej stronie.

Jeśli ten atrybut nie jest określony, element ten musi być elementem potomnym elementu <form>. Ten atrybut umożliwia umieszczenie elementu w dowolnym miejscu na stronie, nie tylko jako element potomny elementu <form>.
name name true string ''

Nazwa wysyłana z formularzem
value value false string | string[] ''

Wartość aktualnie zaznaczonego <mdui-segmented-button>.

Uwaga: Atrybut HTML tej właściwości jest zawsze ciągiem znaków i można ustawić wartość początkową przez atrybut HTML tylko wtedy, gdy selects="single". Wartość właściwości JavaScript jest ciągiem znaków, gdy selects="single", a tablicą ciągów znaków, gdy selects="multiple". Dlatego, gdy selects="multiple", aby zmienić tę wartość, można to zrobić tylko poprzez modyfikację wartości właściwości JavaScript.
undefined defaultValue false string | string[] ''

Domyślnie zaznaczona wartość. Po zresetowaniu formularza zostanie przywrócona do tej wartości. Ten atrybut można ustawić tylko za pomocą właściwości JavaScript
undefined validity false ValidityState

Obiekt stanu walidacji formularza, zobacz ValidityState
undefined validationMessage false string

Jeśli walidacja formularza nie powiedzie się, ten atrybut zawiera komunikat informacyjny. Jeśli walidacja się powiedzie, ten atrybut jest pustym ciągiem znaków
### Metody
Nazwa Opis
checkValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true
reportValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true.

Jeśli walidacja się nie powiedzie, na komponencie wyświetlany jest również komunikat o niepowodzeniu walidacji.
setCustomValidity(message: string): void

Ustawia niestandardowy komunikat o błędzie. Dopóki ten tekst nie jest pusty, oznacza to, że pole nie przeszło walidacji
### Zdarzenia
Nazwa Opis
change

Wywoływane po zmianie zaznaczonej wartości
invalid

Wywoływane, gdy pole formularza nie przejdzie walidacji
### Slots
Nazwa Opis
(domyślny)

Komponent <mdui-segmented-button>
### Właściwości niestandardowe CSS
Nazwa Opis
--shape-corner

Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
## mdui-segmented-button API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
icon icon true string

Nazwa ikony Material Icons po lewej stronie. Można również ustawić za pomocą slot="icon"
end-icon endIcon true string

Nazwa ikony Material Icons po prawej stronie. Można również ustawić za pomocą slot="end-icon"
selected-icon selectedIcon true string

Nazwa ikony Material Icons dla stanu zaznaczonego. Można również ustawić za pomocą slot="selected-icon"
href href true string

Docelowy adres URL łącza.

Jeśli atrybut jest ustawiony, komponent jest renderowany jako element <a>, co umożliwia korzystanie z atrybutów dotyczących łączy.
download download true string

Nazwa pliku do pobrania.

Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut href.
target target true '_blank' | '_parent' | '_self' | '_top'

Sposób otwarcia łącza. Dozwolone wartości:

  • _blank: Otwiera w nowym oknie
  • _parent: Otwiera w oknie nadrzędnym
  • _self: Otwiera w bieżącej ramce
  • _top: Otwiera w całym oknie

Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut href.
rel rel true 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag'

Relacja między bieżącym dokumentem a dokumentem, do którego prowadzi łącze. Dozwolone wartości:

  • alternate: Alternatywna wersja bieżącego dokumentu
  • author: Autor bieżącego dokumentu lub artykułu
  • bookmark: Stałe łącze do najbliższej sekcji nadrzędnej
  • external: Dokument, do którego prowadzi łącze, nie znajduje się w tej samej witrynie co bieżący dokument
  • help: Łącze do powiązanej dokumentacji pomocy
  • license: Główna treść bieżącego dokumentu jest objęta prawami autorskimi dołączonego pliku
  • me: Bieżący dokument reprezentuje właściciela treści, do której prowadzi łącze
  • next: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest następnym dokumentem w tej sekwencji
  • nofollow: Autor lub wydawca bieżącego dokumentu nie rekomenduje dokumentu, do którego prowadzi łącze
  • noreferrer: Pomija nagłówek Referer. Efekt podobny do noopener
  • opener: Jeśli hiperłącze utworzy kontekst przeglądania najwyższego poziomu (tj. wartość atrybutu target to _blank), tworzy podrzędny kontekst przeglądania
  • prev: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest poprzednim dokumentem w tej sekwencji
  • search: Zawiera łącze do zasobu umożliwiającego przeszukiwanie bieżącego pliku i powiązanych z nim stron
  • tag: Zawiera znacznik (identyfikowany przez podany adres) mający zastosowanie do bieżącego dokumentu

Uwaga: Dostępne tylko wtedy, gdy określono atrybut href.
autofocus autofocus true boolean false

Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
tabindex tabIndex false number

Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).
disabled disabled true boolean false

Określa, czy komponent jest wyłączony.
loading loading true boolean false

Określa, czy komponent jest w stanie ładowania.
name name true string ''

Nazwa przycisku, która zostanie wysłana wraz z danymi formularza.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href.
value value true string ''

Wartość początkowa przycisku, która zostanie wysłana wraz z danymi formularza.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href.
type type true 'submit' | 'reset' | 'button' 'button'

Typ przycisku. Typ domyślny to button. Dozwolone typy:

  • submit: Kliknięcie przycisku przesyła dane formularza do serwera
  • reset: Kliknięcie przycisku resetuje wszystkie elementy formularza do ich wartości początkowych
  • button: Ten typ przycisku nie ma domyślnego zachowania

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href.
form form true string

Powiązany element <form>. Wartość tego atrybutu powinna być id elementu <form> na tej samej stronie.

Jeśli ten atrybut nie jest określony, element ten musi być elementem potomnym elementu <form>. Ten atrybut umożliwia umieszczenie elementu w dowolnym miejscu na stronie, nie tylko jako element potomny elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie określono atrybutu href.
formaction formAction true string

Określa adres URL do przesłania formularza.

Jeśli ten atrybut jest określony, zastępuje atrybut action elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie określono atrybutu href i type="submit".
formenctype formEnctype true 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'

Określa typ zawartości przesyłanej do serwera podczas wysyłania formularza. Dozwolone wartości:

  • application/x-www-form-urlencoded: Wartość domyślna, gdy atrybut nie jest określony
  • multipart/form-data: Używany, gdy formularz zawiera element <input type="file">
  • text/plain: Nowość w HTML5, używana do debugowania

Jeśli ten atrybut jest określony, zastępuje atrybut enctype elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie określono atrybutu href i type="submit".
formmethod formMethod true 'post' | 'get'

Określa metodę HTTP używaną do przesłania formularza. Dozwolone wartości:

  • post: Dane formularza są zawarte w treści formularza i wysyłane do serwera
  • get: Dane formularza są dołączane do adresu URI formularza za pomocą separatora ?, a wygenerowany adres URI jest wysyłany do serwera. Tej metody należy używać, gdy formularz nie powoduje skutków ubocznych i zawiera tylko znaki ASCII

Jeśli ten atrybut jest ustawiony, zastępuje atrybut method elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href i type="submit".
formnovalidate formNoValidate true boolean false

Jeśli ten atrybut jest ustawiony, formularz nie jest walidowany podczas wysyłania.

Jeśli ten atrybut jest ustawiony, zastępuje atrybut novalidate elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href i type="submit".
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

Określa, gdzie wyświetlić odpowiedź otrzymaną po przesłaniu formularza. Dozwolone wartości:

  • _self: Otwiera w bieżącej ramce
  • _blank: Otwiera w nowym oknie
  • _parent: Otwiera w oknie nadrzędnym
  • _top: Otwiera w całym oknie

Jeśli ten atrybut jest ustawiony, zastępuje atrybut target elementu <form>.

Uwaga: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu href i type="submit".
undefined validity false ValidityState

Obiekt stanu walidacji formularza, zobacz ValidityState
undefined validationMessage false string

Jeśli walidacja formularza nie powiedzie się, ten atrybut zawiera komunikat informacyjny. Jeśli walidacja się powiedzie, ten atrybut jest pustym ciągiem znaków
### Metody
Nazwa Opis
click(): void

Symuluje kliknięcie myszą na elemencie
focus(options?: FocusOptions): void

Przenosi fokus na bieżący element.

Można przekazać obiekt jako parametr, którego właściwości obejmują:

  • preventScroll: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na true.
blur(): void

Usuwa fokus z bieżącego elementu
checkValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true
reportValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true.

Jeśli walidacja się nie powiedzie, na komponencie wyświetlany jest również komunikat o niepowodzeniu walidacji.
setCustomValidity(message: string): void

Ustawia niestandardowy komunikat o błędzie. Dopóki ten tekst nie jest pusty, oznacza to, że pole nie przeszło walidacji
### Zdarzenia
Nazwa Opis
focus

Wywoływane po otrzymaniu fokusu
blur

Wywoływane po utracie fokusu
invalid

Wywoływane, gdy pole formularza nie przejdzie walidacji
### Slots
Nazwa Opis
(domyślny)

Treść tekstowa elementu przycisku segmentowanego
icon

Ikona po lewej stronie elementu przycisku segmentowanego
selected-icon

Ikona po lewej stronie w stanie zaznaczonym
end-icon

Ikona po prawej stronie elementu przycisku segmentowanego
### CSS Parts
Nazwa Opis
button

Wewnętrzny element <button> lub <a>
icon

Ikona po lewej stronie
selected-icon

Ikona po lewej stronie w stanie zaznaczonym
end-icon

Ikona po prawej stronie
label

Treść tekstowa
loading

Element <mdui-circular-progress> w stanie ładowania
# Komponent Slider Komponent suwaka umożliwia wybranie wartości przez przesunięcie uchwytu. ## Sposób użycia {#usage} Zaimportuj komponent: ```js import 'mdui/components/slider.js'; ``` Zaimportuj typ TypeScript komponentu: ```ts import type { Slider } from 'mdui/components/slider.js'; ``` Przykład użycia: ```html ``` ## Przykłady {#examples} ### Wartość domyślna {#example-value} Atrybut `value` pozwala odczytać lub ustawić bieżącą wartość suwaka. ```html ``` ### Stan wyłączony {#example-disabled} Dodanie atrybutu `disabled` wyłącza suwak. ```html ``` ### Zakres {#example-min-max} Użyj atrybutów `min` i `max`, aby ustawić minimalną i maksymalną wartość suwaka. ```html ``` ### Krok {#example-step} Atrybut `step` ustawia krok suwaka. ```html ``` ### Znaczniki {#example-tickmarks} Dodanie atrybutu `tickmarks` wyświetli znaczniki na suwaku. ```html ``` ### Ukrywanie etykiety tekstowej {#example-nolabel} Aby ukryć etykietę tekstową na suwaku, dodaj atrybut `nolabel`. ```html ``` ### Modyfikacja etykiety tekstowej {#example-labelFormatter} Właściwość JavaScript `labelFormatter` możesz zmienić format wyświetlanej etykiety tekstowej. Wartość tej właściwości to funkcja, która jako parametr przyjmuje bieżącą wartość suwaka i zwraca tekst, który chcesz wyświetlić. ```html ``` ## mdui-slider API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
value value false number 0

Wartość suwaka, która zostanie wysłana wraz z danymi formularza
undefined defaultValue false number 0

Wartość domyślna. Po zresetowaniu formularza zostanie przywrócona do tej wartości. Ten atrybut można ustawić tylko za pomocą właściwości JavaScript
autofocus autofocus true boolean false

Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
tabindex tabIndex false number

Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).
min min true number 0

Minimalna wartość suwaka, domyślnie 0
max max true number 100

Maksymalna wartość suwaka, domyślnie 100
step step true number 1

Skok wartości, domyślnie 1
tickmarks tickmarks true boolean false

Określa, czy dodać znaczniki podziałki
nolabel nolabel true boolean false

Określa, czy ukryć podpowiedź tekstową
disabled disabled true boolean false

Określa, czy komponent jest wyłączony.
form form true string

Powiązany element <form>. Wartość tego atrybutu powinna być id elementu <form> na tej samej stronie.

Jeśli ten atrybut nie jest określony, element ten musi być elementem potomnym elementu <form>. Ten atrybut umożliwia umieszczenie elementu w dowolnym miejscu na stronie, nie tylko jako element potomny elementu <form>.
name name true string ''

Nazwa suwaka, która zostanie wysłana wraz z danymi formularza
undefined validity false ValidityState

Obiekt stanu walidacji formularza, zobacz ValidityState
undefined validationMessage false string

Jeśli walidacja formularza nie powiedzie się, ten atrybut zawiera komunikat informacyjny. Jeśli walidacja się powiedzie, ten atrybut jest pustym ciągiem znaków
undefined labelFormatter false (value: number) => string

Funkcja formatująca etykietę. Przyjmuje bieżącą wartość suwaka, a zwraca tekst do wyświetlenia.
### Metody
Nazwa Opis
click(): void

Symuluje kliknięcie myszą na elemencie
focus(options?: FocusOptions): void

Przenosi fokus na bieżący element.

Można przekazać obiekt jako parametr, którego właściwości obejmują:

  • preventScroll: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na true.
blur(): void

Usuwa fokus z bieżącego elementu
checkValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true
reportValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true.

Jeśli walidacja się nie powiedzie, na komponencie wyświetlany jest również komunikat o niepowodzeniu walidacji.
setCustomValidity(message: string): void

Ustawia niestandardowy komunikat o błędzie. Dopóki ten tekst nie jest pusty, oznacza to, że pole nie przeszło walidacji
### Zdarzenia
Nazwa Opis
focus

Wywoływane po otrzymaniu fokusu
blur

Wywoływane po utracie fokusu
change

Wywoływane, gdy wartość ulegnie zmianie i element straci fokus
input

Wywoływane przy każdej zmianie wartości
invalid

Wywoływane, gdy pole formularza nie przejdzie walidacji
### CSS Parts
Nazwa Opis
track-inactive

Tor w stanie nieaktywnym
track-active

Tor w stanie aktywnym
handle

Uchwyt
label

Tekst podpowiedzi
tickmark

Znacznik podziałki
# Komponent Snackbar Komponent Snackbar wyświetla krótkie informacje o procesie aplikacji na stronie. Oprócz bezpośredniego używania tego komponentu, mdui udostępnia funkcję [`mdui.snackbar`](/pl/docs/2/functions/snackbar), która upraszcza korzystanie z komponentu Snackbar. ## Sposób użycia {#usage} Zaimportuj komponent: ```js import 'mdui/components/snackbar.js'; ``` Zaimportuj typ TypeScript komponentu: ```ts import type { Snackbar } from 'mdui/components/snackbar.js'; ``` Przykład użycia: ```html Zdjęcie zarchiwizowane Otwórz Snackbar ``` ## Przykłady {#examples} ### Pozycja {#example-placement} Atrybut `placement` ustawia pozycję wyświetlania Snackbara. ```html
Zdjęcie zarchiwizowane top-start Zdjęcie zarchiwizowane top Zdjęcie zarchiwizowane top-end
Zdjęcie zarchiwizowane bottom-start Zdjęcie zarchiwizowane bottom Zdjęcie zarchiwizowane bottom-end
``` ### Przycisk akcji {#example-action} Możesz użyć atrybutu `action`, aby dodać przycisk akcji po prawej stronie Snackbara i określić tekst przycisku za pomocą tego atrybutu. Kliknięcie przycisku akcji wyzwala zdarzenie `action-click`. Jeśli chcesz, aby przycisk akcji był w stanie ładowania, dodaj atrybut `action-loading`. ```html Zdjęcie zarchiwizowane Otwórz Snackbar ``` Możesz również dodać niestandardowy element po prawej stronie Snackbara za pomocą slotu `action`. ```html Zdjęcie zarchiwizowane Cofnij Otwórz Snackbar ``` ### Możliwość zamknięcia {#example-closeable} Dodanie atrybutu `closeable` powoduje pojawienie się przycisku zamykania po prawej stronie Snackbara. Kliknięcie tego przycisku zamyka Snackbar i wyzwala zdarzenie `close`. ```html Zdjęcie zarchiwizowane Otwórz Snackbar ``` Możesz dostosować element przycisku zamykania za pomocą slotu `close-button`. ```html Zdjęcie zarchiwizowane Otwórz Snackbar ``` Ustawienie atrybutu `close-icon` pozwala zmienić ikonę Material Icons w domyślnym przycisku zamykania. Możesz również dostosować element ikony przycisku zamykania za pomocą slotu `close-icon`. ```html Zdjęcie zarchiwizowane Otwórz Snackbar ``` ### Liczba wierszy tekstu {#example-message-line} Domyślnie tekst wiadomości nie ma ograniczenia liczby wierszy. Możesz ograniczyć liczbę wierszy tekstu za pomocą atrybutu `message-line`, maksymalnie do 2 wierszy. ```html Element ma już etykietę „podróż”. Możesz dodać nową etykietę. Możesz dodać nową etykietę. Otwórz Snackbar ``` ### Opóźnienie automatycznego zamykania {#example-auto-close-delay} Atrybut `auto-close-delay` ustawia opóźnienie automatycznego zamykania w milisekundach. Domyślnie wynosi 5000 milisekund. ```html Zdjęcie zarchiwizowane Otwórz Snackbar ``` ### Zamknięcie po kliknięciu poza obszarem {#example-close-on-outside-click} Dodanie atrybutu `close-on-outside-click` umożliwia zamknięcie Snackbara po kliknięciu w obszar poza nim. ```html Zdjęcie zarchiwizowane Otwórz Snackbar ``` ## mdui-snackbar API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
open open true boolean false

Określa, czy Snackbar jest wyświetlany.
placement placement true 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' 'bottom'

Pozycja wyświetlania Snackbara. Domyślnie bottom. Dozwolone wartości:

  • top: Na górze, wyśrodkowany
  • top-start: Na górze, wyrównany do lewej
  • top-end: Na górze, wyrównany do prawej
  • bottom: Na dole, wyśrodkowany
  • bottom-start: Na dole, wyrównany do lewej
  • bottom-end: Na dole, wyrównany do prawej
action action true string

Tekst przycisku akcji. Można również ustawić przycisk akcji za pomocą slot="action"
action-loading actionLoading true boolean false

Określa, czy przycisk akcji jest w stanie ładowania.
closeable closeable true boolean false

Określa, czy wyświetlać przycisk zamykania po prawej stronie.
close-icon closeIcon true string

Nazwa ikony Material Icons dla przycisku zamykania. Można również ustawić za pomocą slot="close-icon"
message-line messageLine true 1 | 2

Maksymalna liczba wierszy wyświetlanych dla tekstu wiadomości. Domyślnie bez ograniczeń. Dozwolone wartości:

  • 1: Maksymalnie jeden wiersz
  • 2: Maksymalnie dwa wiersze
auto-close-delay autoCloseDelay true number 5000

Opóźnienie automatycznego zamykania (w milisekundach). Ustawienie 0 oznacza brak automatycznego zamykania. Domyślnie 5000 milisekund
close-on-outside-click closeOnOutsideClick true boolean false

Określa, czy zamknąć Snackbar po kliknięciu lub dotknięciu obszaru poza nim.
### Zdarzenia
Nazwa Opis
open

Wywoływane przed wyświetleniem Snackbara. Można zapobiec wyświetleniu, wywołując event.preventDefault()
opened

Wywoływane po zakończeniu animacji wyświetlania Snackbara
close

Wywoływane przed ukryciem Snackbara. Można zapobiec zamknięciu, wywołując event.preventDefault()
closed

Wywoływane po zakończeniu animacji ukrywania Snackbara
action-click

Wywoływane po kliknięciu przycisku akcji
### Slots
Nazwa Opis
(domyślny)

Treść tekstowa wiadomości Snackbara
action

Przycisk akcji po prawej stronie
close-button

Przycisk zamykania po prawej stronie. Aby był widoczny, należy ustawić atrybut closeable na true
close-icon

Ikona w przycisku zamykania
### CSS Parts
Nazwa Opis
message

Tekst wiadomości
action

Przycisk akcji
close-button

Przycisk zamykania
close-icon

Ikona w przycisku zamykania
### Właściwości niestandardowe CSS
Nazwa Opis
--shape-corner

Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
--z-index

Wartość CSS z-index komponentu
# Komponent Switch Przełącznik pozwala przełączać stan włącz/wyłącz dla pojedynczej opcji, umożliwiając łatwą regulację ustawień. ## Sposób użycia {#usage} Zaimportuj komponent: ```js import 'mdui/components/switch.js'; ``` Zaimportuj typ TypeScript komponentu: ```ts import type { Switch } from 'mdui/components/switch.js'; ``` Przykład użycia: ```html ``` ## Przykłady {#examples} ### Stan zaznaczenia {#example-checked} Gdy przełącznik jest zaznaczony, atrybut `checked` ma wartość `true`. Możesz również dodać atrybut `checked`, aby przełącznik był domyślnie zaznaczony. ```html ``` ### Stan wyłączony {#example-disabled} Dodanie atrybutu `disabled` wyłącza komponent przełącznika. ```html ``` ### Ikona {#example-icon} Możesz ustawić atrybut `unchecked-icon`, aby określić ikonę Material Icons dla stanu niezaznaczonego, oraz atrybut `checked-icon` dla stanu zaznaczonego. Możesz również użyć slotów `unchecked-icon` i `checked-icon` do dostosowania elementów ikony. ```html ``` ## mdui-switch API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
disabled disabled true boolean false

Określa, czy przełącznik jest wyłączony.
checked checked true boolean false

Określa, czy przełącznik jest włączony.
undefined defaultChecked false boolean false

Domyślny stan zaznaczenia. Po zresetowaniu formularza zostanie przywrócony do tego stanu. Ten atrybut można ustawić tylko za pomocą właściwości JavaScript
unchecked-icon uncheckedIcon true string

Nazwa ikony Material Icons dla stanu niezaznaczonego. Można również ustawić za pomocą slot="unchecked-icon"
checked-icon checkedIcon true string

Nazwa ikony Material Icons dla stanu zaznaczonego. Można również ustawić za pomocą slot="checked-icon"

Domyślnie jest to ikona check, można przekazać pusty ciąg znaków, aby usunąć domyślną ikonę
required required true boolean false

Określa, czy zaznaczenie tego przełącznika jest wymagane podczas przesyłania formularza.
form form true string

Powiązany element <form>. Wartość tego atrybutu powinna być id elementu <form> na tej samej stronie.

Jeśli ten atrybut nie jest określony, element ten musi być elementem potomnym elementu <form>. Ten atrybut umożliwia umieszczenie elementu w dowolnym miejscu na stronie, nie tylko jako element potomny elementu <form>.
name name true string ''

Nazwa przełącznika, która zostanie wysłana wraz z danymi formularza
value value true string 'on'

Wartość przełącznika, która zostanie wysłana wraz z danymi formularza
undefined validity false ValidityState

Obiekt stanu walidacji formularza, zobacz ValidityState
undefined validationMessage false string

Jeśli walidacja formularza nie powiedzie się, ten atrybut zawiera komunikat informacyjny. Jeśli walidacja się powiedzie, ten atrybut jest pustym ciągiem znaków
autofocus autofocus true boolean false

Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
tabindex tabIndex false number

Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).
### Metody
Nazwa Opis
checkValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true
reportValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true.

Jeśli walidacja się nie powiedzie, na komponencie wyświetlany jest również komunikat o niepowodzeniu walidacji.
setCustomValidity(message: string): void

Ustawia niestandardowy komunikat o błędzie. Dopóki ten tekst nie jest pusty, oznacza to, że pole nie przeszło walidacji
click(): void

Symuluje kliknięcie myszą na elemencie
focus(options?: FocusOptions): void

Przenosi fokus na bieżący element.

Można przekazać obiekt jako parametr, którego właściwości obejmują:

  • preventScroll: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na true.
blur(): void

Usuwa fokus z bieżącego elementu
### Zdarzenia
Nazwa Opis
focus

Wywoływane po otrzymaniu fokusu
blur

Wywoływane po utracie fokusu
change

Wywoływane po zmianie stanu zaznaczenia
input

Wywoływane po zmianie stanu zaznaczenia
invalid

Wywoływane, gdy pole formularza nie przejdzie walidacji
### Slots
Nazwa Opis
unchecked-icon

Element dla stanu niezaznaczonego
checked-icon

Element dla stanu zaznaczonego
### CSS Parts
Nazwa Opis
track

Tor
thumb

Kontener ikony
unchecked-icon

Ikona dla stanu niezaznaczonego
checked-icon

Ikona dla stanu zaznaczonego
### Właściwości niestandardowe CSS
Nazwa Opis
--shape-corner

Wielkość zaokrąglenia rogów toru komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
--shape-corner-thumb

Wielkość zaokrąglenia rogów kontenera ikony komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
# Komponent Tabs Komponent zakładek grupuje i wyświetla treści lub dane, ułatwiając szybkie przełączanie się między różnymi kategoriami. ## Sposób użycia {#usage} Zaimportuj komponenty: ```js import 'mdui/components/tabs.js'; import 'mdui/components/tab.js'; import 'mdui/components/tab-panel.js'; ``` Zaimportuj typy TypeScript komponentów: ```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'; ``` Przykład użycia: ```html Zakładka 1 Zakładka 2 Zakładka 3 Panel 1 Panel 2 Panel 3 ``` ## Przykłady {#examples} ### Styl zakładek {#example-variant} Użyj atrybutu `variant` na komponencie ``, aby ustawić styl zakładek. ```html Zakładka 1 Zakładka 2 Zakładka 3 Panel 1 Panel 2 Panel 3 Zakładka 1 Zakładka 2 Zakładka 3 Panel 1 Panel 2 Panel 3 ``` ### Pozycja zakładek {#example-placement} Użyj atrybutu `placement` na komponencie ``, aby ustawić pozycję zakładek. ```html top-start top top-end bottom-start bottom bottom-end left-start left left-end right-start right right-end Zakładka 1 Zakładka 2 Zakładka 3 Panel 1 Panel 2 Panel 3 ``` ### Pełna szerokość {#example-full-width} Dodanie atrybutu `full-width` do komponentu `` powoduje, że zakładki zajmują całą dostępną szerokość, a poszczególne zakładki równomiernie dzielą tę szerokość. ```html Zakładka 1 Zakładka 2 Zakładka 3 Panel 1 Panel 2 Panel 3 ``` ### Ikona {#example-icon} Ustaw atrybut `icon` na komponencie ``, aby dodać ikonę Material Icons do zakładki. Możesz również użyć slotu `icon` do dodania elementu ikony. Dodanie atrybutu `inline` powoduje poziome ułożenie ikony i tekstu. ```html Zakładka 1 Zakładka 2 Zakładka 3 Panel 1 Panel 2 Panel 3 ``` ### Badge {#example-badge} W komponencie `` możesz dodać badge za pomocą slotu `badge`. ```html Zakładka 1 99+ Zakładka 2 Zakładka 3 Panel 1 Panel 2 Panel 3 ``` ### Niestandardowa treść {#example-custom} Użyj slotu `custom` w komponencie ``, aby całkowicie dostosować treść zakładki. ```html Zakładka 1 Ikona Zakładka 2 Zakładka 3 Panel 1 Panel 2 Panel 3 ``` ## mdui-tab-panel API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
value value true string

Wartość elementu panelu zakładki
### Slots
Nazwa Opis
(domyślny)

Treść panelu zakładki
## mdui-tab API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
value value true string

Wartość elementu zakładki
icon icon true string

Nazwa ikony Material Icons. Można również ustawić za pomocą slot="icon"
inline inline true boolean false

Określa, czy ikona i tekst mają być ułożone poziomo.
autofocus autofocus true boolean false

Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
tabindex tabIndex false number

Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).
### Metody
Nazwa Opis
click(): void

Symuluje kliknięcie myszą na elemencie
focus(options?: FocusOptions): void

Przenosi fokus na bieżący element.

Można przekazać obiekt jako parametr, którego właściwości obejmują:

  • preventScroll: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na true.
blur(): void

Usuwa fokus z bieżącego elementu
### Zdarzenia
Nazwa Opis
focus

Wywoływane po otrzymaniu fokusu
blur

Wywoływane po utracie fokusu
### Slots
Nazwa Opis
(domyślny)

Treść zakładki
icon

Ikona w zakładce
badge

Badge
custom

Niestandardowa treść dla całego elementu zakładki
### CSS Parts
Nazwa Opis
container

Kontener elementu zakładki
icon

Ikona w zakładce
label

Tekst zakładki
## mdui-tabs API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
variant variant true 'primary' | 'secondary' 'primary'

Wariant zakładek. Dozwolone wartości:

  • primary: Odpowiednie dla scenariuszy, w których zakładki znajdują się pod <mdui-top-app-bar> i służą do przełączania głównych stron aplikacji
  • secondary: Odpowiednie dla scenariuszy, w których zakładki znajdują się na stronie i służą do przełączania grupy powiązanych treści
value value true string

Wartość aktualnie aktywnej <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'

Pozycja zakładek. Domyślnie top-start. Dozwolone wartości:

  • top-start: Na górze, wyrównany do lewej
  • top: Na górze, wyśrodkowany
  • top-end: Na górze, wyrównany do prawej
  • bottom-start: Na dole, wyrównany do lewej
  • bottom: Na dole, wyśrodkowany
  • bottom-end: Na dole, wyrównany do prawej
  • left-start: Po lewej, wyrównany do góry
  • left: Po lewej, wyśrodkowany
  • left-end: Po lewej, wyrównany do dołu
  • right-start: Po prawej, wyrównany do góry
  • right: Po prawej, wyśrodkowany
  • right-end: Po prawej, wyrównany do dołu
full-width fullWidth true boolean false

Określa, czy wypełnić całą szerokość elementu nadrzędnego.
### Zdarzenia
Nazwa Opis
change

Wywoływane po zmianie zaznaczonej wartości
### Slots
Nazwa Opis
(domyślny)

Elementy <mdui-tab>
panel

Elementy <mdui-tab-panel>
### CSS Parts
Nazwa Opis
container

Kontener elementów <mdui-tab>
indicator

Wskaźnik stanu aktywnego
# Komponent TextField Komponent pola tekstowego umożliwia wprowadzanie tekstu. Często stosowane w formularzach i oknach dialogowych. ## Sposób użycia {#usage} Zaimportuj komponent: ```js import 'mdui/components/text-field.js'; ``` Zaimportuj typ TypeScript komponentu: ```ts import type { TextField } from 'mdui/components/text-field.js'; ``` Przykład użycia: ```html ``` ## Przykłady {#examples} ### Kształt {#example-variant} Atrybut `variant` ustawia kształt pola tekstowego. ```html

``` ### Tekst pomocniczy {#example-helper-text} Atrybut `label` ustawia tekst etykiety nad polem tekstowym. ```html ``` Atrybut `placeholder` ustawia tekst zastępczy, gdy pole jest puste. ```html ``` Atrybut `helper` ustawia tekst pomocniczy na dole pola tekstowego. Możesz również użyć slotu `helper`. Dodanie atrybutu `helper-on-focus` powoduje wyświetlanie tekstu pomocniczego tylko wtedy, gdy pole jest skupione. ```html Tekst pomocniczy ``` ### Możliwość wyczyszczenia {#example-clearable} Dodanie atrybutu `clearable` powoduje pojawienie się przycisku czyszczenia po prawej stronie, gdy pole tekstowe ma wartość. ```html ``` ### Wyrównanie tekstu do prawej {#example-end-aligned} Dodanie atrybutu `end-aligned` powoduje wyrównanie tekstu do prawej. ```html ``` ### Tekst i ikony przed i po {#example-prefix-suffix} Ustaw atrybuty `icon` i `end-icon`, aby dodać ikony Material Icons odpowiednio po lewej i prawej stronie pola tekstowego. Możesz również użyć slotów `icon` i `end-icon` do dodania elementów. ```html

``` Ustaw atrybuty `prefix` i `suffix`, aby dodać tekst odpowiednio po lewej i prawej stronie pola tekstowego. Możesz również użyć slotów `prefix` i `suffix` do dodania elementów tekstowych. Te teksty są wyświetlane tylko wtedy, gdy pole tekstowe jest skupione lub ma wartość. ```html

$ /100 ``` ### Tryb tylko do odczytu {#example-readonly} Dodanie atrybutu `readonly` ustawia pole tekstowe w tryb tylko do odczytu. ```html ``` ### Stan wyłączony {#example-disabled} Dodanie atrybutu `disabled` wyłącza pole tekstowe. ```html ``` ### Wielowierszowe pole tekstowe {#example-rows} Atrybut `rows` ustawia liczbę wierszy dla wielowierszowego pola tekstowego. ```html ``` Możesz również dodać atrybut `autosize`, aby pole tekstowe automatycznie dostosowywało wysokość do długości wprowadzanego tekstu. Użyj atrybutów `min-rows` i `max-rows`, aby określić odpowiednio minimalną i maksymalną liczbę wierszy podczas automatycznego dostosowywania wysokości. ```html

``` ### Licznik znaków {#example-counter} Gdy maksymalna liczba znaków jest ustawiona za pomocą atrybutu `maxlength`, możesz dodać atrybut `counter`, aby wyświetlić licznik znaków pod polem tekstowym. ```html ``` ### Pole hasła {#example-password} Gdy `type="password"`, dodanie atrybutu `toggle-password` powoduje pojawienie się przycisku przełączania widoczności hasła po prawej stronie pola tekstowego. ```html ``` ## mdui-text-field API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
variant variant true 'filled' | 'outlined' 'filled'

Wariant pola tekstowego. Domyślnie filled. Dozwolone wartości:

  • filled: Pole tekstowe z kolorem tła, silniejszy efekt wizualny
  • outlined: Pole tekstowe z obramowaniem, słabszy efekt wizualny
type type true 'text' | 'number' | 'password' | 'url' | 'email' | 'search' | 'tel' | 'hidden' | 'date' | 'datetime-local' | 'month' | 'time' | 'week' 'text'

Typ wprowadzania w polu tekstowym. Domyślnie text. Dozwolone wartości:

  • text: Domyślnie pole tekstowe
  • number: Można wprowadzać tylko cyfry. Na urządzeniach z dynamiczną klawiaturą wyświetlana jest klawiatura numeryczna
  • password: Służy do wprowadzania hasła, jego wartość jest maskowana
  • url: Służy do wprowadzania adresu URL, sprawdzany jest format URL. Na urządzeniach obsługujących dynamiczną klawiaturę dostępna jest odpowiednia klawiatura
  • email: Służy do wprowadzania adresu e-mail, sprawdzany jest format e-mail. Na urządzeniach obsługujących dynamiczną klawiaturę dostępna jest odpowiednia klawiatura
  • search: Służy do pola wyszukiwania. Na urządzeniach z dynamiczną klawiaturą ikona Enter zmienia się w ikonę wyszukiwania
  • tel: Służy do wprowadzania numeru telefonu. Na urządzeniach z dynamiczną klawiaturą wyświetlana jest klawiatura numeryczna telefonu
  • hidden: Ukrywa ten element, ale jego wartość nadal jest przesyłana do serwera
  • date: Element do wprowadzania daty (rok, miesiąc, dzień, bez czasu). Po aktywacji w obsługiwanych przeglądarkach otwiera selektor daty lub pokrętło numeryczne dla roku, miesiąca i dnia
  • datetime-local: Element do wprowadzania daty i czasu, bez strefy czasowej. Po aktywacji w obsługiwanych przeglądarkach otwiera selektor daty lub pokrętło numeryczne dla roku, miesiąca i dnia
  • month: Element do wprowadzania roku i miesiąca, bez strefy czasowej
  • time: Element do wprowadzania czasu, bez strefy czasowej
  • week: Element do wprowadzania daty w formacie roku i numeru tygodnia, bez strefy czasowej
name name true string ''

Nazwa pola tekstowego, która zostanie wysłana wraz z danymi formularza
value value false string ''

Wartość pola tekstowego, która zostanie wysłana wraz z danymi formularza
undefined defaultValue false string ''

Wartość domyślna. Po zresetowaniu formularza zostanie przywrócona do tej wartości. Ten atrybut można ustawić tylko za pomocą właściwości JavaScript
label label true string

Tekst etykiety
placeholder placeholder true string

Tekst zastępczy
helper helper true string

Tekst pomocniczy pod polem tekstowym. Można również ustawić za pomocą slot="helper"
helper-on-focus helperOnFocus true boolean false

Określa, czy wyświetlać tekst pomocniczy na dole tylko wtedy, gdy pole uzyska fokus.
clearable clearable true boolean false

Określa, czy można wyczyścić zawartość pola tekstowego.
clear-icon clearIcon true string

Nazwa ikony Material Icons dla przycisku czyszczenia wyświetlanego po prawej stronie pola tekstowego, gdy pole jest możliwe do wyczyszczenia. Można również ustawić za pomocą slot="clear-icon"
end-aligned endAligned true boolean false

Określa, czy wyrównać tekst do prawej.
prefix prefix true string

Tekst prefiksu pola tekstowego. Wyświetlany tylko wtedy, gdy pole ma fokus lub ma wartość. Można również ustawić za pomocą slot="prefix"
suffix suffix true string

Tekst sufiksu pola tekstowego. Wyświetlany tylko wtedy, gdy pole ma fokus lub ma wartość. Można również ustawić za pomocą slot="suffix"
icon icon true string

Nazwa ikony Material Icons dla ikony prefiksu pola tekstowego. Można również ustawić za pomocą slot="icon"
end-icon endIcon true string

Nazwa ikony Material Icons dla ikony sufiksu pola tekstowego. Można również ustawić za pomocą slot="end-icon"
error-icon errorIcon true string

Nazwa ikony Material Icons wyświetlana po prawej stronie pola tekstowego, gdy walidacja pola formularza nie powiedzie się. Można również ustawić za pomocą slot="error-icon"
form form true string

Powiązany element <form>. Wartość tego atrybutu powinna być id elementu <form> na tej samej stronie.

Jeśli ten atrybut nie jest określony, element ten musi być elementem potomnym elementu <form>. Ten atrybut umożliwia umieszczenie elementu w dowolnym miejscu na stronie, nie tylko jako element potomny elementu <form>.
readonly readonly true boolean false

Określa, czy pole jest tylko do odczytu.
disabled disabled true boolean false

Określa, czy pole tekstowe jest wyłączone.
required required true boolean false

Określa, czy wypełnienie pola jest wymagane podczas przesyłania formularza.
rows rows true number

Stała liczba wyświetlanych wierszy pola tekstowego
autosize autosize true boolean false

Określa, czy automatycznie dostosowywać wysokość pola tekstowego do wprowadzanej treści.
min-rows minRows true number

Minimalna liczba wierszy pola tekstowego, gdy autosize ma wartość true
max-rows maxRows true number

Maksymalna liczba wierszy pola tekstowego, gdy autosize ma wartość true
minlength minlength true number

Minimalna dozwolona liczba znaków
maxlength maxlength true number

Maksymalna dozwolona liczba znaków
counter counter true boolean false

Określa, czy wyświetlać licznik znaków. Działa tylko wtedy, gdy określono maxlength.
min min true number

Określa minimalną dozwoloną wartość liczbową, gdy type ma wartość number.
max max true number

Określa maksymalną dozwoloną wartość liczbową, gdy type ma wartość number.
step step true number

Określa krok zmiany wartości, gdy type ma wartość number.
pattern pattern true string

Wyrażenie regularne używane do walidacji formularza
toggle-password togglePassword true boolean false

Gdy type to password, ustawienie tego atrybutu doda przycisk przełączania między tekstem jawnym a zasłoniętym
show-password-icon showPasswordIcon true string

Ikona Material Icons dla przycisku przełączania hasła, wyświetlana, gdy hasło jest jawne. Można również ustawić za pomocą slot="show-password-icon"
hide-password-icon hidePasswordIcon true string

Ikona Material Icons dla przycisku przełączania hasła, wyświetlana, gdy hasło jest zasłonięte. Można również ustawić za pomocą slot="hide-password-icon"
autocapitalize autocapitalize true 'none' | 'sentences' | 'words' | 'characters'

Niestandardowy atrybut iOS, służy do kontrolowania automatycznej wielkości pierwszej litery tekstu. Działa w iOS5 i nowszych wersjach. Dozwolone wartości:

  • none: Wyłącza automatyczne wielkie litery
  • sentences: Pierwsza litera zdania dużą literą
  • words: Pierwsza litera słowa dużą literą
  • characters: Wszystkie litery duże
autocorrect autocorrect true string

Atrybut autocorrect elementu input
autocomplete autocomplete true string

Atrybut autocomplete elementu input
enterkeyhint enterkeyhint true 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'

Atrybut enterkeyhint elementu input, służy do dostosowania tekstu lub ikony wyświetlanej na klawiszu Enter na klawiaturze wirtualnej. Dokładny efekt wyświetlania zależy od urządzenia i języka użytkownika. Dozwolone wartości:

  • enter: Wstaw nowy wiersz
  • done: Zakończ wprowadzanie, zamknij klawiaturę wirtualną
  • go: Przejdź do celu wprowadzonego tekstu
  • next: Przejdź do następnego elementu wprowadzania
  • previous: Przejdź do poprzedniego elementu wprowadzania
  • search: Przejdź do wyników wyszukiwania
  • send: Wyślij wiadomość tekstową
spellcheck spellcheck true boolean false

Określa, czy włączyć sprawdzanie pisowni.
inputmode inputmode true 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'

Atrybut inputmode elementu input, służy do dostosowania typu klawiatury wirtualnej. Dozwolone wartości:

  • none: Brak klawiatury wirtualnej. Przydatne, gdy chcesz zaimplementować własny element sterujący wprowadzaniem z klawiatury
  • text: Standardowa klawiatura do wprowadzania tekstu
  • decimal: Klawiatura do wprowadzania liczb dziesiętnych, oprócz cyfr może zawierać kropkę dziesiętną . lub przecinek jako separator tysięcy ,
  • numeric: Wyświetla klawiaturę numeryczną 0-9
  • tel: Klawiatura numeryczna telefonu, zawiera cyfry 0-9, gwiazdkę * lub krzyżyk #
  • search: Klawiatura wirtualna zoptymalizowana do wprowadzania wyszukiwania, przycisk przesyłania zwykle wyświetla search lub „Szukaj”
  • email: Klawiatura wirtualna zoptymalizowana do wprowadzania adresu e-mail, zwykle zawiera klawisze @ .
  • url: Klawiatura wirtualna zoptymalizowana do wprowadzania adresu URL, zwykle zawiera klawisze . / #
undefined validity false ValidityState

Obiekt stanu walidacji formularza, zobacz ValidityState
undefined validationMessage false string

Jeśli walidacja formularza nie powiedzie się, ten atrybut zawiera komunikat informacyjny. Jeśli walidacja się powiedzie, ten atrybut jest pustym ciągiem znaków
undefined valueAsNumber false number

Pobiera bieżącą wartość i konwertuje ją na typ number; lub ustawia wartość typu number. Jeśli wartość nie może być przekonwertowana na typ number, zwracane jest NaN.
autofocus autofocus true boolean false

Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
tabindex tabIndex false number

Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).
### Metody
Nazwa Opis
select(): void

Zaznacza tekst w polu tekstowym
setSelectionRange(start: number, end: number, direction: 'forward' | 'backward' | 'none'): void

Zaznacza określony zakres w polu tekstowym
setRangeText(replacement: string, start: number, end: number, selectMode: 'select' | 'start' | 'end' | 'preserve'): void

Zastępuje tekst w określonym zakresie w polu tekstowym nowym tekstem
checkValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true
reportValidity(): boolean

Sprawdza poprawność pola formularza. Jeśli nie, zwraca false i wywołuje zdarzenie invalid; jeśli tak, zwraca true.

Jeśli walidacja się nie powiedzie, na komponencie wyświetlany jest również komunikat o niepowodzeniu walidacji.
setCustomValidity(message: string): void

Ustawia niestandardowy komunikat o błędzie. Dopóki ten tekst nie jest pusty, oznacza to, że pole nie przeszło walidacji
click(): void

Symuluje kliknięcie myszą na elemencie
focus(options?: FocusOptions): void

Przenosi fokus na bieżący element.

Można przekazać obiekt jako parametr, którego właściwości obejmują:

  • preventScroll: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na true.
blur(): void

Usuwa fokus z bieżącego elementu
### Zdarzenia
Nazwa Opis
focus

Wywoływane po otrzymaniu fokusu
blur

Wywoływane po utracie fokusu
change

Wywoływane, gdy wartość pola tekstowego ulegnie zmianie i pole straci fokus
input

Wywoływane przy każdej zmianie wartości pola tekstowego
invalid

Wywoływane, gdy pole formularza nie przejdzie walidacji
clear

Wywoływane po kliknięciu przycisku czyszczenia generowanego przez atrybut clearable. Można zapobiec wyczyszczeniu pola tekstowego, wywołując event.preventDefault()
### Slots
Nazwa Opis
icon

Ikona po lewej stronie
end-icon

Ikona po prawej stronie
error-icon

Ikona po prawej stronie w stanie błędu walidacji
prefix

Tekst po lewej stronie
suffix

Tekst po prawej stronie
clear-button

Przycisk czyszczenia
clear-icon

Ikona w przycisku czyszczenia
toggle-password-button

Przycisk przełączania stanu wyświetlania hasła
show-password-icon

Ikona w przycisku przełączania stanu wyświetlania hasła, gdy hasło jest wyświetlane
hide-password-icon

Ikona w przycisku przełączania stanu wyświetlania hasła, gdy hasło jest ukryte
helper

Tekst pomocniczy na dole
### CSS Parts
Nazwa Opis
container

Kontener pola tekstowego
icon

Ikona po lewej stronie
end-icon

Ikona po prawej stronie
error-icon

Ikona po prawej stronie w stanie błędu walidacji
prefix

Tekst po lewej stronie
suffix

Tekst po prawej stronie
label

Tekst etykiety u góry
input

Wewnętrzny element <input> lub <textarea>
clear-button

Przycisk czyszczenia
clear-icon

Ikona w przycisku czyszczenia
toggle-password-button

Przycisk przełączania stanu wyświetlania hasła
show-password-icon

Ikona w przycisku przełączania stanu wyświetlania hasła, gdy hasło jest wyświetlane
hide-password-icon

Ikona w przycisku przełączania stanu wyświetlania hasła, gdy hasło jest ukryte
supporting

Kontener na dodatkowe informacje na dole, obejmujący helper, error, counter
helper

Tekst pomocniczy na dole
error

Tekst opisu błędu na dole
counter

Licznik znaków po prawej stronie na dole
# Komponent Tooltip Tooltip dostarcza dodatkowych podpowiedzi tekstowych lub informacji kontekstowych dla określonego elementu, pomagając zrozumieć jego funkcję lub przeznaczenie. ## Sposób użycia {#usage} Zaimportuj komponent: ```js import 'mdui/components/tooltip.js'; ``` Zaimportuj typ TypeScript komponentu: ```ts import type { Tooltip } from 'mdui/components/tooltip.js'; ``` Przykład użycia: ```html przycisk ``` ## Przykłady {#examples} ### Zwykły tooltip {#example-plain} Domyślnie tooltip jest zwykły. Możesz ustawić treść tooltipa za pomocą atrybutu `content`. ```html przycisk ``` Możesz również ustawić treść tooltipa za pomocą slotu `content`. ```html przycisk
tytuł
treść
 ``` ### Bogaty tooltip {#example-rich} Ustawienie atrybutu `variant` na `rich` tworzy bogaty tooltip. Możesz ustawić tytuł tooltipa za pomocą atrybutu `headline`, a treść za pomocą atrybutu `content`. ```html przycisk ``` Możesz również ustawić tytuł i treść tooltipa za pomocą slotów `headline` i `content`. Użyj slotu `action`, aby dodać przycisk akcji. ```html przycisk
Bogaty tooltip
Bogate tooltipy zwracają uwagę na konkretny element lub funkcję, która wymaga skupienia użytkownika. Obsługują wiele linii tekstu informacyjnego.
Akcja ``` ### Pozycja {#example-placement} Atrybut `placement` ustawia pozycję tooltipa. ```html
``` ### Sposób wyzwalania {#example-trigger} Atrybut `trigger` ustawia sposób wyzwalania tooltipa. ```html przycisk ``` ### Opóźnienie otwierania/zamykania {#example-delay} Gdy sposób wyzwalania to `hover`, możesz ustawić opóźnienie otwierania i zamykania tooltipa za pomocą atrybutów `open-delay` i `close-delay`, odpowiednio w milisekundach. ```html przycisk ``` ### Stan wyłączony {#example-disabled} Dodanie atrybutu `disabled` wyłącza tooltip. ```html przycisk ``` ## mdui-tooltip API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
variant variant true 'plain' | 'rich' 'plain'

Wariant tooltipa. Domyślnie plain. Dozwolone wartości:

  • plain: Zwykły tekst, odpowiedni dla prostego, jednowierszowego tekstu
  • rich: Tekst sformatowany, może zawierać tytuł, treść i przyciski akcji
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'

Pozycja tooltipa. Domyślnie auto. Dozwolone wartości:

  • auto: Automatyczne określenie pozycji. Gdy variant="plain", preferowane jest top; gdy variant="rich", preferowane jest bottom-right
  • top-left: W lewym górnym rogu
  • top-start: Nad elementem, wyrównany do lewej
  • top: Nad elementem, wyśrodkowany
  • top-end: Nad elementem, wyrównany do prawej
  • top-right: W prawym górnym rogu
  • bottom-left: W lewym dolnym rogu
  • bottom-start: Pod elementem, wyrównany do lewej
  • bottom: Pod elementem, wyśrodkowany
  • bottom-end: Pod elementem, wyrównany do prawej
  • bottom-right: W prawym dolnym rogu
  • left-start: Po lewej stronie, wyrównany do góry
  • left: Po lewej stronie, wyśrodkowany
  • left-end: Po lewej stronie, wyrównany do dołu
  • right-start: Po prawej stronie, wyrównany do góry
  • right: Po prawej stronie, wyśrodkowany
  • right-end: Po prawej stronie, wyrównany do dołu
open-delay openDelay true number 150

Opóźnienie wyświetlenia po najechaniu myszą, w milisekundach
close-delay closeDelay true number 150

Opóźnienie ukrycia po najechaniu myszą, w milisekundach
headline headline true string

Tytuł tooltipa. Można używać tylko, gdy variant="rich". Można również ustawić za pomocą slot="headline"
content content true string

Treść tooltipa. Można również ustawić za pomocą slot="content"
trigger trigger true 'click' | 'hover' | 'focus' | 'manual' | string 'hover focus'

Sposób wyzwalania. Obsługuje wiele wartości oddzielonych spacjami. Dozwolone wartości:

  • click: Wywoływane po kliknięciu
  • hover: Wywoływane po najechaniu myszą
  • focus: Wywoływane po otrzymaniu fokusu
  • manual: Można otwierać i zamykać tooltip tylko programowo, nie można określić innych sposobów wyzwalania
disabled disabled true boolean false

Określa, czy tooltip jest wyłączony.
open open true boolean false

Określa, czy tooltip jest wyświetlany.
### Zdarzenia
Nazwa Opis
open

Wywoływane przed wyświetleniem tooltipa. Można zapobiec otwarciu, wywołując event.preventDefault()
opened

Wywoływane po zakończeniu animacji wyświetlania tooltipa
close

Wywoływane przed ukryciem tooltipa. Można zapobiec zamknięciu, wywołując event.preventDefault()
closed

Wywoływane po zakończeniu animacji ukrywania tooltipa
### Slots
Nazwa Opis
(domyślny)

Element docelowy wyzwalający tooltip, tylko pierwszy element w slocie domyślnym będzie elementem docelowym
headline

Tytuł tooltipa, ten slot jest skuteczny tylko wtedy, gdy variant="rich"
content

Treść tooltipa, może zawierać HTML. Jeśli zawiera tylko zwykły tekst, można użyć atrybutu content zamiast tego
action

Przycisk na dole tooltipa, ten slot jest skuteczny tylko wtedy, gdy variant="rich"
### CSS Parts
Nazwa Opis
popup

Kontener tooltipa
headline

Tytuł
content

Treść
action

Przycisk akcji
### Właściwości niestandardowe CSS
Nazwa Opis
--shape-corner-plain

Wielkość zaokrąglenia rogów komponentu, gdy variant="plain". Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
--shape-corner-rich

Wielkość zaokrąglenia rogów komponentu, gdy variant="rich". Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
--z-index

Wartość CSS z-index komponentu
# Komponent TopAppBar Górny pasek aplikacji wyświetla kluczowe informacje i powiązane działania na górze strony, zapewniając użytkownikowi wyraźną nawigację i łatwy dostęp do funkcji. ## Sposób użycia {#usage} Zaimportuj komponenty: ```js import 'mdui/components/top-app-bar.js'; import 'mdui/components/top-app-bar-title.js'; ``` Zaimportuj typy TypeScript komponentów: ```ts import type { TopAppBar } from 'mdui/components/top-app-bar.js'; import type { TopAppBarTitle } from 'mdui/components/top-app-bar-title.js'; ``` Przykład użycia: (Uwaga: `style="position: relative"` w przykładzie służy tylko do demonstracji; w produkcji usuń ten styl.) ```html Tytuł
``` **Uwagi:** Ten komponent domyślnie używa pozycjonowania `position: fixed` i automatycznie dodaje styl `padding-top` do `body`, aby zapobiec zasłanianiu treści strony przez komponent. Jednak w następujących dwóch przypadkach domyślnie używane jest pozycjonowanie `position: absolute`: 1. Gdy określony jest atrybut `scroll-target`, styl `padding-top` jest dodawany do elementu `scroll-target`. 2. Gdy komponent znajduje się wewnątrz komponentu [``](/pl/docs/2/components/layout). Wtedy styl `padding-top` nie jest dodawany. ## Przykłady {#examples} ### Umieszczenie w określonym kontenerze {#example-scroll-target} Domyślnie górny pasek aplikacji jest wyświetlany na górze strony względem bieżącego okna. Jeśli chcesz umieścić górny pasek aplikacji w określonym kontenerze, możesz określić atrybut `scroll-target` na komponencie ``. Wartością atrybutu powinien być selektor CSS lub element DOM kontenera z przewijaną treścią. W tym przypadku górny pasek aplikacji będzie wyświetlany względem elementu nadrzędnego (musisz samodzielnie dodać do elementu nadrzędnego style `position: relative; overflow: hidden`). ```html
Tytuł
``` ### Kształt {#example-variant} Możesz ustawić kształt górnego paska aplikacji za pomocą atrybutu `variant` na komponencie ``. ```html
Tytuł
center-aligned small medium large
``` ### Zachowanie podczas przewijania strony {#example-scroll-behavior} Ustawiając atrybut `scroll-behavior` na komponencie ``, możesz zdefiniować zachowanie górnego paska aplikacji podczas przewijania strony. Można ustawić wiele zachowań jednocześnie, oddzielając je spacjami. Zachowania podczas przewijania obejmują: - `hide`: Ukrywa górny pasek aplikacji podczas przewijania w dół i pokazuje go podczas przewijania w górę. - `shrink`: Działa tylko wtedy, gdy atrybut `variant` ma wartość `medium` lub `large`. Rozwija górny pasek aplikacji podczas przewijania w dół i zwęża go podczas przewijania w górę. - `elevate`: Dodaje cień do górnego paska aplikacji podczas przewijania w dół; usuwa cień, gdy strona wróci do góry. Atrybut `scroll-threshold` ustawia, po przewinięciu ilu pikseli zaczynają być wyzwalane zachowania górnego paska aplikacji. (Uwaga: Aby zapewnić szybką reakcję, w przypadku używania zachowania `elevate` nie należy ustawiać atrybutu `scroll-threshold`.) **Przykład: Ukrywanie podczas przewijania** ```html
Tytuł
``` **Przykład: Dodawanie cienia podczas przewijania** ```html
Tytuł
``` **Przykład: Zwężanie podczas przewijania** ```html
Tytuł
``` **Przykład: Zwężanie i dodawanie cienia podczas przewijania** ```html
Tytuł
``` ### Tekst w stanie rozwiniętym {#label-large} Dla górnego paska aplikacji z atrybutem `variant` ustawionym na `medium` lub `large` oraz atrybutem `scroll-behavior` zawierającym `shrink`, możesz ustawić tekst w stanie rozwiniętym za pomocą slotu `label-large` w komponencie ``. ```html
To jest tytuł w stanie zwiniętym To jest tytuł w stanie rozwiniętym
``` ## mdui-top-app-bar-title API ### Slots
Nazwa Opis
(domyślny)

Tekst tytułu górnego paska aplikacji
label-large

Tekst tytułu w stanie rozwiniętym
### CSS Parts
Nazwa Opis
label

Tekst tytułu
label-large

Tekst tytułu w stanie rozwiniętym
## mdui-top-app-bar API ### Właściwości
Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne Opis
variant variant true 'center-aligned' | 'small' | 'medium' | 'large' 'small'

Wariant górnego paska aplikacji. Domyślnie small. Dozwolone wartości:

  • center-aligned: Mały pasek aplikacji, tytuł wyśrodkowany
  • small: Mały pasek aplikacji
  • medium: Średni pasek aplikacji
  • large: Duży pasek aplikacji
hide hide true boolean false

Określa, czy pasek aplikacji jest ukryty.
shrink shrink true boolean false

Określa, czy zmniejszyć do stylu variant="small". Działa tylko wtedy, gdy variant="medium" lub variant="large".
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Zachowanie podczas przewijania. Można używać wielu wartości jednocześnie, oddzielając je spacjami. Dozwolone wartości:

  • hide: Ukrywanie podczas przewijania
  • shrink: Zmniejszanie do małego paska aplikacji podczas przewijania (dotyczy wariantu średniego i dużego)
  • elevate: Dodawanie cienia podczas przewijania
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Element, na którym nasłuchiwane są zdarzenia przewijania. Może to być selektor CSS, element DOM lub obiekt JQ. Domyślnie nasłuchiwane są zdarzenia przewijania okna (window).
scroll-threshold scrollThreshold true number

Odległość przewinięcia w px wymagana do aktywacji zachowania przewijania.
order order true number

Kolejność tego komponentu w układzie <mdui-layout>, sortowana od najmniejszej do największej. Domyślnie 0.
### Zdarzenia
Nazwa Opis
show

Wywoływane przed wyświetleniem. Można zapobiec wyświetleniu, wywołując event.preventDefault()
shown

Wywoływane po zakończeniu animacji wyświetlania
hide

Wywoływane przed ukryciem. Można zapobiec ukryciu, wywołując event.preventDefault()
hidden

Wywoływane po zakończeniu animacji ukrywania
### Slots
Nazwa Opis
(domyślny)

Elementy wewnątrz górnego paska aplikacji
### Właściwości niestandardowe CSS
Nazwa Opis
--shape-corner

Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych
--z-index

Wartość CSS z-index komponentu
# Narzędzie jq mdui zawiera lekką bibliotekę narzędzi JavaScript, która oferuje podobne do jQuery API i łańcuchowe wywołania, ale jej rozmiar to tylko jedna szósta jQuery. Możesz zaimportować to narzędzie: ```js import { $ } from 'mdui/jq.js'; ``` ## Podstawy {#api-core} ### `$()` {#dollar} Funkcja ma kilka zastosowań: Przekaż selektor CSS – zwraca obiekt JQ zawierający pasujące elementy. ```js $('.box'); ``` Przekaż element DOM, dowolną tablicę, NodeList lub obiekt JQ – zwraca obiekt JQ zawierający wskazane elementy. ```js $(document); ``` Przekaż ciąg HTML – zwraca obiekt JQ zawierający elementy DOM utworzone na podstawie kodu HTML. ```js $(`
`); ``` Przekaż funkcję – funkcja zostanie wywołana po załadowaniu DOM. ```js $(function () { console.log('DOM załadowany'); }); ``` ## Rozszerzanie {#api-extend} ### `$.extend()` {#d-extend} Jeśli przekażesz tylko jeden obiekt, jego właściwości zostaną scalone z obiektem `$`, co umożliwia dodanie nowych funkcji w przestrzeni nazw `$`. ```js $.extend({ customFunc: function () {}, }); // Następnie możesz wywołać niestandardową funkcję $.customFunc(); ``` Jeśli przekażesz dwa lub więcej obiektów, właściwości wszystkich obiektów zostaną dodane do pierwszego obiektu, a następnie zwrócony zostanie scalony obiekt. Właściwości o wartości `undefined` nie są scalane. ```js const object = $.extend({ key1: val1 }, { key2: val2 }, { key3: val3 }); // Pierwszy obiekt i wartość zwracana to { key1: val1, key2: val2, key3: val3 } ``` ### `$.fn.extend()` {#fn-extend} Rozszerza metody na prototypie `$`. ```js $.fn.extend({ customFunc: function () {}, }); // Następnie możesz użyć rozszerzonej metody $(document).customFunc(); ``` ## URL {#api-url} ### `$.param()` {#d-param} Serializuje tablicę lub obiekt do ciągu zapytania 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 ``` Jeśli przekazanym parametrem jest tablica, jej format musi być zgodny z formatem zwracanym przez [`.serializeArray()`](#serializeArray). ```js $.param([ { name: 'name', value: 'mdui' }, { name: 'password', value: '123456' }, ]); // name=mdui&password=123456 ``` ## Operacje na tablicach i obiektach {#api-array} ### `$.each()` {#d-each} Iteruje po tablicy lub obiekcie. Zwraca pierwszy argument, czyli iterowaną tablicę lub obiekt. Pierwszym argumentem funkcji zwrotnej jest indeks tablicy lub klucz obiektu, drugim – odpowiadająca mu wartość. W funkcji zwrotnej `this` wskazuje na wartość tablicy lub obiektu. Jeśli funkcja zwrotna zwróci `false`, iteracja zostanie przerwana. ```js // Iteracja po tablicy $.each(['a', 'b', 'c'], function (index, value) { console.log(index + ':' + value); }); // Wynik: // 0:a // 1:b // 2:c ``` ```js // Iteracja po obiekcie $.each({ name: 'mdui', lang: 'zh' }, function (key, value) { console.log(key + ':' + value); }); // Wynik: // name:mdui // lang:zh ``` ### `$.merge()` {#d-merge} Dodaje elementy drugiej tablicy do pierwszej tablicy i zwraca połączoną tablicę. ```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} Usuwa zduplikowane elementy z tablicy. ```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 po tablicy lub obiekcie i zwraca nową tablicę złożoną z wartości zwróconych przez funkcję zwrotną. Pierwszym argumentem funkcji zwrotnej jest wartość tablicy lub obiektu, drugim – indeks tablicy lub klucz obiektu. Funkcja zwrotna może zwrócić dowolną wartość. Jeśli zwróci tablicę, zostanie ona rozwinięta. Jeśli zwróci `null` lub `undefined`, wartość ta zostanie pominięta. Wewnątrz funkcji zwrotnej `this` wskazuje na obiekt `window`. ```js // Iteracja po tablicy const result = $.map(['a', 'b', 'c'], function (value, index) { return index + value; }); console.log(result); // ['0a', '1b', '2c'] ``` ```js // Gdy funkcja zwrotna zwraca tablicę, tablica jest rozwijana const result = $.map([1, 2, 3], function (value, index) { return [value, value + 1]; }); console.log(result); // [1, 2, 2, 3, 3, 4] ``` ```js // Iteracja po obiekcie const result = $.map( { name: 'mdui', password: '123456' }, function (value, key) { return key + ':' + value; }, ); console.log(result); // ['name:mdui', 'password:123456'] ``` ### `$.contains()` {#d-contains} Sprawdza, czy jeden węzeł zawiera inny węzeł. Zwraca `true`, jeśli węzeł nadrzędny zawiera węzeł podrzędny; w przeciwnym razie `false`. ```js $.contains(document, document.body); // true $.contains(document.body, document); // false ``` ## Sprawdzanie typów danych {#api-type} ### `.is()` {#is} Sprawdza, czy co najmniej jeden element w kolekcji pasuje do parametru. Zwraca `true` lub `false`. Parametrem może być selektor CSS, element DOM, tablica elementów DOM, obiekt JQ lub funkcja zwrotna. Jeśli parametrem jest funkcja zwrotna, jej pierwszy argument to indeks, drugi – bieżący element. Wewnątrz funkcji `this` wskazuje na bieżący element. Jeśli funkcja zwróci `true`, element pasuje; jeśli `false`, nie pasuje. ```js $('.box').is('.box'); // true $('.box').is('.boxss'); // false $('.box').is($('.box')[0]); // true ``` ```js // Sprawdzanie na podstawie wartości zwracanej przez funkcję zwrotną $(document).is(function (index, element) { return element === document; }); // true ``` ## Dostęp do obiektów {#api-object} ### `.length` {#length} Zwraca liczbę elementów w bieżącej kolekcji. ```js $('body').length; // 1 ``` ### `.each()` {#each} Iteruje po bieżącej kolekcji, wykonując funkcję dla każdego elementu. Jeśli funkcja zwróci `false`, iteracja zostanie przerwana. Pierwszym argumentem funkcji jest indeks elementu, drugim – bieżący element. Wewnątrz funkcji `this` wskazuje na bieżący element. ```js $('img').each(function (index, element) { this.src = 'test' + index + '.jpg'; }); ``` ### `.map()` {#map} Iteruje po bieżącej kolekcji, wykonuje funkcję dla każdego elementu i zwraca nową kolekcję złożoną z wartości zwróconych przez funkcję. Funkcja może zwrócić pojedynczą wartość lub tablicę wartości. Jeśli zwróci tablicę, jej elementy zostaną kolejno dodane do nowej kolekcji. Jeśli funkcja zwróci `null` lub `undefined`, wartość ta nie zostanie dodana. Pierwszym argumentem funkcji jest indeks elementu, drugim – bieżący element. Wewnątrz funkcji `this` wskazuje na bieżący element. ```js const result = $('input.checked').map(function (i, element) { return element.value; }); // result to obiekt JQ z wartościami pasujących elementów ``` ### `.eq()` {#eq} Zwraca nową kolekcję zawierającą tylko element o podanym indeksie. ```js $('div').eq(0); // Zwraca kolekcję tylko z pierwszym elementem $('div').eq(-1); // Zwraca kolekcję tylko z ostatnim elementem $('div').eq(-2); // Zwraca kolekcję tylko z przedostatnim elementem ``` ### `.first()` {#first} Zwraca nową kolekcję zawierającą tylko pierwszy element bieżącej kolekcji. ```js $('div').first(); // Zwraca kolekcję tylko z pierwszym divem ``` ### `.last()` {#last} Zwraca nową kolekcję zawierającą tylko ostatni element bieżącej kolekcji. ```js $('div').last(); // Zwraca kolekcję tylko z ostatnim divem ``` ### `.get()` {#get} Zwraca element o podanym indeksie. Jeśli nie podano parametru, zwraca tablicę wszystkich elementów w kolekcji. ```js $('div').get(); // Zwraca tablicę wszystkich elementów div $('div').get(0); // Zwraca pierwszy element div $('div').get(-1); // Zwraca ostatni element div ``` ### `.index()` {#index} Jeśli nie podano parametru, zwraca indeks pierwszego elementu bieżącej kolekcji względem jego rodzeństwa. Jeśli podano selektor CSS, zwraca indeks pierwszego elementu bieżącej kolekcji względem elementów pasujących do selektora. Jeśli podano element DOM, zwraca indeks tego elementu w bieżącej kolekcji. Jeśli podano obiekt JQ, zwraca indeks pierwszego elementu tego obiektu w bieżącej kolekcji. ```html
``` ```js $('#child3').index(); // 2 $('#child3').index('#child div'); // 2 $('#child div').index($('#child3').get(0)); // 2 ``` ### `.slice()` {#slice} Zwraca podzbiór bieżącej kolekcji. Możesz określić początek i koniec podzbioru (bez elementu końcowego). Jeśli nie podasz drugiego parametru, zwrócone zostaną wszystkie elementy od początku do końca kolekcji. ```js // Zwraca wszystkie elementy od trzeciego (włącznie) $('div').slice(3); // Zwraca elementy od trzeciego do piątego (trzeci włącznie, piąty wyłącznie) $('div').slice(3, 5); ``` ### `.filter()` {#filter} Filtruje bieżącą kolekcję, pozostawiając elementy pasujące do wyrażenia. Parametrem może być selektor CSS, element DOM, tablica elementów DOM lub funkcja zwrotna. Jeśli parametrem jest funkcja zwrotna, jej pierwszy argument to indeks elementu, drugi – bieżący element. Wewnątrz funkcji `this` wskazuje na bieżący element. Jeśli funkcja zwróci `true`, element zostaje zachowany; jeśli `false`, zostaje usunięty. ```js // Pozostawia wszystkie elementy div zawierające klasę .box $('div').filter('.box'); // Pozostawia zaznaczone opcje $('#select option').filter(function (index, element) { return element.selected; }); ``` ### `.not()` {#not} Filtruje bieżącą kolekcję, usuwając elementy pasujące do wyrażenia. Parametrem może być selektor CSS, element DOM, tablica elementów DOM, obiekt JQ lub funkcja zwrotna zwracająca wartość boolean. Jeśli parametrem jest funkcja zwrotna, jej pierwszy argument to indeks elementu, drugi – bieżący element. Wewnątrz funkcji `this` wskazuje na bieżący element. Jeśli funkcja zwróci `true`, element zostaje usunięty; jeśli `false`, pozostaje. ```js // Usuwa wszystkie elementy div zawierające klasę .box $('div').not('.box'); // Usuwa niezaznaczone opcje $('#select option').not(function (index, element) { return element.selected; }); ``` ## Klasy CSS {#api-css} ### `.hasClass()` {#hasClass} Sprawdza, czy pierwszy element w kolekcji ma podaną klasę CSS. ```js // Sprawdza, czy pierwszy element div ma klasę .item $('div').hasClass('item'); ``` ### `.addClass()` {#addClass} Dodaje klasy CSS do każdego elementu w kolekcji. Wiele klas można oddzielić spacją. Parametrem może być ciąg znaków lub funkcja zwrotna zwracająca nazwy klas. Jeśli parametrem jest funkcja zwrotna, jej pierwszy argument to indeks elementu, drugi – istniejące klasy na elemencie. Wewnątrz funkcji `this` wskazuje na bieżący element. ```js // Dodaje klasę .item do wszystkich elementów div $('div').addClass('item'); // Dodaje klasy .item1 i .item2 do wszystkich elementów div $('div').addClass('item1 item2'); // Dodaje klasy zwrócone przez funkcję zwrotną $('div').addClass(function (index, currentClassName) { return currentClassName + '-' + index; }); ``` ### `.removeClass()` {#removeClass} Usuwa podane klasy CSS z każdego elementu w kolekcji. Wiele klas można oddzielić spacją. Parametrem może być ciąg znaków lub funkcja zwrotna zwracająca nazwy klas. Jeśli parametrem jest funkcja zwrotna, jej pierwszy argument to indeks elementu, drugi – istniejące klasy na elemencie. Wewnątrz funkcji `this` wskazuje na bieżący element. Jeśli nie podano parametru, metoda usuwa atrybut `class` z elementu. ```js // Usuwa klasę .item ze wszystkich elementów div $('div').removeClass('item'); // Usuwa klasy .item1 i .item2 ze wszystkich elementów div $('div').removeClass('item1 item2'); // Usuwa klasy zwrócone przez funkcję zwrotną $('div').removeClass(function (index, currentClassName) { return 'item'; }); ``` ### `.toggleClass()` {#toggleClass} Jeśli element ma podaną klasę, zostanie usunięta; jeśli nie ma, zostanie dodana. Wiele klas można oddzielić spacją. Parametrem może być ciąg znaków lub funkcja zwrotna zwracająca nazwy klas. Jeśli parametrem jest funkcja zwrotna, jej pierwszy argument to indeks elementu, drugi – istniejące klasy na elemencie. Wewnątrz funkcji `this` wskazuje na bieżący element. ```js // Przełącza klasę .item na wszystkich elementach div $('div').toggleClass('item'); // Przełącza klasy .item1 i .item2 na wszystkich elementach div $('div').toggleClass('item1 item2'); // Przełącza klasy zwrócone przez funkcję zwrotną $('div').toggleClass(function (index, currentClassName) { return 'item'; }); ``` ## Atrybuty węzłów {#api-attr} ### `.prop()` {#prop} Pobiera wartość właściwości JavaScript pierwszego elementu w kolekcji. ```js // Pobiera wartość właściwości checked pierwszego elementu $('input').prop('checked'); ``` Jeśli podano dwa argumenty, metoda ustawia podaną właściwość JavaScript dla wszystkich elementów w kolekcji. Wartością właściwości może być dowolna wartość lub wartość zwrócona przez funkcję zwrotną. Funkcja zwrotna przyjmuje indeks elementu i starą wartość właściwości; `this` wskazuje na bieżący element. Jeśli wartość lub wartość zwrócona przez funkcję to `undefined`, właściwość nie zostanie zmodyfikowana. ```js // Ustawia właściwość checked na true dla wszystkich zaznaczonych elementów $('input').prop('checked', true); // Ustawia właściwość przy użyciu funkcji zwrotnej $('input').prop('checked', function (index, oldPropValue) { return true; }); ``` Można również przekazać obiekt, aby ustawić wiele właściwości jednocześnie. ```js // Ustawia wiele właściwości jednocześnie $('input').prop({ checked: false, disabled: function (index, oldPropValue) { return true; }, }); ``` ### `.removeProp()` {#removeProp} Usuwa podaną właściwość JavaScript ze wszystkich elementów w kolekcji. ```js $('input').removeProp('disabled'); ``` ### `.attr()` {#attr} Pobiera wartość atrybutu HTML pierwszego elementu w kolekcji. ```js // Pobiera wartość atrybutu pierwszego elementu $('div').attr('username'); ``` Jeśli podano dwa argumenty, metoda ustawia podany atrybut HTML dla wszystkich elementów w kolekcji. Wartością atrybutu może być ciąg znaków, liczba lub wartość zwrócona przez funkcję zwrotną. Funkcja zwrotna przyjmuje indeks elementu i starą wartość atrybutu; `this` wskazuje na bieżący element. Jeśli wartość lub wartość zwrócona przez funkcję to `null`, atrybut zostanie usunięty; jeśli `undefined`, nie zostanie zmodyfikowany. ```js // Ustawia atrybut dla wszystkich elementów $('div').attr('username', 'mdui'); // Ustawia atrybut przy użyciu funkcji zwrotnej $('div').attr('username', function (index, oldAttrValue) { return 'mdui'; }); ``` Można również przekazać obiekt, aby ustawić wiele atrybutów jednocześnie. ```js // Ustawia wiele atrybutów jednocześnie $('div').attr({ username: 'mdui', lastname: function (index, oldAttrValue) { return 'test'; }, }); ``` ### `.removeAttr()` {#removeAttr} Usuwa podane atrybuty HTML ze wszystkich elementów w kolekcji. Wiele nazw atrybutów można oddzielić spacją. ```js // Usuwa jeden atrybut ze wszystkich elementów $('div').removeAttr('username'); // Usuwa wiele atrybutów ze wszystkich elementów $('div').removeAttr('username lastname'); ``` ### `.val()` {#val} Zwraca wartość pierwszego elementu w kolekcji. Jeśli elementem jest ``, `` lub `