LabelView
A view that labels items with an icon and a title.
ts
interface LabelViewSignature {
Attributes: {
font?: Font // Sets the default font for text in this view.
'system-image'?: string
title?: string
'line-limit'?: string
'truncation-mode'?: 'tail'
}
Slots: {
default: HTMLElement[] // Any children without a `slot` attribute are placed in the title block.
icon: HTMLElement[] // Use the `slot="icon"` attribute to place childen in the icon block.
}
CSSProperties: {
'--label-gap'?: length // The gap between the icon and the title.
'--label-image-size'?: number // The size of the icon.
'--label-padding-inline'?: length // The padding inline of the label.
}
}
class LabelView extends HTMLElement<LabelViewSignature> {}
declare global {
interface HTMLElementTagNameMap {
'label-view': LabelView // <label-view></label-view>
}
}Overview
One of the most familiar UI patterns is pairing an icon with a label.
View code
html
<label-view><span>Hello world!</span></label-view>html
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
<link rel="stylesheet" href="https://unpkg.com/@swiftwc/ui@dev/css" />
<script type="module" src="https://unpkg.com/@swiftwc/ui@dev/client"></script>
</head>
<body>
<v-keyboard system-font="Inter"></v-keyboard>
<navigation-stack>
<scroll-view>
<v-stack>
<label-view><span>Hello world!</span></label-view>
</v-stack>
</scroll-view>
</navigation-stack>
</body>
</html>Topics
Creating a label using a span element:
html
<label-view><span>Hello world!</span></label-view>Creating a label using the title attribute:
html
<label-view title="Hello world!"></label-view>Creating a label with an icon and a title using the system-image attribute:
html
<label-view system-image="hand-waving"><span>Hello world!</span></label-view>Creating a label with an icon and a title using the icon slot:
html
<label-view>
<i slot="icon" class="ph ph-duotone ph-hand-waving"></i>
<span>Hello world!</span>
</label-view>Relationships
Conforms To
HTMLElement