ion-note
通常Noteは詳細な情報を提供するサブタイトルとして使われます。デフォルトでは灰色に見えるようスタイリングされています。またNoteはitem内ではメタデータとして使用できます。
利用方法
<!-- Default Note -->
<ion-note>Default Note</ion-note>
<!-- Note Colors -->
<ion-note color="primary">Primary Note</ion-note>
<ion-note color="secondary">Secondary Note</ion-note>
<ion-note color="danger">Danger Note</ion-note>
<ion-note color="light">Light Note</ion-note>
<ion-note color="dark">Dark Note</ion-note>
<!-- Notes in a List -->
<ion-list>
<ion-item>
<ion-label>Note (End)</ion-label>
<ion-note slot="end">On</ion-note>
</ion-item>
<ion-item>
<ion-note slot="start">Off</ion-note>
<ion-label>Note (Start)</ion-label>
</ion-item>
</ion-list>
CopyCopied
<!-- Default Note -->
<ion-note>Default Note</ion-note>
<!-- Note Colors -->
<ion-note color="primary">Primary Note</ion-note>
<ion-note color="secondary">Secondary Note</ion-note>
<ion-note color="danger">Danger Note</ion-note>
<ion-note color="light">Light Note</ion-note>
<ion-note color="dark">Dark Note</ion-note>
<!-- Notes in a List -->
<ion-list>
<ion-item>
<ion-label>Note (End)</ion-label>
<ion-note slot="end">On</ion-note>
</ion-item>
<ion-item>
<ion-note slot="start">Off</ion-note>
<ion-label>Note (Start)</ion-label>
</ion-item>
</ion-list>
CopyCopied
import React from 'react';
import { IonNote, IonList, IonItem, IonLabel, IonContent } from '@ionic/react';
export const NoteExample: React.FC = () => (
<IonContent>
{/*-- Default Note --*/}
<IonNote>Default Note</IonNote><br />
{/*-- Note Colors --*/}
<IonNote color="primary">Primary Note</IonNote><br />
<IonNote color="secondary">Secondary Note</IonNote><br />
<IonNote color="danger">Danger Note</IonNote><br />
<IonNote color="light">Light Note</IonNote><br />
<IonNote color="dark">Dark Note</IonNote><br />
{/*-- Notes in a List --*/}
<IonList>
<IonItem>
<IonLabel>Note (End)</IonLabel>
<IonNote slot="end">On</IonNote>
</IonItem>
<IonItem>
<IonNote slot="start">Off</IonNote>
<IonLabel>Note (Start)</IonLabel>
</IonItem>
</IonList>
</IonContent>
);
CopyCopied
import { Component, h } from '@stencil/core';
@Component({
tag: 'note-example',
styleUrl: 'note-example.css'
})
export class NoteExample {
render() {
return [
// Default Note
<ion-note>Default Note</ion-note>,
// Note Colors
<ion-note color="primary">Primary Note</ion-note>,
<ion-note color="secondary">Secondary Note</ion-note>,
<ion-note color="danger">Danger Note</ion-note>,
<ion-note color="light">Light Note</ion-note>,
<ion-note color="dark">Dark Note</ion-note>,
// Notes in a List
<ion-list>
<ion-item>
<ion-label>Note (End)</ion-label>
<ion-note slot="end">On</ion-note>
</ion-item>
<ion-item>
<ion-note slot="start">Off</ion-note>
<ion-label>Note (Start)</ion-label>
</ion-item>
</ion-list>
];
}
}
CopyCopied
<template>
<!-- Default Note -->
<ion-note>Default Note</ion-note>
<!-- Note Colors -->
<ion-note color="primary">Primary Note</ion-note>
<ion-note color="secondary">Secondary Note</ion-note>
<ion-note color="danger">Danger Note</ion-note>
<ion-note color="light">Light Note</ion-note>
<ion-note color="dark">Dark Note</ion-note>
<!-- Notes in a List -->
<ion-list>
<ion-item>
<ion-label>Note (End)</ion-label>
<ion-note slot="end">On</ion-note>
</ion-item>
<ion-item>
<ion-note slot="start">Off</ion-note>
<ion-label>Note (Start)</ion-label>
</ion-item>
</ion-list>
</template>
<script>
import { IonItem, IonLabel, IonList, IonNote } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonItem, IonLabel, IonList, IonNote }
});
</script>
CopyCopied
プロパティ
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" |
CSSカスタムプロパティ
Name | Description |
---|---|
--color | Color of the note |