zg-control-bar

The <zg-control-bar> tag is a web component that serves as a container for the grid's interface controls. As a generated element, the user should not manually place the <zg-control-bar> in their grid. However, users can style the components internal elements using CSS.

Image of the DOM relationship for the zg-control-bar web component tag

Related Web Components

Usage

You must enable a feature that triggers the <zg-control-bar> to show. Enabling layout-controls will trigger the container to show.

<zing-grid 
  layout-controls 
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
</zing-grid>

After <zg-control-bar> is initialized, you must define some styling.

zing-grid {
  --zg-control-bar-border: 10px solid #EF5350;
}

Attributes

There are no attributes variables available for the <zg-control-bar> web component.

CSS Variables

All the associated --zg-control-bar CSS variables. You can find the full list of css variables or check out our styling basics to learn more about styling the grid.

root: {
--zg-control-bar-padding: 2rem;
}
ZGControlBar CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-control-bar-backgroundBrowser's default valueStyles the background of control-bar
--zg-control-bar-border1px solid var(--theme-border-color)Styles the border of control-bar
--zg-control-bar-border-bottomvar(--zg-control-bar-border, 1px solid var(--theme-border-color))Styles the bottom border of control-bar
--zg-control-bar-border-leftvar(--zg-control-bar-border, 0)Styles the left border of control-bar
--zg-control-bar-border-rightvar(--zg-control-bar-border, 0)Styles the right border of control-bar
--zg-control-bar-border-topvar(--zg-control-bar-border, 0)Styles the top border of control-bar
--zg-control-bar-layout-content""Sets the before 'content' of inner layout container
--zg-control-bar-layout-justify-contentflex-endSets the horizontal alignment of contents in inner layout container
--zg-control-bar-margin0Sets the margin of control-bar
--zg-control-bar-min-height30pxSets the min-height of control bar
--zg-control-bar-padding2px var(--theme-padding_x) 2px calc(var(--theme-padding_x) - 6px)Sets the padding of control-bar
--zg-control-bar-visibilityvisibleSets the visibility of component

CSS Selector

<zg-control-bar> can be styled by common CSS selectors.

zg-control-bar {
  border: 1px solid red;
}