javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 11:17:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(label): add usage examples and update readme

Browse Source
This commit is contained in:
Brandy Carney
2018-07-09 18:24:26 -04:00
parent 78b0bd6ffb
commit 3e285c50ac
4 changed files with 108 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
core/src/components/label/label.tsx
View File

@ -1,12 +1,4 @@
import { import { Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
Component,
Element,
Event,
EventEmitter,
Method,
Prop,
Watch
} from '@stencil/core';
import { Color, Mode, StyleEvent } from '../../interface'; import { Color, Mode, StyleEvent } from '../../interface';
import { createColorClasses } from '../../utils/theme'; import { createColorClasses } from '../../utils/theme';

3
core/src/components/label/readme.md
View File

@ -1,7 +1,6 @@
# ion-label # ion-label
Label is a wrapper element that can be used in combination with `ion-item` and `ion-input`. Label is a wrapper element that can be used in combination with `ion-item`, `ion-input`, `ion-toggle`, and more. The position of the label inside of an item can be inline, fixed, stacked, or floating.
The position of the label can be controlled to be either stacked, inline, or floating.
<!-- Auto Generated Below --> <!-- Auto Generated Below -->

54
core/src/components/label/usage/angular.md Normal file
View File

@ -0,0 +1,54 @@
```html
<!-- Default Label -->
<ion-label>Label</ion-label>
<!-- Label Colors -->
<ion-label color="primary">Primary Label</ion-label>
<ion-label color="secondary">Secondary Label</ion-label>
<ion-label color="danger">Danger Label</ion-label>
<ion-label color="light">Light Label</ion-label>
<ion-label color="dark">Dark Label</ion-label>
<!-- Item Labels -->
<ion-item>
<ion-label>Default Item</ion-label>
</ion-item>
<ion-item text-wrap>
<ion-label>
Multi-line text that should wrap when it is too long
to fit on one line in the item.
</ion-label>
</ion-item>
<!-- Input Labels -->
<ion-item>
<ion-label>Default Input</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="fixed">Fixed</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Floating</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Stacked</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label>Toggle</ion-label>
<ion-toggle slot="end" checked></ion-toggle>
</ion-item>
<ion-item>
<ion-checkbox slot="start" checked></ion-checkbox>
<ion-label>Checkbox</ion-label>
</ion-item>
```

74
core/src/components/label/usage/javascript.md
View File

@ -1,24 +1,54 @@
```html ```html
<ion-list> <!-- Default Label -->
<ion-item> <ion-label>Label</ion-label>
<ion-label>Default</ion-label>
<ion-input></ion-input> <!-- Label Colors -->
</ion-item> <ion-label color="primary">Primary Label</ion-label>
<ion-item> <ion-label color="secondary">Secondary Label</ion-label>
<ion-label text-wrap>Wrap label this label just goes on and on and on</ion-label> <ion-label color="danger">Danger Label</ion-label>
<ion-input></ion-input> <ion-label color="light">Light Label</ion-label>
</ion-item> <ion-label color="dark">Dark Label</ion-label>
<ion-item>
<ion-label position="fixed">Fixed</ion-label> <!-- Item Labels -->
<ion-input></ion-input> <ion-item>
</ion-item> <ion-label>Default Item</ion-label>
<ion-item> </ion-item>
<ion-label position="floating">Floating</ion-label>
<ion-input></ion-input> <ion-item text-wrap>
</ion-item> <ion-label>
<ion-item> Multi-line text that should wrap when it is too long
<ion-label position="stacked">Stacked</ion-label> to fit on one line in the item.
<ion-input></ion-input> </ion-label>
</ion-item> </ion-item>
</ion-list>
<!-- Input Labels -->
<ion-item>
<ion-label>Default Input</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="fixed">Fixed</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Floating</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Stacked</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label>Toggle</ion-label>
<ion-toggle slot="end" checked></ion-toggle>
</ion-item>
<ion-item>
<ion-checkbox slot="start" checked></ion-checkbox>
<ion-label>Checkbox</ion-label>
</ion-item>
``` ```