mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00

Files

Brandy Carney e5c8c10029 fix(components): include mode classes on components for use in shadow (#17838 )

- removes mode-less component classes from the internal CSS, use element instead
- adds mode specific classes `md` or `ios` for styling inside of shadow components
- adds e2e test that verifies mode classes exist on all ionic components, plus checks for specific classes that the components need for internal styling

fixes #17608

2019-04-16 17:28:21 -04:00

test

test(rtl): add rtl script to all e2e tests (#17009 )

2019-01-08 15:06:23 -06:00

usage

docs(vue): add usage docs for all non-controller components (#17643 )

2019-02-28 22:01:07 -06:00

note.ios.scss

fix(note): do not overide --ion-color-base

2018-08-24 03:35:12 +02:00

note.ios.vars.scss

refactor(all): cleanup mode font

2018-08-24 03:33:44 +02:00

note.md.scss

fix(note): update note font size for MD (#16088 )

2018-10-25 14:38:14 -04:00

note.md.vars.scss

fix(item): update to match Material Design spec (#16182 )

2018-11-04 10:58:57 -05:00

note.scss

fix(item): update to match Material Design spec (#16182 )

2018-11-04 10:58:57 -05:00

note.tsx

fix(components): include mode classes on components for use in shadow (#17838 )

2019-04-16 17:28:21 -04:00

readme.md

docs(vue): add usage docs for all non-controller components (#17643 )

2019-02-28 22:01:07 -06:00

readme.md

ion-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.

Usage

Angular / javascript

<!-- 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>

React

import React from 'react';

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

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

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

    {/*-- 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>
  </>
);

export default Example


### Vue

```html
<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>

Properties

Property	Attribute	Description	Type	Default
`color`	`color`	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.	`string \| undefined`	`undefined`
`mode`	`mode`	The mode determines which platform styles to use.	`"ios" \| "md"`	`undefined`

CSS Custom Properties

Name	Description
`--color`	Color of the note

Built with StencilJS