Entity title
@xui/entity-titleThe name of a thing, with its supporting detail.
Install
pnpm add @xui/entity-title Add the barrel to a standalone component's imports:
import { XuiEntityTitleImports } from '@xui/entity-title';
@Component({
imports: [XuiEntityTitleImports],
// …
})Examples
Default
Loading preview…
<xui-entity-title title="Quarterly report" subtitle="Updated 2 hours ago" [ellipsize]="false" [loading]="false" [fill]="false">
<ng-icon visual xui size="md" name="matDescriptionRound" />
<span tags><xui-tag>Draft</xui-tag></span>
</xui-entity-title>Title only
Loading preview…
<xui-entity-title [title]="title" />Loading
Loading preview…
<xui-entity-title title="Quarterly report" subtitle="Updated 2 hours ago" [ellipsize]="false" [loading]="true" [fill]="false">
<ng-icon visual xui size="md" name="matDescriptionRound" />
<span tags><xui-tag>Draft</xui-tag></span>
</xui-entity-title>Ellipsized
Loading preview…
<div class="border-border w-64 rounded border p-2"><xui-entity-title title="A considerably longer entity name than the row can fit" subtitle="Updated 2 hours ago" [ellipsize]="true" [loading]="false" [fill]="false" /></div>API
The name of a thing, with its supporting detail.
Inputs
classClassValueThe user-defined classes. Merged last so they win over the base classes.''titlestringThe entity's name — the primary line.subtitlestring | nullA secondary line under the title, e.g. an identifier or a status.nullellipsizebooleanTruncate the title and subtitle rather than wrapping.falsefillbooleanExpand to fill the container, so a right-aligned sibling is pushed out.falseloadingbooleanMask the text in place while the entity is loading.false