Skip to content

docs(label): add label component playgrounds #2534

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 6, 2022
Merged

docs(label): add label component playgrounds #2534

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f4bd7e1
docs(label):add label component playgrounds
brandyscarney Sep 6, 2022
3262c01
fix(label): adjust playground size to medium
brandyscarney Sep 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
370 changes: 14 additions & 356 deletions docs/api/label.md
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions static/usage/label/basic/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```html
<ion-label>Label</ion-label>
```
24 changes: 24 additions & 0 deletions static/usage/label/basic/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Label</title>
<link rel="stylesheet" href="../../common.css" />
<script src="../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
</head>

<body>
<ion-app>
<ion-content>
<div class="container">
<ion-label>Label</ion-label>
</div>
</ion-content>
</ion-app>
</body>

</html>
8 changes: 8 additions & 0 deletions static/usage/label/basic/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

<Playground code={{ javascript, react, vue, angular }} src="usage/label/basic/demo.html" />
3 changes: 3 additions & 0 deletions static/usage/label/basic/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```html
<ion-label>Label</ion-label>
```
13 changes: 13 additions & 0 deletions static/usage/label/basic/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
```tsx
import React from 'react';
import { IonLabel } from '@ionic/react';

function Example() {
return (
<>
<IonLabel>Label</IonLabel>
</>
);
}
export default Example;
```
14 changes: 14 additions & 0 deletions static/usage/label/basic/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
```html
<template>
<ion-label>Label</ion-label>
</template>

<script lang="ts">
import { IonLabel } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonLabel },
});
</script>
```
31 changes: 31 additions & 0 deletions static/usage/label/input/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
```html
<ion-item>
<ion-label>Default Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label position="fixed">Fixed Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label position="floating">Floating Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label position="stacked">Stacked Label</ion-label>
<ion-input placeholder="Enter text"></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>
```
59 changes: 59 additions & 0 deletions static/usage/label/input/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Label</title>
<link rel="stylesheet" href="../../common.css" />
<script src="../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />

<style>
.container {
display: block;
}
</style>
</head>
</head>

<body>
<ion-app>
<ion-content>
<div class="container">
<ion-item>
<ion-label>Default Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label position="fixed">Fixed Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label position="floating">Floating Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label position="stacked">Stacked Label</ion-label>
<ion-input placeholder="Enter text"></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>
</div>
</ion-content>
</ion-app>
</body>

</html>
8 changes: 8 additions & 0 deletions static/usage/label/input/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

<Playground code={{ javascript, react, vue, angular }} src="usage/label/input/demo.html" size="medium" />
31 changes: 31 additions & 0 deletions static/usage/label/input/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
```html
<ion-item>
<ion-label>Default Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label position="fixed">Fixed Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label position="floating">Floating Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label position="stacked">Stacked Label</ion-label>
<ion-input placeholder="Enter text"></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>
```
41 changes: 41 additions & 0 deletions static/usage/label/input/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
```tsx
import React from 'react';
import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/react';

function Example() {
return (
<>
<IonItem>
<IonLabel>Default Label</IonLabel>
<IonInput placeholder="Enter text"></IonInput>
</IonItem>

<IonItem>
<IonLabel position="fixed">Fixed Label</IonLabel>
<IonInput placeholder="Enter text"></IonInput>
</IonItem>

<IonItem>
<IonLabel position="floating">Floating Label</IonLabel>
<IonInput placeholder="Enter text"></IonInput>
</IonItem>

<IonItem>
<IonLabel position="stacked">Stacked Label</IonLabel>
<IonInput placeholder="Enter text"></IonInput>
</IonItem>

<IonItem>
<IonLabel>Toggle</IonLabel>
<IonToggle slot="end" checked></IonToggle>
</IonItem>

<IonItem>
<IonCheckbox slot="start" checked></IonCheckbox>
<IonLabel>Checkbox</IonLabel>
</IonItem>
</>
);
}
export default Example;
```
42 changes: 42 additions & 0 deletions static/usage/label/input/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
```html
<template>
<ion-item>
<ion-label>Default Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label position="fixed">Fixed Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label position="floating">Floating Label</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
<ion-label position="stacked">Stacked Label</ion-label>
<ion-input placeholder="Enter text"></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>
</template>

<script lang="ts">
import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle },
});
</script>
```
28 changes: 28 additions & 0 deletions static/usage/label/item/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
```html
<ion-item>
<ion-label>Default Label</ion-label>
</ion-item>

<ion-item>
<ion-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.
</ion-label>
</ion-item>

<ion-item>
<ion-label class="ion-text-wrap">
Multi-line text that should wrap when it is too long
to fit on one line. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</ion-label>
</ion-item>

<ion-item>
<ion-label>
<h1>Heading</h1>
<p>Paragraph</p>
</ion-label>
</ion-item>
```
56 changes: 56 additions & 0 deletions static/usage/label/item/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Label</title>
<link rel="stylesheet" href="../../common.css" />
<script src="../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />

<style>
.container {
display: block;
}
</style>
</head>
</head>

<body>
<ion-app>
<ion-content>
<div class="container">
<ion-item>
<ion-label>Default Label</ion-label>
</ion-item>

<ion-item>
<ion-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.
</ion-label>
</ion-item>

<ion-item>
<ion-label class="ion-text-wrap">
Multi-line text that should wrap when it is too long
to fit on one line. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
</ion-label>
</ion-item>

<ion-item>
<ion-label>
<h1>Heading</h1>
<p>Paragraph</p>
</ion-label>
</ion-item>
</div>
</ion-content>
</ion-app>
</body>

</html>
8 changes: 8 additions & 0 deletions static/usage/label/item/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

<Playground code={{ javascript, react, vue, angular }} src="usage/label/item/demo.html" size="medium" />
Loading