ion-note

概要(CONTENTS)

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

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

Notes are text elements generally used as subtitles that provide more information. Notes are styled to appear grey by default. Notes can be used in an item as metadata text.

ion-note 用法(Usage)


<ion-note>Default Noteion-note>


<ion-note color="primary">Primary Noteion-note>
<ion-note color="secondary">Secondary Noteion-note>
<ion-note color="danger">Danger Noteion-note>
<ion-note color="light">Light Noteion-note>
<ion-note color="dark">Dark Noteion-note>


<ion-list>
  <ion-item>
    <ion-label>Note (End)ion-label>
    <ion-note slot="end">Onion-note>
  ion-item>

  <ion-item>
    <ion-note slot="start">Offion-note>
    <ion-label>Note (Start)ion-label>
  ion-item>
ion-list>

<ion-note>Default Noteion-note>


<ion-note color="primary">Primary Noteion-note>
<ion-note color="secondary">Secondary Noteion-note>
<ion-note color="danger">Danger Noteion-note>
<ion-note color="light">Light Noteion-note>
<ion-note color="dark">Dark Noteion-note>


<ion-list>
  <ion-item>
    <ion-label>Note (End)ion-label>
    <ion-note slot="end">Onion-note>
  ion-item>

  <ion-item>
    <ion-note slot="start">Offion-note>
    <ion-label>Note (Start)ion-label>
  ion-item>
ion-list>
import React from 'react';

import { IonNote, IonList, IonItem, IonLabel } from '@ionic/react';

const Example: React.SFC<{}> = () => (
  <>
    {/*-- Default Note --*/}
    <IonNote>Default NoteIonNote>

    {/*-- Note Colors --*/}
    <IonNote color="primary">Primary NoteIonNote>
    <IonNote color="secondary">Secondary NoteIonNote>
    <IonNote color="danger">Danger NoteIonNote>
    <IonNote color="light">Light NoteIonNote>
    <IonNote color="dark">Dark NoteIonNote>

    {/*-- Notes in a List --*/}
    <IonList>
      <IonItem>
        <IonLabel>Note (End)IonLabel>
        <IonNote slot="end">OnIonNote>
      IonItem>

      <IonItem>
        <IonNote slot="start">OffIonNote>
        <IonLabel>Note (Start)IonLabel>
      IonItem>
    IonList>
  >
);

export default Example
<template>
  
  <ion-note>Default Noteion-note>

  
  <ion-note color="primary">Primary Noteion-note>
  <ion-note color="secondary">Secondary Noteion-note>
  <ion-note color="danger">Danger Noteion-note>
  <ion-note color="light">Light Noteion-note>
  <ion-note color="dark">Dark Noteion-note>

  
  <ion-list>
    <ion-item>
      <ion-label>Note (End)ion-label>
      <ion-note slot="end">Onion-note>
    ion-item>

    <ion-item>
      <ion-note slot="start">Offion-note>
      <ion-label>Note (Start)ion-label>
    ion-item>
  ion-list>
template>

ion-note 属性(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"

ion-note中的CSS 自定义属性

Name Description
--color Color of the note