<zg-text>
Interactive Storybook Playground
ZingGrid has a predefined set of attribute values to display information about the grid state. <zg-text> is a self-contained web component so you can display the value anywhere in the grid.
Related Web Components
Usage
<zg-text> is a ZingGrid specific text value that is bound to the status of the grid, as defined by the value attribute. The field can be manually inserted by a developer, but is more commonly added by the use of certain grid features, like paging. The element can inherently be styled through CSS variables or by targeting the tag directly.
<zing-grid src="https://cdn.zinggrid.com/datasets/user-roles.json">
<zg-footer>
<div>
<span>Showing</span>
<zg-text value="currpage"></zg-text>
<span>-</span>
<zg-text value="pagecount"></zg-text>
<span>of</span>
<zg-text value="pagecount"></zg-text>
<span>rows</span>
</div>
<div>
<zg-button action="prevpage"></zg-button>
<zg-text value="currpage"></zg-text>
<zg-button action="nextpage"></zg-button>
</div>
</zg-footer>
</zing-grid>
Attributes
There is a value attribute to specify what is generated in the text field.
Type Attribute Values
These are the accepted values for the type attribute:
CSS Variables
<zg-text> can be styled with CSS variables, like so:
:root {
--zg-text-color: red;
}
Below is a list of all the associated --zg-text CSS variables. Check out the full list of CSS variables or our Styling Basics guide to learn more about styling the grid.
Example Usage
CSS Selector
<zg-text> can be styled by common CSS selectors, like so:
zg-text {
font-size: 2rem;
}
## Slots
`<zg-text>` contains placeholders to allow adding markup inside the component.
```html
<zg-text>Slotted Content</zg-text>
Below is a list of all the associated ZGText slots. Check out the full list of slots.