Skip to content

Commit 176c6ff

Browse files
liamdebeasiliamdebeasi
authored
docs(many): add Ionic v6.6 docs
docs(many): add Ionic v6.6 docs
2 parents 5274158 + 8b0fc89 commit 176c6ff

Some content is hidden

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

47 files changed

+1384
-1
lines changed

‎docs/api/datetime.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@ import ShowingConfirmationButtons from '@site/static/usage/v7/datetime/buttons/s
3131
import CustomizingButtons from '@site/static/usage/v7/datetime/buttons/customizing-buttons/index.md';
3232
import CustomizingButtonTexts from '@site/static/usage/v7/datetime/buttons/customizing-button-texts/index.md';
3333

34+
import HighlightedDatesArray from '@site/static/usage/v7/datetime/highlightedDates/array/index.md';
35+
import HighlightedDatesCallback from '@site/static/usage/v7/datetime/highlightedDates/callback/index.md';
36+
3437
import MultipleDateSelection from '@site/static/usage/v7/datetime/multiple/index.md';
3538

3639
import Theming from '@site/static/usage/v7/datetime/theming/index.md';
@@ -283,6 +286,30 @@ Developers can provide their own buttons for advanced custom behavior.
283286

284287
<CustomizingButtons />
285288

289+
## Highlighting Specific Dates
290+
291+
Using the `highlightedDates` property, developers can style particular dates with custom text or background colors. This property can be defined as either an array of dates and their colors, or a callback that receives an ISO string and returns the colors to use.
292+
293+
When specifying colors, any valid CSS color format can be used. This includes hex codes, rgba, [color variables](../theming/colors), etc.
294+
295+
To maintain a consistent user experience, the style of selected date(s) will always override custom highlights.
296+
297+
:::note
298+
This property is only supported when `preferWheel="false"`, and using a `presentation` of either `"date"`, `"date-time"`, or `"time-date"`.
299+
:::
300+
301+
### Using Array
302+
303+
An array is better when the highlights apply to fixed dates, such as due dates.
304+
305+
<HighlightedDatesArray />
306+
307+
### Using Callback
308+
309+
A callback is better when the highlighted dates are recurring, such as birthdays or recurring meetings.
310+
311+
<HighlightedDatesCallback />
312+
286313
## Theming
287314

288315
Ionic's powerful theming system can be used to easily change your entire app to match a certain theme. In this example, we used the [Color Creator](../theming/colors#new-color-creator) and the [Stepped Color Generator](../theming/themes#stepped-color-generator) to create a rose color palette that we can use for `ion-datetime`.

‎docs/api/picker.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,10 @@ interface PickerColumnOption {
9595
duration?: number;
9696
transform?: string;
9797
selected?: boolean;
98+
/**
99+
* The optional text to assign as the aria-label on the picker column option.
100+
*/
101+
ariaLabel?: string;
98102
}
99103
```
100104

‎docs/api/toast.md

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,19 @@ The following example demonstrates how to use the `buttons` property to add a bu
5555
import ButtonsPlayground from '@site/static/usage/v7/toast/buttons/index.md';
5656

5757
<ButtonsPlayground />
58-
5958

6059
## Positioning
6160

6261
Toasts can be positioned at the top, bottom or middle of the viewport. The position can be passed upon creation. The possible values are `top`, `bottom` and `middle`. If the position is not specified, the toast will be displayed at the bottom of the viewport.
6362

63+
## Layout
64+
65+
Button containers within the toast can be displayed either on the same line as the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both.
66+
67+
import StackedPlayground from '@site/static/usage/v7/toast/layout/index.md';
68+
69+
<StackedPlayground />
70+
6471
## Icons
6572

6673
An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.md) instead.

‎static/usage/v6/datetime/highlightedDates/array/angular/example_component_html.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
```html
2+
<ion-datetime
3+
presentation="date"
4+
value="2023-01-01"
5+
[highlightedDates]="highlightedDates"
6+
></ion-datetime>
7+
```

‎static/usage/v6/datetime/highlightedDates/array/angular/example_component_ts.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
selector: 'app-example',
6+
templateUrl: 'example.component.html',
7+
})
8+
export class ExampleComponent {
9+
highlightedDates = [
10+
{
11+
date: '2023-01-05',
12+
textColor: '#800080',
13+
backgroundColor: '#ffc0cb',
14+
},
15+
{
16+
date: '2023-01-10',
17+
textColor: '#09721b',
18+
backgroundColor: '#c8e5d0',
19+
},
20+
{
21+
date: '2023-01-20',
22+
textColor: 'var(--ion-color-secondary-contrast)',
23+
backgroundColor: 'var(--ion-color-secondary)',
24+
},
25+
{
26+
date: '2023-01-23',
27+
textColor: 'rgb(68, 10, 184)',
28+
backgroundColor: 'rgb(211, 200, 229)'
29+
}
30+
];
31+
}
32+
```

