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

Attributes

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

Top

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
Name Default Description Demo CSS Ref
--zg-select-arrow-border 0 Styles the border of the select arrow button
--zg-select-arrow-border-bottom var(--zg-select-arrow-border, 0) Styles the bottom border of the select arrow button
--zg-select-arrow-border-left var(--zg-select-arrow-border, 1px solid var(--theme-border-color)) Styles the left border of the select arrow button
--zg-select-arrow-border-right var(--zg-select-arrow-border, 0) Styles the right border of the select arrow button
--zg-select-arrow-border-top var(--zg-select-arrow-border, 0) Styles the top border of the select arrow button
--zg-select-arrow-color #000 Sets the color select arrow icon
--zg-select-background Browser's default value Styles the background of the entire select parent wrapper
--zg-select-border 1px solid var(--theme-border-color)) Styles the border of the select
--zg-select-border-bottom var(--zg-select-border, 1px solid var(--theme-border-color)) Styles the bottom border of the select
--zg-select-border-left var(--zg-select-border, 1px solid var(--theme-border-color)) Styles the left border of the select
--zg-select-border-right var(--zg-select-border, 1px solid var(--theme-border-color)) Styles the right border of the select
--zg-select-border-top var(--zg-select-border, 1px solid var(--theme-border-color)) Styles the top border of the select
--zg-select-color var(--zing-grid-color, var(--theme-color)) Sets the font color of the select
--zg-select-color_active var(--theme-color) Sets the font color of the select option
--zg-select-font-family Browser's default value Sets the font family of the select option
--zg-select-font-size Browser's default value Sets the font size of the select option
--zg-select-font-weight Browser's default value Sets the font weight of the select option
--zg-select-height 28px Sets the minimum height of the select
--zg-select-line-height Browser's default value Sets the line height of the select option
--zg-select-min-width Browser's default value Sets the minimum width of select
--zg-select-text-background #fff Styles the background of the 'text' portion of the zg-select element
--zg-select-transform Browser's default value Sets the transform of the select option
--zg-select-trigger-background var(--zg-select-arrow-background) Styles the background of the select arrow button (trigger)
Top

CSS Selector

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

zg-select {
  background: red;
}
Top

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
Name Description
mask The container for the selection mask
select The container for selection
select The container for selection
select-inner The inner container for selection
Top

Slots

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

Top

[api: <zg-select>]