<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.

Image of the DOM relationship for the zg-option-list web component tag

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.

ZGOptionList CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-option-list-background#fffStyles the background of option list
--zg-option-list-border1px solid var(--theme-border-color)Styles the border of option list
--zg-option-list-border-bottomvar(--zg-option-list-border, 1px solid var(--theme-border-color))Styles the bottom border of option list
--zg-option-list-border-leftvar(--zg-option-list-border, 1px solid var(--theme-border-color))Styles the left border of option list
--zg-option-list-border-rightvar(--zg-option-list-border, 1px solid var(--theme-border-color))Styles the right border of option list
--zg-option-list-border-topvar(--zg-option-list-border, 1px solid var(--theme-border-color))Styles the bottom top of option list
--zg-option-list-colorBrowser's default valueStyles the color of option list item
--zg-option-list-item-background_hovervar(--theme-color-secondary)Sets the background of option list item on hover
--zg-option-list-item-border0Styles the border of option list item
--zg-option-list-item-border-bottomvar(--zg-option-list-item-border, 0)Styles the bottom border of option list item
--zg-option-list-item-border-leftvar(--zg-option-list-item-border, 0)Styles the left border of option list item
--zg-option-list-item-border-rightvar(--zg-option-list-item-border, 0)Styles the right border of option list item
--zg-option-list-item-border-topvar(--zg-option-list-item-border, 0)Styles the top border of option list item
--zg-option-list-item-height32pxSets the height of option list item
--zg-option-list-item-line-height32pxSets the line height of option list item
--zg-option-list-item-padding0 15pxSets 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>]