Skip to content

Commit 2b9c065

Browse files
liamdebeasiliamdebeasi
authored
chore: merge feature-7.4 docs
chore: merge feature-7.4 docs
2 parents f411bab + 9e0fc43 commit 2b9c065

Some content is hidden

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

53 files changed

+939
-10
lines changed

‎docs/api/checkbox.md

Lines changed: 14 additions & 2 deletions
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/datetime.md

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import HighlightedDatesCallback from '@site/static/usage/v7/datetime/highlighted
3737
import MultipleDateSelection from '@site/static/usage/v7/datetime/multiple/index.md';
3838

3939
import GlobalTheming from '@site/static/usage/v7/datetime/styling/global-theming/index.md';
40+
import CalendarDaysStyling from '@site/static/usage/v7/datetime/styling/calendar-days/index.md';
4041
import WheelStyling from '@site/static/usage/v7/datetime/styling/wheel-styling/index.md';
4142

4243
<head>
@@ -50,7 +51,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
5051

5152
Datetimes present a calendar interface and time wheel, making it easy for users to select dates and times. Datetimes are similar to the native `input` elements of `datetime-local`, however, Ionic Framework's Datetime component makes it easy to display the date and time in the preferred format, and manage the datetime values.
5253

53-
## Overview
54+
## Overview
5455

5556
Historically, handling datetime values within JavaScript, or even within HTML
5657
inputs, has always been a challenge. Specifically, JavaScript's `Date` object is
@@ -98,13 +99,17 @@ While seconds, milliseconds, and time zone can be specified using the ISO 8601 d
9899

99100
If you need to present a datetime in an overlay such as a modal or a popover, we recommend using [ion-datetime-button](./datetime-button). `ion-datetime-button` should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay.
100101

102+
## Setting Values Asynchronously
103+
104+
If its `value` is updated programmatically after a datetime has already been created, the datetime will automatically jump to the new date. However, it is recommended to avoid updating the `value` in this way when users are able to interact with the datetime, as this could be disorienting for those currently trying to select a date. For example, if a datetime's `value` is loaded by an asynchronous process, it is recommended to hide the datetime with CSS until the value has finished updating.
105+
101106
## Date Constraints
102107

103108
### Max and Min Dates
104109

105110
To customize the minimum and maximum datetime values, the `min` and `max` component properties can be provided which may make more sense for the app's use-case. Following the same IS0 8601 format listed in the table above, each component can restrict which dates can be selected by the user.
106111

107-
The following example restricts date selection to March 2022 through May 2022 only.
112+
The following example restricts date selection to March 2022 through May 2022 only.
108113

109114
<MaxMin />
110115

@@ -118,7 +123,7 @@ The following example allows minutes to be selected in increments of 15. It also
118123

119124
### Advanced Date Constraints
120125

121-
With the `isDateEnabled` property, developers can customize the `ion-datetime` to disable a specific day, range of dates, weekends or any custom rule using an ISO 8601 date string.
126+
With the `isDateEnabled` property, developers can customize the `ion-datetime` to disable a specific day, range of dates, weekends or any custom rule using an ISO 8601 date string.
122127
The `isDateEnabled` property accepts a function returning a boolean, indicating if a date is enabled. The function is called for each rendered calendar day, for the previous, current and next month. Custom implementations should be optimized for performance to avoid jank.
123128

124129
The following example shows how to disable all weekend dates. For more advanced date manipulation, we recommend using a date utility such as `date-fns`.
@@ -321,6 +326,16 @@ The benefit of this approach is that every component, not just `ion-datetime`, c
321326

322327
<GlobalTheming />
323328

329+
### Calendar Days
330+
331+
The calendar days in a grid-style `ion-datetime` can be styled using CSS shadow parts.
332+
333+
:::note
334+
The example below selects the day 2 days ago, unless that day is in the previous month, then it selects a day 2 days in the future. This is done for demo purposes in order to show how to apply custom styling to all days, the current day, and the selected day.
335+
:::
336+
337+
<CalendarDaysStyling />
338+
324339
### Wheel Pickers
325340

326341
The wheels used in `ion-datetime` can be styled through a combination of shadow parts and CSS variables. This applies to both the columns in wheel-style datetimes, and the month/year picker in grid-style datetimes.
@@ -363,7 +378,7 @@ import { format, parseISO } from 'date-fns';
363378
/**
364379
* This is provided in the event
365380
* payload from the `ionChange` event.
366-
*
381+
*
367382
* The value is an ISO-8601 date string.
368383
*/
369384
const dateFromIonDatetime = '2021-06-04T14:23:00-04:00';

‎docs/api/radio.md

Lines changed: 14 additions & 3 deletions
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

Lines changed: 11 additions & 1 deletion
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/usage/v7/checkbox/alignment/angular.md

Lines changed: 11 additions & 0 deletions
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

Lines changed: 29 additions & 0 deletions
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

Lines changed: 17 additions & 0 deletions
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

Lines changed: 11 additions & 0 deletions
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

Lines changed: 25 additions & 0 deletions
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

Lines changed: 24 additions & 0 deletions
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

Lines changed: 4 additions & 0 deletions
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

Lines changed: 4 additions & 0 deletions
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

Lines changed: 4 additions & 0 deletions
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

Lines changed: 4 additions & 0 deletions
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

Lines changed: 4 additions & 0 deletions
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/datetime/styling/calendar-days/angular/example_component_css.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
```css
2+
/*
3+
* Custom Datetime Day Parts
4+
* -------------------------------------------
5+
*/
6+
7+
ion-datetime::part(calendar-day) {
8+
color: #da5296;
9+
}
10+
11+
ion-datetime::part(calendar-day today) {
12+
color: #8462d1;
13+
}
14+
15+
ion-datetime::part(calendar-day):focus {
16+
background-color: rgb(154 209 98 / 0.2);
17+
box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2);
18+
}
19+
20+
/*
21+
* Custom Material Design Datetime Day Parts
22+
* -------------------------------------------
23+
*/
24+
25+
ion-datetime.md::part(calendar-day active),
26+
ion-datetime.md::part(calendar-day active):focus {
27+
background-color: #9ad162;
28+
border-color: #9ad162;
29+
color: #fff;
30+
}
31+
32+
ion-datetime.md::part(calendar-day today) {
33+
border-color: #8462d1;
34+
}
35+
36+
/*
37+
* Custom iOS Datetime Day Parts
38+
* -------------------------------------------
39+
*/
40+
41+
ion-datetime.ios::part(calendar-day active),
42+
ion-datetime.ios::part(calendar-day active):focus {
43+
background-color: rgb(154 209 98 / 0.2);
44+
color: #9ad162;
45+
}
46+
```

‎static/usage/v7/datetime/styling/calendar-days/angular/example_component_html.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```html
2+
<ion-datetime presentation="date" [(ngModel)]="datetime"></ion-datetime>
3+
```

0 commit comments

Comments
 (0)