Skip to content

Commit c4c9287

Browse files
brandyscarneybrandyscarney
authored
docs(label): add label component playgrounds (#2534)
1 parent fbaa944 commit c4c9287

25 files changed

+604
-356
lines changed

‎docs/api/label.md

Lines changed: 14 additions & 356 deletions
Large diffs are not rendered by default.

‎static/usage/label/basic/angular.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```html
2+
<ion-label>Label</ion-label>
3+
```

‎static/usage/label/basic/demo.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Label</title>
8+
<link rel="stylesheet" href="../../common.css" />
9+
<script src="../../common.js"></script>
10+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
12+
</head>
13+
14+
<body>
15+
<ion-app>
16+
<ion-content>
17+
<div class="container">
18+
<ion-label>Label</ion-label>
19+
</div>
20+
</ion-content>
21+
</ion-app>
22+
</body>
23+
24+
</html>

‎static/usage/label/basic/index.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
import angular from './angular.md';
7+
8+
<Playground code={{ javascript, react, vue, angular }} src="usage/label/basic/demo.html" />

‎static/usage/label/basic/javascript.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```html
2+
<ion-label>Label</ion-label>
3+
```

‎static/usage/label/basic/react.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonLabel } from '@ionic/react';
4+
5+
function Example() {
6+
return (
7+
<>
8+
<IonLabel>Label</IonLabel>
9+
</>
10+
);
11+
}
12+
export default Example;
13+
```

‎static/usage/label/basic/vue.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
```html
2+
<template>
3+
<ion-label>Label</ion-label>
4+
</template>
5+
6+
<script lang="ts">
7+
import { IonLabel } from '@ionic/vue';
8+
import { defineComponent } from 'vue';
9+
10+
export default defineComponent({
11+
components: { IonLabel },
12+
});
13+
</script>
14+
```

‎static/usage/label/input/angular.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
```html
2+
<ion-item>
3+
<ion-label>Default Label</ion-label>
4+
<ion-input placeholder="Enter text"></ion-input>
5+
</ion-item>
6+
7+
<ion-item>
8+
<ion-label position="fixed">Fixed Label</ion-label>
9+
<ion-input placeholder="Enter text"></ion-input>
10+
</ion-item>
11+
12+
<ion-item>
13+
<ion-label position="floating">Floating Label</ion-label>
14+
<ion-input placeholder="Enter text"></ion-input>
15+
</ion-item>
16+
17+
<ion-item>
18+
<ion-label position="stacked">Stacked Label</ion-label>
19+
<ion-input placeholder="Enter text"></ion-input>
20+
</ion-item>
21+
22+
<ion-item>
23+
<ion-label>Toggle</ion-label>
24+
<ion-toggle slot="end" checked></ion-toggle>
25+
</ion-item>
26+
27+
<ion-item>
28+
<ion-checkbox slot="start" checked></ion-checkbox>
29+
<ion-label>Checkbox</ion-label>
30+
</ion-item>
31+
```

‎static/usage/label/input/demo.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Label</title>
8+
<link rel="stylesheet" href="../../common.css" />
9+
<script src="../../common.js"></script>
10+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
12+
13+
<style>
14+
.container {
15+
display: block;
16+
}
17+
</style>
18+
</head>
19+
</head>
20+
21+
<body>
22+
<ion-app>
23+
<ion-content>
24+
<div class="container">
25+
<ion-item>
26+
<ion-label>Default Label</ion-label>
27+
<ion-input placeholder="Enter text"></ion-input>
28+
</ion-item>
29+
30+
<ion-item>
31+
<ion-label position="fixed">Fixed Label</ion-label>
32+
<ion-input placeholder="Enter text"></ion-input>
33+
</ion-item>
34+
35+
<ion-item>
36+
<ion-label position="floating">Floating Label</ion-label>
37+
<ion-input placeholder="Enter text"></ion-input>
38+
</ion-item>
39+
40+
<ion-item>
41+
<ion-label position="stacked">Stacked Label</ion-label>
42+
<ion-input placeholder="Enter text"></ion-input>
43+
</ion-item>
44+
45+
<ion-item>
46+
<ion-label>Toggle</ion-label>
47+
<ion-toggle slot="end" checked></ion-toggle>
48+
</ion-item>
49+
50+
<ion-item>
51+
<ion-checkbox slot="start" checked></ion-checkbox>
52+
<ion-label>Checkbox</ion-label>
53+
</ion-item>
54+
</div>
55+
</ion-content>
56+
</ion-app>
57+
</body>
58+
59+
</html>

‎static/usage/label/input/index.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
import angular from './angular.md';
7+
8+
<Playground code={{ javascript, react, vue, angular }} src="usage/label/input/demo.html" size="medium" />

‎static/usage/label/input/javascript.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
```html
2+
<ion-item>
3+
<ion-label>Default Label</ion-label>
4+
<ion-input placeholder="Enter text"></ion-input>
5+
</ion-item>
6+
7+
<ion-item>
8+
<ion-label position="fixed">Fixed Label</ion-label>
9+
<ion-input placeholder="Enter text"></ion-input>
10+
</ion-item>
11+
12+
<ion-item>
13+
<ion-label position="floating">Floating Label</ion-label>
14+
<ion-input placeholder="Enter text"></ion-input>
15+
</ion-item>
16+
17+
<ion-item>
18+
<ion-label position="stacked">Stacked Label</ion-label>
19+
<ion-input placeholder="Enter text"></ion-input>
20+
</ion-item>
21+
22+
<ion-item>
23+
<ion-label>Toggle</ion-label>
24+
<ion-toggle slot="end" checked></ion-toggle>
25+
</ion-item>
26+
27+
<ion-item>
28+
<ion-checkbox slot="start" checked></ion-checkbox>
29+
<ion-label>Checkbox</ion-label>
30+
</ion-item>
31+
```

‎static/usage/label/input/react.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/react';
4+
5+
function Example() {
6+
return (
7+
<>
8+
<IonItem>
9+
<IonLabel>Default Label</IonLabel>
10+
<IonInput placeholder="Enter text"></IonInput>
11+
</IonItem>
12+
13+
<IonItem>
14+
<IonLabel position="fixed">Fixed Label</IonLabel>
15+
<IonInput placeholder="Enter text"></IonInput>
16+
</IonItem>
17+
18+
<IonItem>
19+
<IonLabel position="floating">Floating Label</IonLabel>
20+
<IonInput placeholder="Enter text"></IonInput>
21+
</IonItem>
22+
23+
<IonItem>
24+
<IonLabel position="stacked">Stacked Label</IonLabel>
25+
<IonInput placeholder="Enter text"></IonInput>
26+
</IonItem>
27+
28+
<IonItem>
29+
<IonLabel>Toggle</IonLabel>
30+
<IonToggle slot="end" checked></IonToggle>
31+
</IonItem>
32+
33+
<IonItem>
34+
<IonCheckbox slot="start" checked></IonCheckbox>
35+
<IonLabel>Checkbox</IonLabel>
36+
</IonItem>
37+
</>
38+
);
39+
}
40+
export default Example;
41+
```

