<zg-row-details>
Interactive Storybook Playground
The <zg-row-details> tag is a web component that is the container row expansion.
| Component | Relationship | Type | Ancestor |
|---|---|---|---|
| ZingGrid | Parent | Manual | n/a |
| ZGRow | Parent | Generated | n/a |
| ZingGrid | Child | Generated, Manual | n/a |
Related Web Components
Attributes
There are no attributes available for the <zg-row-details> web component.
Top
CSS Variables
<zg-row-details> can be styled with CSS variables, like so:
:root { --zg-row-details-background: red; }
Below is a list of all the associated --zg-row-details CSS variables. Check out the full list of CSS variables or our Styling Basics guide to learn more about styling the grid.
| Name | Default | Description | Demo | CSS Ref |
|---|---|---|---|---|
| --zg-row-details-background | var(--zg-head-background) | Styles the background of zg-row-details | ||
| --zg-row-details-border | 0 | Styles the border of zg-row-details | ||
| --zg-row-details-border-bottom | 0 | Styles the bottom border of zg-row-details | ||
| --zg-row-details-border-left | 0 | Styles the left border of zg-row-details | ||
| --zg-row-details-border-right | 0 | Styles the right border of zg-row-details | ||
| --zg-row-details-border-top | 0 | Styles the top border of zg-row-details | ||
| --zg-row-details-color | inherit | Sets the font color of zg-row-details | ||
| --zg-row-details-font-family | inherit | Sets the font family of zg-row-details | ||
| --zg-row-details-font-size | inherit | Sets the font size of zg-row-details | ||
| --zg-row-details-font-style | inherit | Sets the font style of zg-row-details | ||
| --zg-row-details-font-weight | inherit | Sets the font weight of zg-row-details | ||
| --zg-row-details-height | auto | Sets the height of zg-row-details | ||
| --zg-row-details-line-height | inherit | Sets the line height of zg-row-details | ||
| --zg-row-details-min-height | 70px | Sets the min-height of zg-row-details | ||
| --zg-row-details-padding | 20px 70px | Sets the padding of zg-row-details | ||
| --zg-row-details-transition | Browser's default value | Sets the transition of zg-row-details | ||
| --zg-row-details-word-break | break-all | Sets the word break of items in zg-row-details |
Top
CSS Selector
<zg-row-details> can be styled by common CSS selectors, like so:
zg-row-details { font-size: 2rem; }
Top
Slots
There are no slots available for the <zg-row-details> web component.
Top
[api: <zg-row-details>]