diff --git a/docs/api/label.md b/docs/api/label.md index 20c2525fe8..f5c5b807c4 100644 --- a/docs/api/label.md +++ b/docs/api/label.md @@ -1,10 +1,6 @@ --- title: "ion-label" -hide_table_of_contents: true --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - import Props from '@site/static/auto-generated/label/props.md'; import Events from '@site/static/auto-generated/label/events.md'; import Methods from '@site/static/auto-generated/label/methods.md'; @@ -18,376 +14,38 @@ import Slots from '@site/static/auto-generated/label/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; -import APITOCInline from '@components/page/api/APITOCInline'; -

Contents

- - - - - 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. +## Basic Usage +import Basic from '@site/static/usage/label/basic/index.md'; -## Usage - - - - - -```html - -Label - - -Primary Label -Secondary Label -Danger Label -Light Label -Dark Label - - - - Default Item - - - - - Multi-line text that should wrap when it is too long - to fit on one line in the item. - - - - - - Default Input - - - - - Fixed - - - - - Floating - - - - - Stacked - - - - - Toggle - - - - - - Checkbox - -``` - - - - - - - -```html - -Label - - -Primary Label -Secondary Label -Danger Label -Light Label -Dark Label - - - - Default Item - - - - - Multi-line text that should wrap when it is too long - to fit on one line in the item. - - - - - - Default Input - - - - - Fixed - - - - - Floating - - - - - Stacked - - - - - Toggle - - - - - - Checkbox - -``` - - - - - - - -```tsx -import React from 'react'; -import { IonLabel, IonItem, IonInput, IonToggle, IonCheckbox, IonContent } from '@ionic/react'; - -export const LabelExample: React.FC = () => ( - - {/*-- Default Label --*/} - Label
- - {/*-- Label Colors --*/} - Primary Label
- Secondary Label
- Danger Label
- Light Label
- Dark Label
- - {/*-- Item Labels --*/} - - Default Item - - - - - Multi-line text that should wrap when it is too long - to fit on one line in the item. - - - - {/*-- Input Labels --*/} - - Default Input - - - - - Fixed - - - - - Floating - - - - - Stacked - - - - - Toggle - - - - - - Checkbox - - -); -``` - - - - - - - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'label-example', - styleUrl: 'label-example.css' -}) -export class LabelExample { - render() { - return [ - // Default Label - Label, - - // Label Colors - Primary Label, - Secondary Label, - Danger Label, - Light Label, - Dark Label, - - // Item Labels - - Default Item - , - - - - Multi-line text that should wrap when it is too long - to fit on one line in the item. - - , - - // Input Labels - - Default Input - - , - - - Fixed - - , - - - Floating - - , - - - Stacked - - , - - - Toggle - - , - - - - Checkbox - - ]; - } -} -``` - - - - - - - -```html - + - -``` +### Colors +import Colors from '@site/static/usage/label/theming/colors/index.md'; - + - ## Properties @@ -405,4 +63,4 @@ export default defineComponent({ ## Slots - \ No newline at end of file + diff --git a/static/usage/label/basic/angular.md b/static/usage/label/basic/angular.md new file mode 100644 index 0000000000..c3125f70b5 --- /dev/null +++ b/static/usage/label/basic/angular.md @@ -0,0 +1,3 @@ +```html +Label +``` diff --git a/static/usage/label/basic/demo.html b/static/usage/label/basic/demo.html new file mode 100644 index 0000000000..2854a18385 --- /dev/null +++ b/static/usage/label/basic/demo.html @@ -0,0 +1,24 @@ + + + + + + + Label + + + + + + + + + +
+ Label +
+ + + + + diff --git a/static/usage/label/basic/index.md b/static/usage/label/basic/index.md new file mode 100644 index 0000000000..f2609779a4 --- /dev/null +++ b/static/usage/label/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/label/basic/javascript.md b/static/usage/label/basic/javascript.md new file mode 100644 index 0000000000..c3125f70b5 --- /dev/null +++ b/static/usage/label/basic/javascript.md @@ -0,0 +1,3 @@ +```html +Label +``` diff --git a/static/usage/label/basic/react.md b/static/usage/label/basic/react.md new file mode 100644 index 0000000000..8eb985452c --- /dev/null +++ b/static/usage/label/basic/react.md @@ -0,0 +1,13 @@ +```tsx +import React from 'react'; +import { IonLabel } from '@ionic/react'; + +function Example() { + return ( + <> + Label + + ); +} +export default Example; +``` diff --git a/static/usage/label/basic/vue.md b/static/usage/label/basic/vue.md new file mode 100644 index 0000000000..87f46b6811 --- /dev/null +++ b/static/usage/label/basic/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/label/input/angular.md b/static/usage/label/input/angular.md new file mode 100644 index 0000000000..75278afd44 --- /dev/null +++ b/static/usage/label/input/angular.md @@ -0,0 +1,31 @@ +```html + + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + +``` diff --git a/static/usage/label/input/demo.html b/static/usage/label/input/demo.html new file mode 100644 index 0000000000..6aa8cc6288 --- /dev/null +++ b/static/usage/label/input/demo.html @@ -0,0 +1,59 @@ + + + + + + + Label + + + + + + + + + + + + +
+ + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + +
+ + + + + diff --git a/static/usage/label/input/index.md b/static/usage/label/input/index.md new file mode 100644 index 0000000000..ff69eb5521 --- /dev/null +++ b/static/usage/label/input/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/label/input/javascript.md b/static/usage/label/input/javascript.md new file mode 100644 index 0000000000..75278afd44 --- /dev/null +++ b/static/usage/label/input/javascript.md @@ -0,0 +1,31 @@ +```html + + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + +``` diff --git a/static/usage/label/input/react.md b/static/usage/label/input/react.md new file mode 100644 index 0000000000..ff11fd1f17 --- /dev/null +++ b/static/usage/label/input/react.md @@ -0,0 +1,41 @@ +```tsx +import React from 'react'; +import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/react'; + +function Example() { + return ( + <> + + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + + + ); +} +export default Example; +``` diff --git a/static/usage/label/input/vue.md b/static/usage/label/input/vue.md new file mode 100644 index 0000000000..cd05ef82b4 --- /dev/null +++ b/static/usage/label/input/vue.md @@ -0,0 +1,42 @@ +```html + + + +``` diff --git a/static/usage/label/item/angular.md b/static/usage/label/item/angular.md new file mode 100644 index 0000000000..be252b899a --- /dev/null +++ b/static/usage/label/item/angular.md @@ -0,0 +1,28 @@ +```html + + Default Label + + + + + Multi-line text that should ellipsis when it is too long + to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + + Multi-line text that should wrap when it is too long + to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + +

Heading

+

Paragraph

+ + +``` diff --git a/static/usage/label/item/demo.html b/static/usage/label/item/demo.html new file mode 100644 index 0000000000..1fe2c7978c --- /dev/null +++ b/static/usage/label/item/demo.html @@ -0,0 +1,56 @@ + + + + + + + Label + + + + + + + + + + + + +
+ + Default Label + + + + + Multi-line text that should ellipsis when it is too long + to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + + Multi-line text that should wrap when it is too long + to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + +

