Question

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)

angularjavascriptreactvue

Default Note


Primary Note
Secondary Note
Danger Note
Light Note
Dark Note



  
    Note (End)
    On
  

  
    Off
    Note (Start)
  
</ion-list>

Default Note


Primary Note
Secondary Note
Danger Note
Light Note
Dark Note



  
    Note (End)
    On
  

  
    Off
    Note (Start)
  
</ion-list>

import React from 'react';

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

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

    {/*-- Note Colors --*/}
    Primary Note
    Secondary Note
    Danger Note
    Light Note
    Dark Note

    {/*-- Notes in a List --*/}
    
      
        Note (End)
        On
      

      
        Off
        Note (Start)
      
    
  
);

export default Example

  
  Default Note

  
  Primary Note
  Secondary Note
  Danger Note
  Light Note
  Dark Note

  
  
    
      Note (End)
      On
    

    
      Off
      Note (Start)
    
  
</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