ChipChip

Komponent Chip pomaga użytkownikowi w wprowadzaniu informacji, dokonywaniu wyborów, filtrowaniu treści lub wykonywaniu powiązanych operacji.

Sposób użycia

Zaimportuj komponent:

import 'mdui/components/chip.js';

Zaimportuj typ TypeScript komponentu:

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

Przykład użycia:

Chip

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

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.

Ikona

Ikona końcowa

Slot

<mdui-chip icon="search">Ikona</mdui-chip>
<mdui-chip end-icon="arrow_forward">Ikona końcowa</mdui-chip>
<mdui-chip>
  Slot
  <mdui-icon slot="icon" name="downloading"></mdui-icon>
  <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
</mdui-chip>

Źródło

Link

Dodanie atrybutu href zmienia chip w link, a dodatkowo możesz użyć atrybutów związanych z linkami: download, target, rel.

Link

<mdui-chip href="https://www.mdui.org" target="_blank">Link</mdui-chip>

Źródło

Stan wyłączony i ładowania

Dodanie atrybutu disabled wyłącza chip; dodanie atrybutu loading dodaje stan ładowania.

Wyłączony

Ładowanie

Ładowanie i wyłączony

<mdui-chip disabled>Wyłączony</mdui-chip>
<mdui-chip loading>Ładowanie</mdui-chip>
<mdui-chip loading disabled>Ładowanie i wyłączony</mdui-chip>

Źródło

Z możliwością wyboru

Dodanie atrybutu selectable umożliwia wybór chipa.

Chip

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

Źródło

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.

Chip

<mdui-chip selectable selected-icon="favorite">Chip</mdui-chip>
<mdui-chip selectable>
  Chip
  <mdui-icon slot="selected-icon" name="favorite"></mdui-icon>
</mdui-chip>

Źródło

Gdy chip jest zaznaczony, atrybut selected staje się true. Możesz również dodać atrybut selected, aby chip był domyślnie zaznaczony.

Chip

<mdui-chip selectable selected>Chip</mdui-chip>

Źródło

Możliwość usunięcia

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.

Chip

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

Źródło

API

Właściwości

Atrybut HTML	Właściwość JavaScript	Typ	Domyślne
`variant`	`variant`	`'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`	`boolean`	`false`
Określa, czy wyświetlać cień.
`selectable`	`selectable`	`boolean`	`false`
Określa, czy można zaznaczyć.
`selected`	`selected`	`boolean`	`false`
Określa, czy jest zaznaczony.
`deletable`	`deletable`	`boolean`	`false`
Określa, czy chip można usunąć. Gdy `true`, po prawej stronie chipa pojawi się ikona usuwania
`icon`	`icon`	`string`	-
Nazwa ikony Material Icons po lewej stronie. Można również ustawić za pomocą `slot="icon"`
`selected-icon`	`selectedIcon`	`string`	-
Nazwa ikony Material Icons po lewej stronie w stanie zaznaczonym. Można również ustawić za pomocą `slot="selected-icon"`
`end-icon`	`endIcon`	`string`	-
Nazwa ikony Material Icons po prawej stronie. Można również ustawić za pomocą `slot="end-icon"`
`delete-icon`	`deleteIcon`	`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`	`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`	`string`	-
Nazwa pliku do pobrania. Uwaga: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut `href`.
`target`	`target`	`'_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`	`'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`	`boolean`	`false`
Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.
`tabindex`	`tabIndex`	`number`	-
Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).
`disabled`	`disabled`	`boolean`	`false`
Określa, czy komponent jest wyłączony.
`loading`	`loading`	`boolean`	`false`
Określa, czy komponent jest w stanie ładowania.
`name`	`name`	`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`	`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`	`'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`	`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`	`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`	`'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`	`'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`	`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`	`'_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"`.
	`validity`	`ValidityState`	-
Obiekt stanu walidacji formularza, zobacz `ValidityState`
	`validationMessage`	`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	Parametry	Zwraca
`click`		`void`
Symuluje kliknięcie myszą na elemencie
`focus`	`options: FocusOptions` (Opcjonalny)	`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
`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
(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
`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
`--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

Poprzedni rozdział

Checkbox Checkbox

Następny rozdział

CircularProgress Okrągły wskaźnik postępu

ChipChip

Sposób użycia

Przykłady

Kształt

Cień

Ikona

Link

Stan wyłączony i ładowania

Z możliwością wyboru

Możliwość usunięcia

API

Właściwości

Metody

Zdarzenia

Slots

CSS Parts

Właściwości niestandardowe CSS