‎static/usage/v6/datetime/highlightedDates/array/demo.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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>Datetime</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/[email protected]/dist/ionic/ionic.esm.js"></script>
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/css/ionic.bundle.css" />
12+
<style>
13+
ion-datetime {
14+
width: 350px;
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
<ion-app>
21+
<ion-content>
22+
<div class="container">
23+
<ion-datetime presentation="date" value="2023-01-01"></ion-datetime>
24+
</div>
25+
</ion-content>
26+
</ion-app>
27+
28+
<script>
29+
const datetime = document.querySelector('ion-datetime');
30+
datetime.highlightedDates = [
31+
{
32+
date: '2023-01-05',
33+
textColor: '#800080',
34+
backgroundColor: '#ffc0cb',
35+
},
36+
{
37+
date: '2023-01-10',
38+
textColor: '#09721b',
39+
backgroundColor: '#c8e5d0',
40+
},
41+
{
42+
date: '2023-01-20',
43+
textColor: 'var(--ion-color-secondary-contrast)',
44+
backgroundColor: 'var(--ion-color-secondary)',
45+
},
46+
{
47+
date: '2023-01-23',
48+
textColor: 'rgb(68, 10, 184)',
49+
backgroundColor: 'rgb(211, 200, 229)'
50+
}
51+
];
52+
</script>
53+
</body>
54+
55+
</html>

‎static/usage/v6/datetime/highlightedDates/array/index.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
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+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
9+
10+
<Playground
11+
size="medium"
12+
version={6}
13+
code={{
14+
javascript,
15+
react,
16+
vue,
17+
angular: {
18+
files: {
19+
'src/app/example.component.html': angular_example_component_html,
20+
'src/app/example.component.ts': angular_example_component_ts,
21+
},
22+
},
23+
}}
24+
src="usage/v6/datetime/highlightedDates/array/demo.html"
25+
/>

‎static/usage/v6/datetime/highlightedDates/array/javascript.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
```html
2+
<ion-datetime presentation="date" value="2023-01-01"></ion-datetime>
3+
4+
<script>
5+
var datetime = document.querySelector('ion-datetime');
6+
datetime.highlightedDates = [
7+
{
8+
date: '2023-01-05',
9+
textColor: '#800080',
10+
backgroundColor: '#ffc0cb',
11+
},
12+
{
13+
date: '2023-01-10',
14+
textColor: '#09721b',
15+
backgroundColor: '#c8e5d0',
16+
},
17+
{
18+
date: '2023-01-20',
19+
textColor: 'var(--ion-color-secondary-contrast)',
20+
backgroundColor: 'var(--ion-color-secondary)',
21+
},
22+
{
23+
date: '2023-01-23',
24+
textColor: 'rgb(68, 10, 184)',
25+
backgroundColor: 'rgb(211, 200, 229)'
26+
}
27+
];
28+
</script>
29+
```

‎static/usage/v6/datetime/highlightedDates/array/react.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonDatetime } from '@ionic/react';
4+
function Example() {
5+
return (
6+
<IonDatetime
7+
presentation="date"
8+
value="2023-01-01"
9+
highlightedDates={[
10+
{
11+
date: '2023-01-05',
12+
textColor: '#800080',
13+
backgroundColor: '#ffc0cb',
14+
},
15+
{
16+
date: '2023-01-10',
17+
textColor: '#09721b',
18+
backgroundColor: '#c8e5d0',
19+
},
20+
{
21+
date: '2023-01-20',
22+
textColor: 'var(--ion-color-secondary-contrast)',
23+
backgroundColor: 'var(--ion-color-secondary)',
24+
},
25+
{
26+
date: '2023-01-23',
27+
textColor: 'rgb(68, 10, 184)',
28+
backgroundColor: 'rgb(211, 200, 229)'
29+
}
30+
]}
31+
></IonDatetime>
32+
);
33+
}
34+
export default Example;
35+
```

‎static/usage/v6/datetime/highlightedDates/array/vue.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
```html
2+
<template>
3+
<ion-datetime
4+
presentation="date"
5+
value="2023-01-01"
6+
:highlighted-dates="highlightedDates"
7+
></ion-datetime>
8+
</template>
9+
10+
<script lang="ts">
11+
import { IonDatetime } from '@ionic/vue';
12+
import { defineComponent } from 'vue';
13+
14+
export default defineComponent({
15+
components: { IonDatetime },
16+
setup() {
17+
const highlightedDates = [
18+
{
19+
date: '2023-01-05',
20+
textColor: '#800080',
21+
backgroundColor: '#ffc0cb',
22+
},
23+
{
24+
date: '2023-01-10',
25+
textColor: '#09721b',
26+
backgroundColor: '#c8e5d0',
27+
},
28+
{
29+
date: '2023-01-20',
30+
textColor: 'var(--ion-color-secondary-contrast)',
31+
backgroundColor: 'var(--ion-color-secondary)',
32+
},
33+
{
34+
date: '2023-01-23',
35+
textColor: 'rgb(68, 10, 184)',
36+
backgroundColor: 'rgb(211, 200, 229)'
37+
}
38+
];
39+
40+
return { highlightedDates }
41+
}
42+
});
43+
</script>
44+
```

‎static/usage/v6/datetime/highlightedDates/callback/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" [highlightedDates]="highlightedDates"></ion-datetime>
3+
```

