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" />

0 commit comments

Comments
 (0)