Row Component

A flexible row component with leading, content, and trailing slots.

Properties

Name	Type	Default	Description
size	'standard' | 'compact'	'compact'	The size of the row. Defaults to standard.
navigable	boolean	false	Indicates whether the row is navigable (clickable).

Slots

Name	Description
leading	the leading slot of the row
content	the content slot of the row
trailing	the trailing slot of the row

CSS Parts

Name	Description
row	The main container for the row.
leading	The container for the leading slot.
content	The container for the content slot.
trailing	The container for the trailing slot.
navigable	The container for the navigable icon.

Check this link to learn how to use CSS parts for Row Component.

CSS Properties

Token	Default	Description
--tap-font-family	--tap-sys-font-family	The font family used in the row.
--tap-row-background-color	--tap-palette-white	The background color of the row.
--tap-row-leading-vertical-padding	-	The vertical padding for the leading slot.
--tap-row-leading-horizontal-padding	--tap-sys-spacing-4	The horizontal padding for the leading slot.
--tap-row-content-padding	--tap-sys-spacing-4	The padding for the content slot.
--tap-row-trailing-vertical-padding	-	The vertical padding for the trailing slot.
--tap-row-trailing-horizontal-padding	--tap-sys-spacing-4	The horizontal padding for the trailing slot.
--tap-row-standard-height	--tap-sys-spacing-13	The height of the standard size row.
--tap-row-compact-height	--tap-sys-spacing-12	The height of the compact size row.

Events

Name	Description
slotchange	Dispatched when the content of any slot changes.