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 is shown. If a specific queryItem is passed as a prop, it will display only that part in depth, showing all child elements.
Prop Type Default Description
queryItemQueryItemundefinedIf 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.
<lens-query-explain-button></lens-query-explain-button>
Part Name Description
lens-query-explain-buttonStyling for the button around the InfoButton component lens-query-explain-single-row-messageStyling for a single queryItem element (string, number, etc.) lens-query-explain-multi-row-message-headingStyling for the heading of multiple queryItems (e.g., array display) lens-query-explain-multi-row-message-heading-topStyling for the top-level heading of multiple queryItems lens-query-explain-multi-row-message-groupStyling for grouping multiple queryItems lens-query-explain-headerStyling for the header of the explain box lens-query-explain-groupsContainer styling for logical groupings lens-query-explain-group-itemStyling for individual group items lens-query-explain-bottom-level-itemsContainer styling for bottom-level elements lens-query-explain-bottom-level-itemStyling for individual bottom-level items lens-query-explain-bottom-level-item-headerStyling for headers of bottom-level items lens-query-explain-bottom-level-item-entryStyling for entries within bottom-level items
lens-query-explain-button::part(lens-query-explain-button) {
border-color: var(--primary-color);
padding: 8px;
}