<zg-option-list>
The <zg-option-list> tag is a web component that goes within <zg-select> as the option list and used as a CSS target for styling by the developer. The <zg-option-list> web component should not be accessed specifically beyond styling.
Related Web Components
Usage
The <zg-option-list> element is a generated element added to <zg-select> when the pager attribute is defined.
<zing-grid pager src="https://cdn.zinggrid.com/datasets/user-roles.json"> </zing-grid>
Attributes
There are no attributes available for the <zg-option-list> web component.
CSS Variables
<zg-option-list> can be styled with CSS variables, like so:
:root { --zg-option-list-background: red; }
Below is a list of all the associated <zg-option-list> CSS variables. Check out the full list of CSS variables or our Styling Basics guide to learn more about styling the grid.
| Name | Default | Description | Demo | CSS Ref |
|---|---|---|---|---|
| --zg-option-list-background | #fff | Styles the background of option list | ||
| --zg-option-list-border | 1px solid var(--theme-border-color) | Styles the border of option list | ||
| --zg-option-list-border-bottom | var(--zg-option-list-border, 1px solid var(--theme-border-color)) | Styles the bottom border of option list | ||
| --zg-option-list-border-left | var(--zg-option-list-border, 1px solid var(--theme-border-color)) | Styles the left border of option list | ||
| --zg-option-list-border-right | var(--zg-option-list-border, 1px solid var(--theme-border-color)) | Styles the right border of option list | ||
| --zg-option-list-border-top | var(--zg-option-list-border, 1px solid var(--theme-border-color)) | Styles the bottom top of option list | ||
| --zg-option-list-color | Browser's default value | Styles the color of option list item | ||
| --zg-option-list-item-background_hover | var(--theme-color-secondary) | Sets the background of option list item on hover | ||
| --zg-option-list-item-border | 0 | Styles the border of option list item | ||
| --zg-option-list-item-border-bottom | var(--zg-option-list-item-border, 0) | Styles the bottom border of option list item | ||
| --zg-option-list-item-border-left | var(--zg-option-list-item-border, 0) | Styles the left border of option list item | ||
| --zg-option-list-item-border-right | var(--zg-option-list-item-border, 0) | Styles the right border of option list item | ||
| --zg-option-list-item-border-top | var(--zg-option-list-item-border, 0) | Styles the top border of option list item | ||
| --zg-option-list-item-height | 32px | Sets the height of option list item | ||
| --zg-option-list-item-line-height | 32px | Sets the line height of option list item | ||
| --zg-option-list-item-padding | 0 15px | Sets the padding of option list item |
CSS Selector
<zg-option-list> can be styled by common CSS selectors, like so:
zg-option-list { background: red; }
Slots
There are no slots available for the <zg-option-list> web component.
[api: <zg-option-list>]