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

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
Top

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
Name Default Description Demo CSS Ref
--zg-source-background var(--theme-color-light) Styles the background of source when in ``
--zg-source-background_bottom var(--zg-source-background, var(--theme-color-light)) Styles the background of source in grid footer
--zg-source-background_top var(--zg-source-background, var(--theme-color-light)) Styles the background of source in grid header
--zg-source-border 1px solid var(--theme-border-color) Styles the border of source when in ``
--zg-source-border-bottom var(--zg-source-border, 0) Styles the bottom border of source when in ``
--zg-source-border-bottom_bottom var(--zg-source-border-bottom, var(--zg-source-border, 0)) Styles the bottom border of source in grid footer
--zg-source-border-bottom_top var(--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-left var(--zg-source-border, 0) Styles the left border of source when in ``
--zg-source-border-left_bottom var(--zg-source-border-left, var(--zg-source-border, 0)) Styles the left border of source when in grid footer
--zg-source-border-left_top var(--zg-source-border-left, var(--zg-source-border, 0)) Styles the left border of source in grid header
--zg-source-border-radius 0 Styles the border radius of source
--zg-source-border-radius_bottom var(--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_top var(--zg-source-border-radius, 0) Sets the border radius of source in grid header
--zg-source-border-right var(--zg-source-border, 0) Styles the right border of source when in ``
--zg-source-border-right_bottom var(--zg-source-border-right, var(--zg-source-border, 0)) Styles the right border of source in grid footer
--zg-source-border-right_top var(--zg-source-border-right, var(--zg-source-border, 0)) Styles the right border of source in grid header
--zg-source-border-top var(--zg-source-border, 1px solid var(--theme-border-color) Styles the top border of source when in ``
--zg-source-border-top_bottom var(--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_top var(--zg-source-border-top, var(--zg-source-border, 0)) Styles the top border of source in grid header
--zg-source-border_bottom var(--zg-source-border, 0) Styles the border of source in grid footer
--zg-source-border_top 1px solid var(--theme-border-color) Styles the border of source in grid header
--zg-source-color var(--theme-font-size) Sets the font color content inside of source
--zg-source-color_bottom var(--zg-source-color, var(--zg-source-border, 0)) Sets the font color of source in grid footer
--zg-source-color_top var(--zg-source-color, var(--zg-source-border, 0)) Sets the font color of source in grid header
--zg-source-font-size inherit Sets the font size of source
--zg-source-font-size_bottom var(--zg-source-font-size, .8rem) Sets the font size of source in grid footer
--zg-source-font-size_top var(--zg-source-font-size, .8rem) Sets the font size of source in grid header
--zg-source-font-style inherit Sets the font style of source
--zg-source-font-style_bottom var(--zg-source-font-style, inherit) Sets the font style of source in grid footer
--zg-source-font-style_top var(--zg-source-font-style, inherit) Sets the font style of source in grid header
--zg-source-font-weight inherit Sets the font weight of source
--zg-source-font-weight_bottom var(--zg-source-font-weight, inherit) Sets the font weight of source in grid footer
--zg-source-font-weight_top var(--zg-source-font-weight, inherit) Sets the font weight of source in grid header
--zg-source-line-height inherit Setes the line height of source
--zg-source-line-height_bottom var(--zg-source-line-height, inherit) Sets the line height of source in grid footer
--zg-source-line-height_top var(--zg-source-line-height, inherit) Sets the line height of source in grid header
--zg-source-min-height auto Sets the min-height of source
--zg-source-min-height_bottom var(--zg-source-min-height, var(--zg-source-border, 0)) Sets the min-height of source in grid footer
--zg-source-min-height_top var(--zg-source-min-height, var(--zg-source-border, 0)) Sets the min-height of source in grid header
--zg-source-padding 5px var(--theme-padding_x) Sets the padding of source
--zg-source-padding_bottom var(--zg-source-padding, 5px var(--theme-padding_x)) Sets the padding of source when in grid footer
--zg-source-padding_top var(--zg-source-padding, 5px var(--theme-padding_x)) Sets the padding of source in grid header
--zg-source-text-align left Sets text alignment of content inside of source
--zg-source-text-align_bottom var(--zg-source-text-align, var(--zg-source-border, 0)) Sets the text alignment of source in grid footer
--zg-source-text-align_top var(--zg-source-text-align, var(--zg-source-border, 0)) Sets the text alignment of source in grid header
Top

CSS Selector

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

zg-source {
  background-color: red;
}
Top

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
Name Description Demo
source The container for the source
Top

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
Name Description Demo
Source content.
Top

[api: <zg-source>]