Highlight

Zaznacza część tekstu, która pasuje do wyszukiwania, według zapytania albo pozycji przybliżonego dopasowania.

Highlight

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: Highlight

Café opening hours and the CAFE menusrc/search/GlobalSearch.tsxA very long result title that wraps onto a second line on a narrow screen and still marks the word screen

Noc, podgląd: Highlight

Café opening hours and the CAFE menusrc/search/GlobalSearch.tsxA very long result title that wraps onto a second line on a narrow screen and still marks the word screen

Wysoki kontrast, podgląd: Highlight

Café opening hours and the CAFE menusrc/search/GlobalSearch.tsxA very long result title that wraps onto a second line on a narrow screen and still marks the word screen

UżycieLink do sekcji Użycie

tsx

import { Highlight } from '@skribly/ui/search'

tsx

<Highlight text={title} query={query} />
<Highlight text={path} positions={match.positions} />

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Trafienia są elementami mark z większą grubością i podkreśleniem, więc nigdy nie polegają na kolorze, a oba zostają w trybie wymuszonych kolorów.
Akcenty i wielkość liter są ignorowane, więc „cafe” zaznacza „Café”.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.