メインコンテンツまでスキップ
Version: v6

ion-label

scoped

コンテンツ

Labelは ion-itemion-inpution-toggle 等と共に使用できるラッパー(wrapper)要素です。item内のlabelの位置はinline、fixed、stacked、またはfloatingにすることができます。

使い方

<!-- Default Label -->
<ion-label>Label</ion-label>

<!-- Label Colors -->
<ion-label color="primary">Primary Label</ion-label>
<ion-label color="secondary">Secondary Label</ion-label>
<ion-label color="danger">Danger Label</ion-label>
<ion-label color="light">Light Label</ion-label>
<ion-label color="dark">Dark Label</ion-label>

<!-- Item Labels -->
<ion-item>
<ion-label>Default Item</ion-label>
</ion-item>

<ion-item>
<ion-label class="ion-text-wrap">
Multi-line text that should wrap when it is too long
to fit on one line in the item.
</ion-label>
</ion-item>

<!-- Input Labels -->
<ion-item>
<ion-label>Default Input</ion-label>
<ion-input></ion-input>
</ion-item>

<ion-item>
<ion-label position="fixed">Fixed</ion-label>
<ion-input></ion-input>
</ion-item>

<ion-item>
<ion-label position="floating">Floating</ion-label>
<ion-input></ion-input>
</ion-item>

<ion-item>
<ion-label position="stacked">Stacked</ion-label>
<ion-input></ion-input>
</ion-item>

<ion-item>
<ion-label>Toggle</ion-label>
<ion-toggle slot="end" checked></ion-toggle>
</ion-item>

<ion-item>
<ion-checkbox slot="start" checked></ion-checkbox>
<ion-label>Checkbox</ion-label>
</ion-item>

プロパティ

color

DescriptionThe color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

position

DescriptionThe position determines where and how the label behaves inside an item.
Attributeposition
Type"fixed" | "floating" | "stacked" | undefined
Defaultundefined

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

NameDescription
--colorColor of the label

Slots

No slots available for this component.