Docs

<zg-select>

Interactive Storybook Playground

The <zg-select> tag is a web component that serves as the grid's custom dropdown and used as a CSS target for styling by the developer.. The <zg-select> web component should not be accessed specifically beyond styling.

Image of the DOM relationship for the zg-select web component tag

Related Web Components

Usage

The <zg-select> element is a generated element added to <zg-pager> 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-select> web component.

CSS Variables

<zg-select> can be styled with CSS variables, like so:

:root {
  --zg-select-background: red;
}

Below is a list of all the associated <zg-select> CSS variables. Check out the full list of CSS variables or our Styling Basics guide to learn more about styling the grid.

ZGSelect CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-select-arrow-border0Styles the border of the select arrow button
--zg-select-arrow-border-bottomvar(--zg-select-arrow-border, 0)Styles the bottom border of the select arrow button
--zg-select-arrow-border-leftvar(--zg-select-arrow-border, 1px solid var(--theme-border-color))Styles the left border of the select arrow button
--zg-select-arrow-border-rightvar(--zg-select-arrow-border, 0)Styles the right border of the select arrow button
--zg-select-arrow-border-topvar(--zg-select-arrow-border, 0)Styles the top border of the select arrow button
--zg-select-arrow-color#000Sets the color select arrow icon
--zg-select-backgroundBrowser's default valueStyles the background of the entire select parent wrapper
--zg-select-border1px solid var(--theme-border-color))Styles the border of the select
--zg-select-border-bottomvar(--zg-select-border, 1px solid var(--theme-border-color))Styles the bottom border of the select
--zg-select-border-leftvar(--zg-select-border, 1px solid var(--theme-border-color))Styles the left border of the select
--zg-select-border-rightvar(--zg-select-border, 1px solid var(--theme-border-color))Styles the right border of the select
--zg-select-border-topvar(--zg-select-border, 1px solid var(--theme-border-color))Styles the top border of the select
--zg-select-colorvar(--zing-grid-color, var(--theme-color))Sets the font color of the select
--zg-select-color_activeSets the font color of the select option
--zg-select-font-familyBrowser's default valueSets the font family of the select option
--zg-select-font-sizeBrowser's default valueSets the font size of the select option
--zg-select-font-weightBrowser's default valueSets the font weight of the select option
--zg-select-height28pxSets the minimum height of the select
--zg-select-line-heightBrowser's default valueSets the line height of the select option
--zg-select-min-widthBrowser's default valueSets the minimum width of select
--zg-select-outlineinheritSets the outline of the select option
--zg-select-text-background#fffStyles the background of the 'text' portion of the zg-select element
--zg-select-transformBrowser's default valueSets the transform of the select option
--zg-select-trigger-backgroundvar(--zg-select-arrow-background)Styles the background of the select arrow button (trigger)

CSS Selector

<zg-select> can be styled by common CSS selectors, like so:

zg-select {
  background: red;
}

CSS Shadow Parts

<zg-select> exposed elements within the shadow can be styled by CSS shadow parts, like so:

zg-select::part(select) {
  background-color: red;
}

Below is a list of all the associated ZGSelect shadow parts. Check out the full list of CSS shadow parts or our Styling Basics guide to learn more about styling the grid.

ZGSelect CSS Shadow Parts
NameDescriptionDemo
maskThe container for the selection mask
selectThe container for selection
select-innerThe inner container for selection

Slots

There are no slots available for the <zg-select> web component.

[api: <zg-select>]