<zg-source>
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
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.