‎static/usage/label/input/vue.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
```html
2+
<template>
3+
<ion-item>
4+
<ion-label>Default Label</ion-label>
5+
<ion-input placeholder="Enter text"></ion-input>
6+
</ion-item>
7+
8+
<ion-item>
9+
<ion-label position="fixed">Fixed Label</ion-label>
10+
<ion-input placeholder="Enter text"></ion-input>
11+
</ion-item>
12+
13+
<ion-item>
14+
<ion-label position="floating">Floating Label</ion-label>
15+
<ion-input placeholder="Enter text"></ion-input>
16+
</ion-item>
17+
18+
<ion-item>
19+
<ion-label position="stacked">Stacked Label</ion-label>
20+
<ion-input placeholder="Enter text"></ion-input>
21+
</ion-item>
22+
23+
<ion-item>
24+
<ion-label>Toggle</ion-label>
25+
<ion-toggle slot="end" checked></ion-toggle>
26+
</ion-item>
27+
28+
<ion-item>
29+
<ion-checkbox slot="start" checked></ion-checkbox>
30+
<ion-label>Checkbox</ion-label>
31+
</ion-item>
32+
</template>
33+
34+
<script lang="ts">
35+
import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/vue';
36+
import { defineComponent } from 'vue';
37+
38+
export default defineComponent({
39+
components: { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle },
40+
});
41+
</script>
42+
```

‎static/usage/label/item/angular.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
```html
2+
<ion-item>
3+
<ion-label>Default Label</ion-label>
4+
</ion-item>
5+
6+
<ion-item>
7+
<ion-label>
8+
Multi-line text that should ellipsis when it is too long
9+
to fit on one line. Lorem ipsum dolor sit amet,
10+
consectetur adipiscing elit.
11+
</ion-label>
12+
</ion-item>
13+
14+
<ion-item>
15+
<ion-label class="ion-text-wrap">
16+
Multi-line text that should wrap when it is too long
17+
to fit on one line. Lorem ipsum dolor sit amet,
18+
consectetur adipiscing elit.
19+
</ion-label>
20+
</ion-item>
21+
22+
<ion-item>
23+
<ion-label>
24+
<h1>Heading</h1>
25+
<p>Paragraph</p>
26+
</ion-label>
27+
</ion-item>
28+
```

‎static/usage/label/item/demo.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Label</title>
8+
<link rel="stylesheet" href="../../common.css" />
9+
<script src="../../common.js"></script>
10+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
12+
13+
<style>
14+
.container {
15+
display: block;
16+
}
17+
</style>
18+
</head>
19+
</head>
20+
21+
<body>
22+
<ion-app>
23+
<ion-content>
24+
<div class="container">
25+
<ion-item>
26+
<ion-label>Default Label</ion-label>
27+
</ion-item>
28+
29+
<ion-item>
30+
<ion-label>
31+
Multi-line text that should ellipsis when it is too long
32+
to fit on one line. Lorem ipsum dolor sit amet,
33+
consectetur adipiscing elit.
34+
</ion-label>
35+
</ion-item>
36+
37+
<ion-item>
38+
<ion-label class="ion-text-wrap">
39+
Multi-line text that should wrap when it is too long
40+
to fit on one line. Lorem ipsum dolor sit amet,
41+
consectetur adipiscing elit.
42+
</ion-label>
43+
</ion-item>
44+
45+
<ion-item>
46+
<ion-label>
47+
<h1>Heading</h1>
48+
<p>Paragraph</p>
49+
</ion-label>
50+
</ion-item>
51+
</div>
52+
</ion-content>
53+
</ion-app>
54+
</body>
55+
56+
</html>

‎static/usage/label/item/index.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
import angular from './angular.md';
7+
8+
<Playground code={{ javascript, react, vue, angular }} src="usage/label/item/demo.html" size="medium" />

0 commit comments

Comments
 (0)