‎static/usage/v6/datetime/highlightedDates/callback/angular/example_component_ts.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
selector: 'app-example',
6+
templateUrl: 'example.component.html',
7+
})
8+
export class ExampleComponent {
9+
highlightedDates = (isoString) => {
10+
const date = new Date(isoString);
11+
const utcDay = date.getUTCDate();
12+
13+
if(utcDay % 5 === 0) {
14+
return {
15+
textColor: '#800080',
16+
backgroundColor: '#ffc0cb',
17+
};
18+
}
19+
20+
if(utcDay % 3 === 0) {
21+
return {
22+
textColor: 'var(--ion-color-secondary-contrast)',
23+
backgroundColor: 'var(--ion-color-secondary)',
24+
};
25+
}
26+
27+
return undefined;
28+
};
29+
}
30+
```

‎static/usage/v6/datetime/highlightedDates/callback/demo.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
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>Datetime</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/[email protected]/dist/ionic/ionic.esm.js"></script>
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/css/ionic.bundle.css" />
12+
<style>
13+
ion-datetime {
14+
width: 350px;
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
<ion-app>
21+
<ion-content>
22+
<div class="container">
23+
<ion-datetime presentation="date"></ion-datetime>
24+
</div>
25+
</ion-content>
26+
</ion-app>
27+
28+
<script>
29+
const datetime = document.querySelector('ion-datetime');
30+
datetime.highlightedDates = (isoString) => {
31+
const date = new Date(isoString);
32+
const utcDay = date.getUTCDate();
33+
34+
if(utcDay % 5 === 0) {
35+
return {
36+
textColor: '#800080',
37+
backgroundColor: '#ffc0cb',
38+
};
39+
}
40+
41+
if(utcDay % 3 === 0) {
42+
return {
43+
textColor: 'var(--ion-color-secondary-contrast)',
44+
backgroundColor: 'var(--ion-color-secondary)',
45+
};
46+
}
47+
48+
return undefined;
49+
};
50+
</script>
51+
</body>
52+
53+
</html>

0 commit comments

Comments
 (0)