ion-label
Ionic4项目中我们可以使用Ionic4列表项组件ion-label对项目进行布局。 ion-label官方文档地址:https://ionicframework.com/docs/api/labelLabel is a wrapper element that can be used in combination with ion-item
, ion-input
, ion-toggle
, and more. The position of the label inside of an item can be inline, fixed, stacked, or floating.
ion-label 用法(Usage)
<ion-label>Labelion-label>
<ion-label color="primary">Primary Labelion-label>
<ion-label color="secondary">Secondary Labelion-label>
<ion-label color="danger">Danger Labelion-label>
<ion-label color="light">Light Labelion-label>
<ion-label color="dark">Dark Labelion-label>
<ion-item>
<ion-label>Default Itemion-label>
ion-item>
<ion-item>
<ion-label 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>
<ion-item>
<ion-label>Default Inpution-label>
<ion-input>ion-input>
ion-item>
<ion-item>
<ion-label position="fixed">Fixedion-label>
<ion-input>ion-input>
ion-item>
<ion-item>
<ion-label position="floating">Floatingion-label>
<ion-input>ion-input>
ion-item>
<ion-item>
<ion-label position="stacked">Stackedion-label>
<ion-input>ion-input>
ion-item>
<ion-item>
<ion-label>Toggleion-label>
<ion-toggle slot="end" checked>ion-toggle>
ion-item>
<ion-item>
<ion-checkbox slot="start" checked>ion-checkbox>
<ion-label>Checkboxion-label>
ion-item>
<ion-label>Labelion-label>
<ion-label color="primary">Primary Labelion-label>
<ion-label color="secondary">Secondary Labelion-label>
<ion-label color="danger">Danger Labelion-label>
<ion-label color="light">Light Labelion-label>
<ion-label color="dark">Dark Labelion-label>
<ion-item>
<ion-label>Default Itemion-label>
ion-item>
<ion-item>
<ion-label 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>
<ion-item>
<ion-label>Default Inpution-label>
<ion-input>ion-input>
ion-item>
<ion-item>
<ion-label position="fixed">Fixedion-label>
<ion-input>ion-input>
ion-item>
<ion-item>
<ion-label position="floating">Floatingion-label>
<ion-input>ion-input>
ion-item>
<ion-item>
<ion-label position="stacked">Stackedion-label>
<ion-input>ion-input>
ion-item>
<ion-item>
<ion-label>Toggleion-label>
<ion-toggle slot="end" checked>ion-toggle>
ion-item>
<ion-item>
<ion-checkbox slot="start" checked>ion-checkbox>
<ion-label>Checkboxion-label>
ion-item>
import React from 'react';
import { IonLabel, IonItem, IonInput, IonToggle, IonCheckbox } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
{/*-- Default Label --*/}
<IonLabel>LabelIonLabel>
{/*-- Label Colors --*/}
<IonLabel color="primary">Primary LabelIonLabel>
<IonLabel color="secondary">Secondary LabelIonLabel>
<IonLabel color="danger">Danger LabelIonLabel>
<IonLabel color="light">Light LabelIonLabel>
<IonLabel color="dark">Dark LabelIonLabel>
{/*-- Item Labels --*/}
<IonItem>
<IonLabel>Default ItemIonLabel>
IonItem>
<IonItem>
<IonLabel text-wrap>
Multi-line text that should wrap when it is too long
to fit on one line in the item.
IonLabel>
IonItem>
{/*-- Input Labels --*/}
<IonItem>
<IonLabel>Default InputIonLabel>
<IonInput>IonInput>
IonItem>
<IonItem>
<IonLabel position="fixed">FixedIonLabel>
<IonInput>IonInput>
IonItem>
<IonItem>
<IonLabel position="floating">FloatingIonLabel>
<IonInput>IonInput>
IonItem>
<IonItem>
<IonLabel position="stacked">StackedIonLabel>
<IonInput>IonInput>
IonItem>
<IonItem>
<IonLabel>ToggleIonLabel>
<IonToggle slot="end" checked>IonToggle>
IonItem>
<IonItem>
<IonCheckbox slot="start" checked />
<IonLabel>CheckboxIonLabel>
IonItem>
>
);
export default Example;
<template>
<ion-label>Labelion-label>
<ion-label color="primary">Primary Labelion-label>
<ion-label color="secondary">Secondary Labelion-label>
<ion-label color="danger">Danger Labelion-label>
<ion-label color="light">Light Labelion-label>
<ion-label color="dark">Dark Labelion-label>
<ion-item>
<ion-label>Default Itemion-label>
ion-item>
<ion-item>
<ion-label 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>
<ion-item>
<ion-label>Default Inpution-label>
<ion-input>ion-input>
ion-item>
<ion-item>
<ion-label position="fixed">Fixedion-label>
<ion-input>ion-input>
ion-item>
<ion-item>
<ion-label position="floating">Floatingion-label>
<ion-input>ion-input>
ion-item>
<ion-item>
<ion-label position="stacked">Stackedion-label>
<ion-input>ion-input>
ion-item>
<ion-item>
<ion-label>Toggleion-label>
<ion-toggle slot="end" checked>ion-toggle>
ion-item>
<ion-item>
<ion-checkbox slot="start" checked>ion-checkbox>
<ion-label>Checkboxion-label>
ion-item>
template>
ion-label 属性(Properties)
color | |
---|---|
Description | The color to use from your application's color palette.
Default options are: |
Attribute | color |
Type | string | undefined |
mode | |
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
position | |
Description | The position determines where and how the label behaves inside an item. |
Attribute | position |
Type | "fixed" | "floating" | "stacked" | undefined |
ion-label中的CSS 自定义属性
Name | Description |
---|---|
--color | Color of the label |