Data entity
Data entity
Component demo
Interactive example
<ic-data-entityheading="Order details"><ic-data-rowlabel="Order name"value="Michael"><ic-linkhref="#"slot="end-component"> Edit</ic-link></ic-data-row><ic-data-rowlabel="Drink"value="Americano"><ic-linkhref="#"slot="end-component"> Edit</ic-link></ic-data-row><ic-data-rowlabel="Milk option"value="Soya milk"><ic-linkhref="#"slot="end-component"> Edit</ic-link></ic-data-row><ic-data-rowlabel="Price"value="£3.25"><ic-linkhref="#"slot="end-component"> Edit</ic-link></ic-data-row><ic-data-rowlabel="Payment method"><ic-typographyvariant="body"slot="value"> VISA ending 5896</ic-typography><ic-linkhref="#"slot="end-component"> Edit</ic-link></ic-data-row><ic-data-rowlabel="Download receipt"value="CoffeeOrder_X46w32.pdf"><ic-buttonvariant="icon"aria-label="Download"slot="end-component"><svgviewBox="0 0 24 24"height="24"width="24"><pathd="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"fill="currentColor"/></svg></ic-button></ic-data-row></ic-data-entity>
<IcDataEntityheading="Order details"><IcDataRowlabel="Order name"value="Michael"><IcLinkhref="#"slot="end-component"> Edit</IcLink></IcDataRow><IcDataRowlabel="Drink"value="Americano"><IcLinkhref="#"slot="end-component"> Edit</IcLink></IcDataRow><IcDataRowlabel="Milk option"value="Soya milk"><IcLinkhref="#"slot="end-component"> Edit</IcLink></IcDataRow><IcDataRowlabel="Price"value="£3.25"><IcLinkhref="#"slot="end-component"> Edit</IcLink></IcDataRow><IcDataRowlabel="Payment method"><IcTypographyvariant="body"slot="value"> VISA ending 5896</IcTypography><IcLinkhref="#"slot="end-component"> Edit</IcLink></IcDataRow><IcDataRowlabel="Download receipt"value="CoffeeOrder_X46w32.pdf"><IcButtonvariant="icon"aria-label="Download"slot="end-component"><SlottedSVGviewBox="0 0 24 24"height="24"width="24"><pathd="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"fill="currentColor"/></SlottedSVG></IcButton></IcDataRow></IcDataEntity>
Data row details
Props
All components also accept native properties supported by the DOM, such asclassName
and
style
.
|
|
|
---|---|---|
|
The label in the leftmost cell of the row. |
|
|
The size of the data row component. |
|
|
|
|
|
The value of the middle (right if no end-component supplied) cell of the row. |
|
The label in the leftmost cell of the row. |
|