zg-source

The <zg-source> tag is a web component that is used to source 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 sourc attribute is added to the <zing-grid> tag.

You can use the source attribute:

<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

All the associated --zg-source 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-source-min-height: 120px;
}
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.

zg-source {
  background-color: red;
}