Taiga UI 5 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"
/>
<span
paymentSystem="mastercard"
size="s"
tuiThumbnailCard
>
1234
</span>
<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 sidesProportions are controlled with flex
You can control proportionsFlex is set to 70-30 by default
Alexander
Taiga UI developer
+$1000
Bonus for tuiCell component
Awesome!
Main account balance$123 456
USDThis subtitle has a lot of words in it
By default unless arrested
<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 tuiTitle>
<div tuiTitle>
<span tuiFade>Works with fade on both sides</span>
<span tuiFade>Proportions are controlled with flex</span>
</div>
<div tuiSubtitle>
<span tuiFade>You can control proportions</span>
<span tuiFade>Flex is set to 70-30 by default</span>
</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>
<div tuiTitle>
<b tuiFade>Main account balance</b>
<span tuiFade>$123 456</span>
</div>
<div tuiSubtitle>
<span tuiFade>USD</span>
<span tuiFade>This subtitle has a lot of words in it</span>
</div>
<div
appearance="neutral"
tuiBadge
>
By default unless arrested
</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
Multiple actions
With content on the right
Hover over
Put it before the right side
<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>
<div
tuiCell
type="button"
>
<div tuiTitle>
Multiple actions
<div tuiSubtitle>With 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>
</div>
: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">
<label
tuiAppearance
tuiAppearanceState="disabled"
tuiCell
>
<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>
</label>
</tui-loader>
:host {
display: flex;
flex-direction: column;
gap: 1rem;
}
.cell,
[tuiCell] {
inline-size: 100%;
max-inline-size: 25rem;
box-sizing: border-box;
}
Stretch
<button
tuiButton
type="button"
(click)="open = true"
>
Open Sheet Dialog
</button>
<ng-template
let-observer
[tuiSheetDialogOptions]="options"
[(tuiSheetDialog)]="open"
>
<nav>
<button
tuiCell="l"
tuiCellStretch
type="button"
>
<div
appearance="primary"
tuiAvatar="@tui.home"
></div>
<div tuiTitle>
Home
<div tuiSubtitle>Main page</div>
</div>
</button>
<button
tuiCell="l"
tuiCellStretch
type="button"
>
<div
appearance="accent"
tuiAvatar="@tui.user"
></div>
<div tuiTitle>
Profile
<div tuiSubtitle>Account settings</div>
</div>
</button>
<button
tuiCell="l"
tuiCellStretch
type="button"
>
<div
appearance="positive"
tuiAvatar="@tui.heart"
></div>
<div tuiTitle>
Favorites
<div tuiSubtitle>Saved items</div>
</div>
<tui-badge-notification>3</tui-badge-notification>
</button>
<button
tuiCell="l"
tuiCellStretch
type="button"
>
<div
appearance="warning"
tuiAvatar="@tui.star"
></div>
<div tuiTitle>
Premium
<div tuiSubtitle>Upgrade your plan</div>
</div>
</button>
</nav>
<footer>
<button
size="m"
tuiButton
type="button"
(click)="observer.complete()"
>
Close
</button>
</footer>
</ng-template>
Responsive
Open this example on the phone with OS font size increased by 150% to see cell rearrange for better readability.
Works with fade on both sidesProportions are controlled with flex
You can control proportionsFlex is set to 70-30 by default
Long title that's hard to read with long button
Button wraps to the next line
A cell without avatar
Button wraps to the next line
<div
tuiCell
tuiCellResponsive
>
<div tuiAvatar="@tui.star"></div>
<div tuiTitle>
<div tuiTitle>
<span tuiFade>Works with fade on both sides</span>
<span tuiFade>Proportions are controlled with flex</span>
</div>
<div tuiSubtitle>
<span tuiFade>You can control proportions</span>
<span tuiFade>Flex is set to 70-30 by default</span>
</div>
</div>
</div>
<div
tuiCell
tuiCellResponsive
>
<div tuiAvatar="@tui.star"></div>
<div tuiTitle>
Long title that's hard to read with long button
<div tuiSubtitle>Button wraps to the next line</div>
</div>
<div tuiAccessories>
<button
tuiButton
type="button"
>
Long button
</button>
</div>
</div>
<div
tuiCell
tuiCellResponsive
>
<div tuiTitle>
A cell without avatar
<div tuiSubtitle>Button wraps to the next line</div>
</div>
<div tuiAccessories>
<button
tuiButton
type="button"
>
Long button
</button>
</div>
</div>
<label
tuiCell
tuiCellResponsive
>
<span tuiAvatar="@tui.star"></span>
<span tuiTitle>
For small accessories
<span tuiSubtitle>Use grid-row: 1</span>
</span>
<span tuiAccessories>
<input
tuiSwitch
type="checkbox"
[(ngModel)]="value"
/>
</span>
</label>
:host {
display: flex;
flex-direction: column;
gap: 2rem;
}
[tuiCell] {
max-inline-size: 25rem;
&:last-child [tuiAccessories] {
grid-row: 1;
}
}