<zg-source>

Version 1

Interactive Storybook Playground

The <zg-source> tag is a web component that is used to cite the source of the data in ZingGrid. The element internally wraps any text in a <cite role="any"> tag for proper semantics. The <zg-source> can be styled using CSS variables and the zg-source selector.

Related Web Components

• <zing-grid>
• <zg-footer>

Usage

A <zg-source> tag can be manually inserted inside the grid as slotted content or automatically inserted when the source attribute is added to the <zing-grid> tag.

You can use the source attribute, like so:

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

You can slot the <zg-source> tag as well:

<zing-grid 
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-source><span>Source:</span>https://www.zinggrid.com</zg-source>
</zing-grid>

Attributes

The <zg-source> tag has some attributes for positioning the element within the grid layout.

Example Usage

<zing-grid 
  src="https://cdn.zinggrid.com/datasets/user-roles.json">
  <zg-source position="both"><span>Source:</span>https://www.zinggrid.com</zg-source>
</zing-grid>

CSS Variables

<zg-source> can be styled by CSS variables, like so:

:root {
  --zg-source-min-height: 120px;
}

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

CSS Selector

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

zg-source {
  background-color: red;
}

CSS Shadow Parts

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

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

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

Slots

<zg-source> contains placeholders to allow adding markup inside the component.

<zg-source>Slotted Content</zg-source>

Below is a list of all the associated ZGSource slots. Check out the full list of slots.