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

Image of the DOM relationship for the zg-source web component tag

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>

position

String

Description

Indicates where to position the source

Default Value

"bottom"

Accepted Values

  • "top"
  • "bottom"
  • "both"
Demo

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.

ZGSource CSS Variables and Default Values
NameDefaultDescriptionDemoCSS Ref
--zg-source-backgroundvar(--theme-color-light)Styles the background of source when in ``
--zg-source-background_bottomvar(--zg-source-background, var(--theme-color-light))Styles the background of source in grid footer
--zg-source-background_topvar(--zg-source-background, var(--theme-color-light))Styles the background of source in grid header
--zg-source-border1px solid var(--theme-border-color)Styles the border of source when in ``
--zg-source-border-bottomvar(--zg-source-border, 0)Styles the bottom border of source when in ``
--zg-source-border-bottom_bottomvar(--zg-source-border-bottom, var(--zg-source-border, 0))Styles the bottom border of source in grid footer
--zg-source-border-bottom_topvar(--zg-source-border-bottom, var(--zg-source-border, 1px solid var(--theme-border-color)))Styles the bottom border of source in grid header
--zg-source-border-leftvar(--zg-source-border, 0)Styles the left border of source when in ``
--zg-source-border-left_bottomvar(--zg-source-border-left, var(--zg-source-border, 0))Styles the left border of source when in grid footer
--zg-source-border-left_topvar(--zg-source-border-left, var(--zg-source-border, 0))Styles the left border of source in grid header
--zg-source-border-radius0Styles the border radius of source
--zg-source-border-radius_bottomvar(--zg-source-border-radius, 0 0 var(--zing-grid-border-radius, 0) var(--zing-grid-border-radius, 0))Styles the top border of source in grid footer
--zg-source-border-radius_topvar(--zg-source-border-radius, 0)Sets the border radius of source in grid header
--zg-source-border-rightvar(--zg-source-border, 0)Styles the right border of source when in ``
--zg-source-border-right_bottomvar(--zg-source-border-right, var(--zg-source-border, 0))Styles the right border of source in grid footer
--zg-source-border-right_topvar(--zg-source-border-right, var(--zg-source-border, 0))Styles the right border of source in grid header
--zg-source-border-topvar(--zg-source-border, 1px solid var(--theme-border-color)Styles the top border of source when in ``
--zg-source-border-top_bottomvar(--zg-source-border-top, var(--zg-source-border, 1px solid var(--theme-border-color)))Sets the border radius of source in grid footer
--zg-source-border-top_topvar(--zg-source-border-top, var(--zg-source-border, 0))Styles the top border of source in grid header
--zg-source-border_bottomvar(--zg-source-border, 0)Styles the border of source in grid footer
--zg-source-border_top1px solid var(--theme-border-color)Styles the border of source in grid header
--zg-source-colorvar(--theme-font-size)Sets the font color content inside of source when in ``
--zg-source-color_bottomvar(--zg-source-color, var(--zg-source-border, 0))Sets the font color of source in grid footer
--zg-source-color_topvar(--zg-source-color, var(--zg-source-border, 0))Sets the font color of source in grid header
--zg-source-font-sizeinheritSets the font size of source
--zg-source-font-size_bottomvar(--zg-source-font-size, .8rem)Sets the font size of source in grid footer
--zg-source-font-size_topvar(--zg-source-font-size, .8rem)Sets the font size of source in grid header
--zg-source-font-styleinheritSets the font style of source
--zg-source-font-style_bottomvar(--zg-source-font-style, inherit)Sets the font style of source in grid footer
--zg-source-font-style_topvar(--zg-source-font-style, inherit)Sets the font style of source in grid header
--zg-source-font-weightinheritSets the font weight of source
--zg-source-font-weight_bottomvar(--zg-source-font-weight, inherit)Sets the font weight of source in grid footer
--zg-source-font-weight_topvar(--zg-source-font-weight, inherit)Sets the font weight of source in grid header
--zg-source-line-heightinheritSetes the line height of source
--zg-source-line-height_bottomvar(--zg-source-line-height, inherit)Sets the line height of source in grid footer
--zg-source-line-height_topvar(--zg-source-line-height, inherit)Sets the line height of source in grid header
--zg-source-min-heightautoSets the min-height of source
--zg-source-min-height_bottomvar(--zg-source-min-height, var(--zg-source-border, 0))Sets the min-height of source in grid footer
--zg-source-min-height_topvar(--zg-source-min-height, var(--zg-source-border, 0))Sets the min-height of source in grid header
--zg-source-padding5px var(--theme-padding_x)Sets the padding of source
--zg-source-padding_bottomvar(--zg-source-padding, 5px var(--theme-padding_x))Sets the padding of source when in grid footer
--zg-source-padding_topvar(--zg-source-padding, 5px var(--theme-padding_x))Sets the padding of source in grid header
--zg-source-text-alignleftSets text alignment of content inside of source
--zg-source-text-align_bottomvar(--zg-source-text-align, var(--zg-source-border, 0))Sets the text alignment of source in grid footer
--zg-source-text-align_topvar(--zg-source-text-align, var(--zg-source-border, 0))Sets the text alignment of source in grid header

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.

ZGSource CSS Shadow Parts
NameDescriptionDemo
sourceThe container for the source

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.

ZGSource Slots
NameDescriptionDemo
Source content.

[api: <zg-source>]