Skip to content

Commit 56a8060

Browse files
thetaPCbrandyscarney
thetaPC
and
brandyscarney
authored
feat(checkbox, radio, toggle, range): stacked labels for form controls (#3097)
Co-authored-by: Brandy Carney <[email protected]>
1 parent 6e7737e commit 56a8060

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+461
-13
lines changed

‎docs/api/checkbox.md

+14-2
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,27 @@ import Basic from '@site/static/usage/v7/checkbox/basic/index.md';
2929

3030
## Label Placement
3131

32-
Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
32+
Developers can use the `labelPlacement` property to control how the label is placed relative to the control. This property mirrors the flexbox `flex-direction` property.
3333

3434
import LabelPlacement from '@site/static/usage/v7/checkbox/label-placement/index.md';
3535

3636
<LabelPlacement />
3737

38+
## Alignment
39+
40+
Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property.
41+
42+
:::note
43+
Stacked checkboxes can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally.
44+
:::
45+
46+
import Alignment from '@site/static/usage/v7/checkbox/alignment/index.md';
47+
48+
<Alignment />
49+
3850
## Justification
3951

40-
Developers can use the `justify` property to control how the label and control are packed on a line.
52+
Developers can use the `justify` property to control how the label and control are packed on a line. This property mirrors the flexbox `justify-content` property.
4153

4254
import Justify from '@site/static/usage/v7/checkbox/justify/index.md';
4355

‎docs/api/radio.md

+14-3
Original file line numberDiff line numberDiff line change
@@ -30,21 +30,32 @@ import Basic from '@site/static/usage/v7/radio/basic/index.md';
3030

3131
## Label Placement
3232

33-
Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
33+
Developers can use the `labelPlacement` property to control how the label is placed relative to the control. This property mirrors the flexbox `flex-direction` property.
3434

3535
import LabelPlacement from '@site/static/usage/v7/radio/label-placement/index.md';
3636

3737
<LabelPlacement />
3838

39+
## Alignment
40+
41+
Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property.
42+
43+
:::note
44+
Stacked radios can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally.
45+
:::
46+
47+
import Alignment from '@site/static/usage/v7/radio/alignment/index.md';
48+
49+
<Alignment />
50+
3951
## Justification
4052

41-
Developers can use the `justify` property to control how the label and control are packed on a line.
53+
Developers can use the `justify` property to control how the label and control are packed on a line. This property mirrors the flexbox `justify-content` property.
4254

4355
import Justify from '@site/static/usage/v7/radio/justify/index.md';
4456

4557
<Justify />
4658

47-
4859
:::note
4960
`ion-item` is only used in the demos to emphasize how `justify` works. It is not needed in order for `justify` to function correctly.
5061
:::

‎docs/api/toggle.md

+11-1
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,17 @@ import LabelPlacement from '@site/static/usage/v7/toggle/label-placement/index.m
5353

5454
<LabelPlacement />
5555

56+
## Alignment
57+
58+
Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property.
59+
60+
:::note
61+
Stacked toggles can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally.
62+
:::
63+
64+
import Alignment from '@site/static/usage/v7/toggle/alignment/index.md';
65+
66+
<Alignment />
5667

5768
## Justification
5869

@@ -62,7 +73,6 @@ import Justify from '@site/static/usage/v7/toggle/justify/index.md';
6273

6374
<Justify />
6475

65-
6676
## Theming
6777

6878
### Colors

‎static/code/stackblitz/v7/angular/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"dependencies": {
3-
"@ionic/angular": "^7.0.0",
4-
"@ionic/core": "^7.0.0"
3+
"@ionic/angular": "7.3.2-dev.11693507138.1f9ed625",
4+
"@ionic/core": "7.3.2-dev.11693507138.1f9ed625"
55
}
66
}

‎static/code/stackblitz/v7/html/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"dependencies": {
3-
"@ionic/core": "^7.0.0"
3+
"@ionic/core": "7.3.2-dev.11693507138.1f9ed625"
44
}
55
}

