Flutter教程

ion-label

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4列表项组件ion-label对项目进行布局。

ion-label官方文档地址:https://ionicframework.com/docs/api/label

Label 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: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.

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