Search
Finding things: the top-bar search with grouped results and the / key, the command palette, quick open for files, result rows and groups, search options and match highlighting. Built to WCAG 2.2 AA as a target, from 320px wide up.
6 pages, 7 exports
- GlobalSearch
- SearchResultGroup
- SearchResultItem
- Highlight
- SearchOptionToggle
- CommandPalette
- QuickOpen
ImportLink to the section Import
Each group has its own entry, so an app that needs only this group loads only this group. Everything is also exported from @skribly/ui.
import { GlobalSearch, SearchResultGroup, SearchResultItem, Highlight, … } from '@skribly/ui/search'Pages in this groupLink to the section Pages in this group
- GlobalSearchThe search box of a top bar. The app filters on its side, often on a server, and passes grouped results; Enter with nothing highlighted submits the query for a full results page.GlobalSearch, SearchResultGroup, SearchResultItem, Highlight
- SearchOptionToggleOn or off options inside a search field: match case, whole word, regular expression. Pass them to GlobalSearch through actions.SearchOptionToggle
- CommandPaletteOne search for every view and action of an app, opened with Cmd K or Ctrl K. Pick it for apps with many places to go; use GlobalSearch for content.CommandPalette
- QuickOpenGo to a file by a few letters of its name, ranked like a code editor. ":120" after the name opens the file at that line.QuickOpen
- SearchResultGroup and SearchResultItemThe rows and sections of any results list, inside GlobalSearch or a ListBox of their own, such as a full results page. An item with href is a link.SearchResultGroup, SearchResultItem
- HighlightMarks the part of a text that matched a search, by query or by the positions of a fuzzy match.Highlight