‎static/code/stackblitz/v7/react/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@ionic/react": "^7.0.10",
7-
"@ionic/react-router": "^7.0.10",
6+
"@ionic/react": "7.3.2-dev.11693507138.1f9ed625",
7+
"@ionic/react-router": "7.3.2-dev.11693507138.1f9ed625",
88
"@types/node": "^16.11.35",
99
"@types/react": "^18.0.9",
1010
"@types/react-dom": "^18.0.4",

‎static/code/stackblitz/v7/vue/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
"preview": "vite preview"
99
},
1010
"dependencies": {
11-
"@ionic/vue": "^7.0.10",
12-
"@ionic/vue-router": "^7.0.10",
11+
"@ionic/vue": "7.3.2-dev.11693507138.1f9ed625",
12+
"@ionic/vue-router": "7.3.2-dev.11693507138.1f9ed625",
1313
"vue": "^3.2.25",
1414
"vue-router": "4.0.13"
1515
},

‎static/usage/v7/checkbox/alignment/angular.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-checkbox label-placement="stacked" alignment="start">Aligned to the Start</ion-checkbox>
5+
</ion-item>
6+
7+
<ion-item>
8+
<ion-checkbox label-placement="stacked" alignment="center">Aligned to the Center</ion-checkbox>
9+
</ion-item>
10+
</ion-list>
11+
```

‎static/usage/v7/checkbox/alignment/demo.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Checkbox</title>
7+
<link rel="stylesheet" href="../../../common.css" />
8+
<script src="../../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
11+
</head>
12+
<body>
13+
<ion-app>
14+
<ion-content>
15+
<div class="container">
16+
<ion-list>
17+
<ion-item>
18+
<ion-checkbox label-placement="stacked" alignment="start">Aligned to the Start</ion-checkbox>
19+
</ion-item>
20+
21+
<ion-item>
22+
<ion-checkbox label-placement="stacked" alignment="center">Aligned to the Center</ion-checkbox>
23+
</ion-item>
24+
</ion-list>
25+
</div>
26+
</ion-content>
27+
</ion-app>
28+
</body>
29+
</html>

‎static/usage/v7/checkbox/alignment/index.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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
9+
version="7"
10+
code={{
11+
javascript,
12+
react,
13+
vue,
14+
angular,
15+
}}
16+
src="usage/v7/checkbox/alignment/demo.html"
17+
/>

‎static/usage/v7/checkbox/alignment/javascript.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-checkbox label-placement="stacked" alignment="start">Aligned to the Start</ion-checkbox>
5+
</ion-item>
6+
7+
<ion-item>
8+
<ion-checkbox label-placement="stacked" alignment="center">Aligned to the Center</ion-checkbox>
9+
</ion-item>
10+
</ion-list>
11+
```

‎static/usage/v7/checkbox/alignment/react.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonCheckbox, IonItem, IonList } from '@ionic/react';
4+
5+
function Example() {
6+
return (
7+
<>
8+
<IonList>
9+
<IonItem>
10+
<IonCheckbox labelPlacement="stacked" alignment="start">
11+
Aligned to the Start
12+
</IonCheckbox>
13+
</IonItem>
14+
15+
<IonItem>
16+
<IonCheckbox labelPlacement="stacked" alignment="center">
17+
Aligned to the Center
18+
</IonCheckbox>
19+
</IonItem>
20+
</IonList>
21+
</>
22+
);
23+
}
24+
export default Example;
25+
```

‎static/usage/v7/checkbox/alignment/vue.md

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
```html
2+
<template>
3+
<ion-list>
4+
<ion-item>
5+
<ion-checkbox label-placement="stacked" alignment="start">Aligned to the Start</ion-checkbox>
6+
</ion-item>
7+
8+
<ion-item>
9+
<ion-checkbox label-placement="stacked" alignment="center">Aligned to the Center</ion-checkbox>
10+
</ion-item>
11+
</ion-list>
12+
</template>
13+
14+
<script lang="ts">
15+
import { IonCheckbox } from '@ionic/vue';
16+
import { defineComponent } from 'vue';
17+
18+
export default defineComponent({
19+
components: {
20+
IonCheckbox,
21+
},
22+
});
23+
</script>
24+
```

‎static/usage/v7/checkbox/label-placement/angular.md

+4
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,8 @@
88
<br />
99

1010
<ion-checkbox labelPlacement="fixed">Fixed Width Label</ion-checkbox>
11+
12+
<br />
13+
14+
<ion-checkbox labelPlacement="stacked">Stacked Label</ion-checkbox>
1115
```

