Ui.Cell

This is a component to render the Ui.Cell enum.
It is used to render data in tables and definition lists.

Interactive Demo

You can check out how the different cases render below:

<div></div>
Hello!
Hello!
0
<>
<Ui.Cell cell={Ui.Cell.Code(code: "<div></div>", breakSpaces: false)}/>
<Ui.Cell cell={Ui.Cell.Html(<>"Hello!"</>)}/>
<Ui.Cell cell={Ui.Cell.String("Hello!")}/>
<Ui.Cell cell={Ui.Cell.Number(0)}/>
<Ui.Cell
cell={
Ui.Cell.HtmlItems(
breakOnMobile: true,
items:
[
<Ui.Icon icon={Ui.Icons.PENCIL}/>,
<Ui.Icon icon={Ui.Icons.TRASHCAN}/>,
<Ui.Icon icon={Ui.Icons.DESKTOP_DOWNLOAD}/>
])
}
/>
</>
Content

The cell itself can be set with the cell property.

<div></div>
Hello!
Hello!
0
<>
<Ui.Cell cell={Ui.Cell.Code(code: "<div></div>", breakSpaces: false)}/>
<Ui.Cell cell={Ui.Cell.Html(<>"Hello!"</>)}/>
<Ui.Cell cell={Ui.Cell.String("Hello!")}/>
<Ui.Cell cell={Ui.Cell.Number(0)}/>
</>
Size

The size of a cell can be set with the size property.

String value!
String value!
String value!
<>
<Ui.Cell cell={Ui.Cell.String("String value!")} size={Ui.Size.Px(12)}/>
<Ui.Cell cell={Ui.Cell.String("String value!")} size={Ui.Size.Px(16)}/>
<Ui.Cell cell={Ui.Cell.String("String value!")} size={Ui.Size.Px(20)}/>
</>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.