docs(): update examples

This commit is contained in:
mhartington
2018-06-14 11:46:38 -04:00
parent ad3538d089
commit 04e807f459
29 changed files with 746 additions and 400 deletions

View File

@ -1,7 +1,6 @@
import { Component, Prop } from '@stencil/core';
import { Color, Mode } from '../../interface';
@Component({
tag: 'ion-note',
styleUrls: {
@ -13,19 +12,15 @@ import { Color, Mode } from '../../interface';
}
})
export class Note {
/**
* The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@Prop() mode!: Mode;
}

View File

@ -2,31 +2,6 @@
Notes are text elements generally used as subtitles that provide more information. Notes are styled to appear grey by default.
```html
<!-- 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>
```
<!-- Auto Generated Below -->

View File

@ -0,0 +1,24 @@
```html
<!-- 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>
```