‎static/usage/v7/checkbox/label-placement/demo.html

+4
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@
2424
<br />
2525

2626
<ion-checkbox label-placement="fixed">Fixed Width Label</ion-checkbox>
27+
28+
<br />
29+
30+
<ion-checkbox label-placement="stacked">Stacked Label</ion-checkbox>
2731
</div>
2832
</div>
2933
</ion-content>

‎static/usage/v7/checkbox/label-placement/javascript.md

+4
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,8 @@
88
<br />
99

1010
<ion-checkbox label-placement="fixed">Fixed Width Label</ion-checkbox>
11+
12+
<br />
13+
14+
<ion-checkbox label-placement="stacked">Stacked Label</ion-checkbox>
1115
```

‎static/usage/v7/checkbox/label-placement/react.md

+4
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ function Example() {
1414
<br />
1515

1616
<IonCheckbox labelPlacement="fixed">Fixed Width Label</IonCheckbox>
17+
18+
<br />
19+
20+
<IonCheckbox labelPlacement="stacked">Stacked Label</IonCheckbox>
1721
</>
1822
);
1923
}

‎static/usage/v7/checkbox/label-placement/vue.md

+4
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99
<br />
1010

1111
<ion-checkbox label-placement="fixed">Fixed Width Label</ion-checkbox>
12+
13+
<br />
14+
15+
<ion-checkbox label-placement="stacked">Stacked Label</ion-checkbox>
1216
</template>
1317

1418
<script lang="ts">

‎static/usage/v7/radio/alignment/angular.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
```html
2+
<ion-list>
3+
<ion-radio-group value="start">
4+
<ion-item>
5+
<ion-radio value="start" labelPlacement="stacked" alignment="start">Aligned to the Start</ion-radio>
6+
</ion-item>
7+
</ion-radio-group>
8+
9+
<ion-radio-group value="center">
10+
<ion-item>
11+
<ion-radio value="center" labelPlacement="stacked" alignment="center">Aligned to the Center</ion-radio>
12+
</ion-item>
13+
</ion-radio-group>
14+
</ion-list>
15+
```

‎static/usage/v7/radio/alignment/demo.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Radio</title>
7+
<link rel="stylesheet" href="../../../common.css" />
8+
<script src="../../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
11+
</head>
12+
13+
<body>
14+
<ion-app>
15+
<ion-content>
16+
<div class="container">
17+
<ion-list>
18+
<ion-radio-group value="start">
19+
<ion-item>
20+
<ion-radio value="start" label-placement="stacked" alignment="start">Aligned to the Start</ion-radio>
21+
</ion-item>
22+
</ion-radio-group>
23+
24+
<ion-radio-group value="center">
25+
<ion-item>
26+
<ion-radio value="center" label-placement="stacked" alignment="center">Aligned to the Center</ion-radio>
27+
</ion-item>
28+
</ion-radio-group>
29+
</ion-list>
30+
</div>
31+
</ion-content>
32+
</ion-app>
33+
</body>
34+
</html>

‎static/usage/v7/radio/alignment/index.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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
9+
version="7"
10+
code={{
11+
javascript,
12+
react,
13+
vue,
14+
angular,
15+
}}
16+
src="usage/v7/radio/alignment/demo.html"
17+
/>

‎static/usage/v7/radio/alignment/javascript.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
```html
2+
<ion-list>
3+
<ion-radio-group value="start">
4+
<ion-item>
5+
<ion-radio value="start" label-placement="stacked" alignment="start">Aligned to the Start</ion-radio>
6+
</ion-item>
7+
</ion-radio-group>
8+
9+
<ion-radio-group value="center">
10+
<ion-item>
11+
<ion-radio value="center" label-placement="stacked" alignment="center">Aligned to the Center</ion-radio>
12+
</ion-item>
13+
</ion-radio-group>
14+
</ion-list>
15+
```

0 commit comments

Comments
 (0)