Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Query Explain Button

The lens-query-explain-button is a wrapper around the lens-info-button that displays a human-readable version of the current query. When the QueryStore is empty, the noQueryMessage message is shown. If just a queryItem is passed as a prop it will just display this part.

Props

PropTypeDefaultDescription
queryItemQueryItem | undefinedundefinedIf provided, a human-readable explanation of this query item is displayed. If not, the current global query from queryStore is used.
noQueryMessagestring"Search for all results"Message shown when no query is present.
inSearchBarbooleanfalseApplies compact and minimal styling for use inside a search bar.

Usage

<lens-query-explain-button></lens-query-explain-button>

Styling

Part nameDescription
lens-query-explain-buttonWrapper around the InfoButtonComponent when not in search bar mode. Useful for applying borders, padding, etc.

Example

lens-query-explain-button::part(lens-query-explain-button) {
    border-color: var(--primary-color);
    padding: 8px;
}