Heading

+

Paragraph

+ + +
+ + + + + diff --git a/static/usage/label/item/index.md b/static/usage/label/item/index.md new file mode 100644 index 0000000000..99035942d7 --- /dev/null +++ b/static/usage/label/item/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/label/item/javascript.md b/static/usage/label/item/javascript.md new file mode 100644 index 0000000000..be252b899a --- /dev/null +++ b/static/usage/label/item/javascript.md @@ -0,0 +1,28 @@ +```html + + Default Label + + + + + Multi-line text that should ellipsis when it is too long + to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + + Multi-line text that should wrap when it is too long + to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + +

Heading

+

Paragraph

+ + +``` diff --git a/static/usage/label/item/react.md b/static/usage/label/item/react.md new file mode 100644 index 0000000000..88e4f904de --- /dev/null +++ b/static/usage/label/item/react.md @@ -0,0 +1,38 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel } from '@ionic/react'; + +function Example() { + return ( + <> + + Default Label + + + + + Multi-line text that should ellipsis when it is too long + to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + + Multi-line text that should wrap when it is too long + to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + +

Heading

+

Paragraph

+ + + + ); +} +export default Example; +``` diff --git a/static/usage/label/item/vue.md b/static/usage/label/item/vue.md new file mode 100644 index 0000000000..99ec3ea3d4 --- /dev/null +++ b/static/usage/label/item/vue.md @@ -0,0 +1,39 @@ +```html + + + +``` diff --git a/static/usage/label/theming/colors/angular.md b/static/usage/label/theming/colors/angular.md new file mode 100644 index 0000000000..1fbebb1988 --- /dev/null +++ b/static/usage/label/theming/colors/angular.md @@ -0,0 +1,12 @@ +```html +Default +Primary +Secondary +Tertiary +Success +Warning +Danger +Light +Medium +Dark +``` diff --git a/static/usage/label/theming/colors/demo.html b/static/usage/label/theming/colors/demo.html new file mode 100644 index 0000000000..f59d500d88 --- /dev/null +++ b/static/usage/label/theming/colors/demo.html @@ -0,0 +1,39 @@ + + + + + + + Label + + + + + + + + + + + +
+ Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark +
+ + + + + diff --git a/static/usage/label/theming/colors/index.md b/static/usage/label/theming/colors/index.md new file mode 100644 index 0000000000..16ab86412d --- /dev/null +++ b/static/usage/label/theming/colors/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/label/theming/colors/javascript.md b/static/usage/label/theming/colors/javascript.md new file mode 100644 index 0000000000..1fbebb1988 --- /dev/null +++ b/static/usage/label/theming/colors/javascript.md @@ -0,0 +1,12 @@ +```html +Default +Primary +Secondary +Tertiary +Success +Warning +Danger +Light +Medium +Dark +``` diff --git a/static/usage/label/theming/colors/react.md b/static/usage/label/theming/colors/react.md new file mode 100644 index 0000000000..6680a644fb --- /dev/null +++ b/static/usage/label/theming/colors/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonLabel } from '@ionic/react'; + +function Example() { + return ( + <> + Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark + + ); +} +export default Example; +``` diff --git a/static/usage/label/theming/colors/vue.md b/static/usage/label/theming/colors/vue.md new file mode 100644 index 0000000000..da18a00d4d --- /dev/null +++ b/static/usage/label/theming/colors/vue.md @@ -0,0 +1,23 @@ +```html + + + +```