<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 <zg-control-bar> in their grid. However, users can style the component's internal elements using CSS.

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

Related Web Components

Usage

TO trigger the <zg-control-bar> to show, you'll need to also enable layout-controls, like so:

<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, like so:

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

Attributes

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

CSS Variables

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

root: {
--zg-control-bar-padding: 2rem;
}

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

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, like so:

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