Taiga UI 5.0 is out!
See what's new
Cell CORE
On this page
Basic
Title
Description
Secondary title
Another description
Title
Description
Secondary title
Another description
Title
Description
Secondary title
Another description
@for (size of sizes; track size) {
<div [tuiCell]="size">
<div
appearance="primary"
tuiAvatar="@tui.star"
></div>
<div tuiTitle>
Title
<div tuiSubtitle>Description</div>
</div>
<div tuiTitle>
Secondary title
<div tuiSubtitle>Another description</div>
</div>
</div>
}
:host {
display: flex;
flex-direction: column;
gap: 2rem;
}
[tuiCell] {
max-inline-size: 25rem;
}
Label
<label tuiCell>
<tui-badged-content>
<tui-icon
appearance="negative"
iconStart="@tui.arrow-down-left"
size="s"
tuiBadge
tuiSlot="top"
/>
<div
size="s"
tuiAvatar="@tui.phone"
></div>
</tui-badged-content>
<div
tuiTitle
[style.color]="'var(--tui-text-negative)'"
>
Allow incoming
<div tuiSubtitle>Why would you?</div>
</div>
<input
tuiSwitch
type="checkbox"
[(ngModel)]="incoming"
/>
</label>
<label tuiCell>
<tui-badged-content>
<tui-icon
appearance="positive"
iconStart="@tui.arrow-up-right"
size="s"
tuiBadge
tuiSlot="top"
/>
<div
size="s"
tuiAvatar="@tui.phone"
></div>
</tui-badged-content>
<div tuiTitle>Allow outgoing</div>
<input
tuiSwitch
type="checkbox"
[(ngModel)]="outgoing"
/>
</label>
:host {
display: flex;
flex-direction: column;
gap: 1rem;
}
[tuiCell] {
max-inline-size: 25rem;
}
Left side
$30 our of $100
Saving for a Benjamin Franklin portrait
+$30
1234
Primary Card
**** **** **** 1234
Ridley Scott, 1982
Blade Runner A blade runner must pursue and terminate four replicants who stole a ship in space and have returned to Earth to find their creator.
<div tuiCell>
<label tuiProgressLabel>
<tui-icon
icon="@tui.smile"
[style.color]="'var(--tui-background-accent-1)'"
/>
<tui-progress-circle
size="s"
[value]="0.3"
/>
</label>
<div tuiTitle>
<strong>$30 our of $100</strong>
<div tuiSubtitle>Saving for a Benjamin Franklin portrait</div>
</div>
<div tuiTitle>
<div
appearance="positive"
size="s"
tuiBadge
>
+$30
</div>
<div tuiSubtitle> </div>
</div>
</div>
<div tuiCell>
<tui-avatar-stack>
<div tuiAvatar="@tui.user">
<img
alt=""
src="assets/images/avatar.jpg"
/>
</div>
<div tuiAvatar="@tui.user">
<img
alt=""
src="assets/images/poorly.png"
/>
</div>
<div tuiAvatar>+2</div>
</tui-avatar-stack>
<div tuiTitle>
Waterplea
<div tuiSubtitle>
<div
appearance="neutral"
size="s"
tuiBadge
>
<tui-icon icon="@tui.lock" />
100 ₽
</div>
Music
<tui-icon
appearance="positive"
iconStart="@tui.bell"
size="s"
tuiBadge
/>
</div>
</div>
<a
href="https://waterplea.bandcamp.com"
tuiLink
>
Buy
</a>
</div>
<div tuiCell>
<input
tuiCheckbox
type="checkbox"
[(ngModel)]="value"
/>
<tui-thumbnail-card
paymentSystem="mastercard"
size="s"
>
1234
</tui-thumbnail-card>
<div tuiTitle>
Primary Card
<div tuiSubtitle>**** **** **** 1234</div>
</div>
</div>
<div tuiCell>
<img
alt="Poster"
src="https://m.media-amazon.com/images/M/MV5BNzQzMzJhZTEtOWM4NS00MTdhLTg0YjgtMjM4MDRkZjUwZDBlXkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_UY209_CR0,0,140,209_AL_.jpg"
[style.border-radius.rem]="0.5"
[style.width.rem]="3"
/>
<div tuiTitle>
<div tuiSubtitle>Ridley Scott, 1982</div>
Blade Runner
<div tuiSubtitle>
A blade runner must pursue and terminate four replicants who stole a ship in space and have returned to
Earth to find their creator.
</div>
</div>
</div>
:host {
display: flex;
flex-direction: column;
gap: 1rem;
}
[tuiCell] {
max-inline-size: 25rem;
}
Right side
Notifications
Read
Salary
Enough
Sky's the limit
<a
href="https://github.com/taiga-family/taiga-ui"
tuiCell
>
<div tuiTitle>Notifications</div>
<tui-badge-notification size="l">3</tui-badge-notification>
<tui-icon
tuiTooltip="A cell can be a link"
(click.prevent)="(0)"
/>
<div tuiSubtitle>
Read
<tui-icon icon="@tui.chevron-right" />
</div>
</a>
<label tuiCell>
<div tuiTitle>
A label
<div tuiSubtitle>Clicking it will toggle checkbox</div>
</div>
<tui-loader />
<input
tuiCheckbox
type="checkbox"
[(ngModel)]="value"
/>
</label>
<button
tuiCell
type="button"
>
<div tuiTitle>
<div tuiSubtitle>
<span [style.color]="'var(--tui-text-positive)'">For sale</span>
•
<span>ebay</span>
</div>
It can be a button
<div tuiSubtitle>In stock</div>
</div>
<div tuiTitle>
<div tuiSubtitle> </div>
$237
<div tuiSubtitle>321 items</div>
</div>
</button>
<div tuiCell>
<div tuiAvatar="@tui.user">
<img
alt=""
src="assets/images/avatar.jpg"
/>
</div>
<div tuiTitle>Salary</div>
<div tuiTitle>
<span
[style.color]="'var(--tui-text-positive)'"
[tuiSensitive]="true"
>
Enough
</span>
<div tuiSubtitle>Sky's the limit</div>
</div>
</div>
:host {
display: flex;
flex-direction: column;
gap: 1rem;
}
[tuiCell] {
max-inline-size: 25rem;
}
Long content
Long title in a cell will wrap to multiple lines and so will the subtitle
Use tuiAccessories to keep your side content properly aligned if you have many lines of text
Alternatively you can use fade to hide extra text using nowrap CSS
Works the same for subtitle when fade directive is applied to the top
Works with the right side
Works with fade on both sides
You can control proportions
Proportions are controlled with flex
Flex shrink is set to 70-30 by default
Alexander
Taiga UI developer
+$1000
Bonus for tuiCell component
Awesome!
Main account
USD
By default unless arrested
$123 456
Careful, content may overlap
<div tuiCell>
<div
tuiAccessories
tuiAvatar="@tui.eye"
></div>
<div tuiTitle>
Long title in a cell will wrap to multiple lines and so will the subtitle
<div
tuiSubtitle
[style.display]="'block'"
>
Use
<strong>tuiAccessories</strong>
to keep your side content properly aligned if you have many lines of text
</div>
</div>
<div tuiAccessories>
<tui-icon
icon="@tui.check"
[style.color]="'var(--tui-text-positive)'"
/>
</div>
</div>
<div
tuiCell
[style.white-space]="'nowrap'"
>
<div
tuiFade
tuiTitle
>
Alternatively you can use fade to hide extra text using nowrap CSS
<div tuiSubtitle>Works the same for subtitle when fade directive is applied to the top</div>
</div>
<div tuiBadge>Works with the right side</div>
</div>
<div
tuiCell
[style.white-space]="'nowrap'"
>
<div
tuiAvatar="@tui.smile"
[round]="false"
></div>
<div
tuiFade
tuiTitle
>
Works with fade on both sides
<div tuiSubtitle>You can control proportions</div>
</div>
<div
tuiFade
tuiTitle
>
Proportions are controlled with flex
<div tuiSubtitle>Flex shrink is set to 70-30 by default</div>
</div>
<tui-badge-notification size="xs" />
</div>
<div tuiCell>
<div
tuiAccessories
tuiAvatar="@tui.user"
>
<img
alt=""
src="assets/images/avatar.jpg"
/>
</div>
<div
tuiAccessories
tuiTitle
>
Alexander
<div tuiSubtitle>Taiga UI developer</div>
</div>
<div tuiTitle>
<span [style.color]="'var(--tui-text-positive)'">+$1000</span>
<div tuiSubtitle>Bonus for tuiCell component</div>
<div
appearance="primary"
tuiBadge
>
Awesome!
</div>
</div>
</div>
<div tuiCell>
<div
tuiAccessories
tuiAvatar="@tui.home"
></div>
<div tuiTitle>
<strong>Main account</strong>
<div tuiSubtitle>USD</div>
<div
appearance="neutral"
tuiBadge
>
By default unless arrested
</div>
</div>
<div
tuiAccessories
tuiTitle
[style.overflow]="'visible'"
[style.white-space]="'nowrap'"
[style.width]="0"
>
$123 456
<div tuiSubtitle>Careful, content may overlap</div>
</div>
</div>
:host {
display: flex;
flex-direction: column;
gap: 1rem;
}
[tuiCell] {
max-inline-size: 25rem;
}
Actions
Single action
Description of the action
Multiple actions
With no content on the right
<div tuiCell>
<div tuiTitle>
Single action
<div tuiSubtitle>Description of the action</div>
</div>
<button
tuiButton
type="button"
>
Action
</button>
</div>
<div tuiCell>
<div tuiTitle>
Multiple actions
<div tuiSubtitle>With no content on the right</div>
</div>
<button
appearance="icon"
iconStart="@tui.ellipsis"
tuiDropdownAlign="end"
tuiDropdownAuto
tuiIconButton
type="button"
[tuiDropdown]="dropdown"
>
Action
</button>
<ng-template
#dropdown
let-close
>
<tui-data-list-wrapper
[items]="items"
(itemClick)="close()"
/>
</ng-template>
</div>
<button
tuiCell
type="button"
>
<div tuiTitle>
Multiple actions
<div tuiSubtitle>When there's content on the right</div>
</div>
<div
tuiCellActions
tuiGroup
tuiTheme="dark"
[collapsed]="true"
>
@for (item of items; track item) {
<button
appearance="primary-grayscale"
tuiIconButton
type="button"
[iconStart]="item.icon"
>
{{ item }}
</button>
}
</div>
<div tuiTitle>
Hover over
<div tuiSubtitle>Put it before the right side</div>
</div>
</button>
:host {
display: flex;
flex-direction: column;
gap: 1rem;
}
[tuiCell] {
max-inline-size: 25rem;
}
Combinations
Inside a block
Cell is used inside DataList options and Textfield template by default.
<div
appearance="floating"
tuiCardLarge
>
<h3 tuiTitle="m">Inside a block</h3>
@for (item of items; track item) {
<button
tuiCell
type="button"
>
<div
appearance="accent"
[tuiAvatar]="item.icon"
></div>
<span tuiTitle>
{{ item.title }}
<span tuiSubtitle>{{ item.subtitle }}</span>
</span>
</button>
}
</div>
<div tuiNotification>
<code>Cell</code>
is used inside
<code>DataList</code>
options and
<code>Textfield</code>
template by default.
</div>
<tui-textfield
tuiChevron
[content]="content"
[tuiTextfieldCleaner]="false"
>
<input
tuiSelect
[(ngModel)]="value"
/>
<tui-data-list-wrapper
*tuiDropdown
[itemContent]="content"
[items]="items"
/>
<ng-template
#content
let-item
>
<div
appearance="primary"
[tuiAvatar]="item.icon"
></div>
<span tuiTitle>
{{ item.title }}
<span tuiSubtitle>{{ item.subtitle }}</span>
</span>
</ng-template>
</tui-textfield>
:host {
display: flex;
flex-direction: column;
max-inline-size: 20rem;
gap: 1rem;
}
Connected
Can be attached as host directive:
hostDirectives: [TuiConnected]Inside a block
<div tuiNotification>
Can be attached as host directive:
<code>hostDirectives: [TuiConnected]</code>
</div>
<div
appearance="floating"
tuiCardLarge
tuiConnected
>
<h3 tuiTitle="m">Inside a block</h3>
@for (item of items; track item) {
<button
tuiCell
type="button"
>
<div
appearance="accent"
[tuiAvatar]="item.icon"
></div>
<span tuiTitle>
{{ item.title }}
<span tuiSubtitle>{{ item.subtitle }}</span>
</span>
</button>
}
</div>
<div tuiConnected>
<label tuiCell>
<tui-badged-content>
<tui-icon
appearance="negative"
iconStart="@tui.arrow-down-left"
size="s"
tuiBadge
tuiSlot="top"
/>
<div tuiAvatar="@tui.phone"></div>
</tui-badged-content>
<div
tuiTitle
[style.color]="'var(--tui-text-negative)'"
>
Allow incoming
<div tuiSubtitle>Why would you?</div>
</div>
<input
tuiSwitch
type="checkbox"
[(ngModel)]="incoming"
/>
</label>
<label tuiCell>
<tui-badged-content tuiAccessories>
<tui-icon
appearance="positive"
iconStart="@tui.arrow-up-right"
size="s"
tuiBadge
tuiSlot="top"
/>
<div tuiAvatar="@tui.phone"></div>
</tui-badged-content>
<div tuiTitle>Allow outgoing unusual call that can change your life in an unusual way</div>
<div tuiAccessories>
<input
tuiSwitch
type="checkbox"
[(ngModel)]="outgoing"
/>
</div>
</label>
<label tuiCell>
<tui-badged-content>
<tui-icon
appearance="negative"
iconStart="@tui.arrow-down-left"
size="s"
tuiBadge
tuiSlot="top"
/>
<div tuiAvatar="@tui.phone"></div>
</tui-badged-content>
<div
tuiTitle
[style.color]="'var(--tui-text-negative)'"
>
Allow incoming
<div tuiSubtitle>Why would you?</div>
</div>
<input
tuiSwitch
type="checkbox"
[(ngModel)]="incoming"
/>
</label>
</div>
:host {
display: flex;
flex-direction: column;
max-inline-size: 20rem;
gap: 1rem;
}
Disabled state
<button
disabled
tuiCell
type="button"
>
<div tuiTitle>Disabled cell</div>
<tui-badge-notification size="l">1</tui-badge-notification>
<tui-icon
tuiTooltip="A cell can be a button"
(click.prevent)="(0)"
/>
<div tuiSubtitle>Hint enabled</div>
</button>
<label
tuiAppearance
tuiAppearanceState="disabled"
tuiCell
>
<div tuiTitle>
A disabled label
<div tuiSubtitle>Clicking it will not toggle checkbox</div>
</div>
<tui-loader />
<input
disabled
tuiCheckbox
type="checkbox"
[(ngModel)]="value"
/>
<tui-icon tuiTooltip="Hint enabled" />
</label>
<tui-loader class="cell">
<button
tuiCell
type="button"
>
<div tuiTitle>Disabled cell</div>
<div
tuiCellActions
tuiTheme="dark"
>
<button
appearance="primary-grayscale"
iconStart="@tui.phone"
tuiIconButton
type="button"
>
Call me
</button>
</div>
<div tuiTitle>
Hover over
<div tuiSubtitle>Put it before the right side</div>
</div>
</button>
</tui-loader>
:host {
display: flex;
flex-direction: column;
gap: 1rem;
}
.cell,
[tuiCell] {
inline-size: 100%;
max-inline-size: 25rem;
box-sizing: border-box;
}
Taiga UI