Skip to content

Commit 0095c9f

Browse files
averyjohnstonaveryjohnston
authored
docs(datetime): add playground for styling wheel pickers (#2982)
1 parent 436bc2e commit 0095c9f

File tree

17 files changed

+184
-6
lines changed

17 files changed

+184
-6
lines changed

‎docs/api/datetime.md

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@ import HighlightedDatesCallback from '@site/static/usage/v7/datetime/highlighted
3636

3737
import MultipleDateSelection from '@site/static/usage/v7/datetime/multiple/index.md';
3838

39-
import Theming from '@site/static/usage/v7/datetime/theming/index.md';
39+
import GlobalTheming from '@site/static/usage/v7/datetime/styling/global-theming/index.md';
40+
import WheelStyling from '@site/static/usage/v7/datetime/styling/wheel-styling/index.md';
4041

4142
<head>
4243
<title>ion-datetime: Ionic API Input for Datetime Format Picker</title>
@@ -310,13 +311,21 @@ A callback is better when the highlighted dates are recurring, such as birthdays
310311

311312
<HighlightedDatesCallback />
312313

313-
## Theming
314+
## Styling
315+
316+
### Global Theming
314317

315318
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`.
316319

317320
The benefit of this approach is that every component, not just `ion-datetime`, can automatically take advantage of this theme.
318321

319-
<Theming />
322+
<GlobalTheming />
323+
324+
### Wheel Pickers
325+
326+
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.
327+
328+
<WheelStyling />
320329

321330
## Time Zones
322331

‎static/usage/v7/datetime/theming/angular/example_component_html.md renamed to ‎static/usage/v7/datetime/styling/global-theming/angular/example_component_html.md

File renamed without changes.

‎static/usage/v7/datetime/theming/angular/global_css.md renamed to ‎static/usage/v7/datetime/styling/global-theming/angular/global_css.md

File renamed without changes.

‎static/usage/v7/datetime/theming/demo.html renamed to ‎static/usage/v7/datetime/styling/global-theming/demo.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Datetime</title>
7-
<link rel="stylesheet" href="../../../common.css" />
8-
<script src="../../../common.js"></script>
7+
<link rel="stylesheet" href="../../../../common.css" />
8+
<script src="../../../../common.js"></script>
99
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
1010
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
1111
<style>

‎static/usage/v7/datetime/theming/index.md renamed to ‎static/usage/v7/datetime/styling/global-theming/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,5 +29,5 @@ import angular_global_css from './angular/global_css.md';
2929
},
3030
},
3131
}}
32-
src="usage/v7/datetime/theming/demo.html"
32+
src="usage/v7/datetime/styling/global-theming/demo.html"
3333
/>

‎static/usage/v7/datetime/theming/javascript.md renamed to ‎static/usage/v7/datetime/styling/global-theming/javascript.md

File renamed without changes.

‎static/usage/v7/datetime/theming/react/main_css.md renamed to ‎static/usage/v7/datetime/styling/global-theming/react/main_css.md

File renamed without changes.

‎static/usage/v7/datetime/theming/react/main_tsx.md renamed to ‎static/usage/v7/datetime/styling/global-theming/react/main_tsx.md

File renamed without changes.

‎static/usage/v7/datetime/theming/vue.md renamed to ‎static/usage/v7/datetime/styling/global-theming/vue.md

File renamed without changes.

‎static/usage/v7/datetime/styling/wheel-styling/angular/example_component_css.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
```css
2+
ion-datetime {
3+
--background: rgb(245, 235, 247);
4+
--background-rgb: 245, 235, 247;
5+
--wheel-highlight-background: rgb(218, 216, 255);
6+
--wheel-fade-background-rgb: 245, 235, 247;
7+
}
8+
9+
ion-datetime::part(wheel-item) {
10+
color: rgb(255, 66, 97);
11+
}
12+
13+
ion-datetime::part(wheel-item active) {
14+
color: rgb(128, 30, 171);
15+
}
16+
```

‎static/usage/v7/datetime/styling/wheel-styling/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" [preferWheel]="true"></ion-datetime>
3+
```

‎static/usage/v7/datetime/styling/wheel-styling/demo.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
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>Datetime</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+
12+
<style>
13+
ion-datetime {
14+
--background: rgb(245, 235, 247);
15+
--background-rgb: 245, 235, 247;
16+
--wheel-highlight-background: rgb(218, 216, 255);
17+
--wheel-fade-background-rgb: 245, 235, 247;
18+
}
19+
20+
ion-datetime::part(wheel-item) {
21+
color: rgb(255, 66, 97);
22+
}
23+
24+
ion-datetime::part(wheel-item active) {
25+
color: rgb(128, 30, 171);
26+
}
27+
</style>
28+
</head>
29+
30+
<body>
31+
<ion-app>
32+
<ion-content>
33+
<div class="container">
34+
<ion-datetime presentation="date" prefer-wheel="true"></ion-datetime>
35+
</div>
36+
</ion-content>
37+
</ion-app>
38+
</body>
39+
</html>

‎static/usage/v7/datetime/styling/wheel-styling/index.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
5+
import react_main_tsx from './react/main_tsx.md';
6+
import react_main_css from './react/main_css.md';
7+
8+
import vue from './vue.md';
9+
10+
import angular_example_component_html from './angular/example_component_html.md';
11+
import angular_example_component_css from './angular/example_component_css.md';
12+
13+
<Playground
14+
version="7"
15+
code={{
16+
javascript,
17+
react: {
18+
files: {
19+
'src/main.tsx': react_main_tsx,
20+
'src/main.css': react_main_css,
21+
},
22+
},
23+
vue,
24+
angular: {
25+
files: {
26+
'src/app/example.component.html': angular_example_component_html,
27+
'src/app/example.component.css': angular_example_component_css,
28+
},
29+
},
30+
}}
31+
src="usage/v7/datetime/styling/wheel-styling/demo.html"
32+
size="250px"
33+
/>

‎static/usage/v7/datetime/styling/wheel-styling/javascript.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
```html
2+
<style>
3+
ion-datetime {
4+
--background: rgb(245, 235, 247);
5+
--background-rgb: 245, 235, 247;
6+
--wheel-highlight-background: rgb(218, 216, 255);
7+
--wheel-fade-background-rgb: 245, 235, 247;
8+
}
9+
10+
ion-datetime::part(wheel-item) {
11+
color: rgb(255, 66, 97);
12+
}
13+
14+
ion-datetime::part(wheel-item active) {
15+
color: rgb(128, 30, 171);
16+
}
17+
</style>
18+
19+
<ion-datetime presentation="date" prefer-wheel="true"></ion-datetime>
20+
```

‎static/usage/v7/datetime/styling/wheel-styling/react/main_css.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
```css
2+
ion-datetime {
3+
--background: rgb(245, 235, 247);
4+
--background-rgb: 245, 235, 247;
5+
--wheel-highlight-background: rgb(218, 216, 255);
6+
--wheel-fade-background-rgb: 245, 235, 247;
7+
}
8+
9+
ion-datetime::part(wheel-item) {
10+
color: rgb(255, 66, 97);
11+
}
12+
13+
ion-datetime::part(wheel-item active) {
14+
color: rgb(128, 30, 171);
15+
}
16+
```

‎static/usage/v7/datetime/styling/wheel-styling/react/main_tsx.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonDatetime } from '@ionic/react';
4+
5+
import './main.css';
6+
7+
function Example() {
8+
return <IonDatetime presentation="date" preferWheel={true}></IonDatetime>;
9+
}
10+
export default Example;
11+
```

‎static/usage/v7/datetime/styling/wheel-styling/vue.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
```html
2+
<template>
3+
<ion-datetime presentation="date" :prefer-wheel="true"></ion-datetime>
4+
</template>
5+
6+
<script lang="ts">
7+
import { IonDatetime } from '@ionic/vue';
8+
import { defineComponent } from 'vue';
9+
10+
export default defineComponent({
11+
components: { IonDatetime },
12+
});
13+
</script>
14+
15+
<style scoped>
16+
ion-datetime {
17+
--background: rgb(245, 235, 247);
18+
--background-rgb: 245, 235, 247;
19+
--wheel-highlight-background: rgb(218, 216, 255);
20+
--wheel-fade-background-rgb: 245, 235, 247;
21+
}
22+
23+
ion-datetime::part(wheel-item) {
24+
color: rgb(255, 66, 97);
25+
}
26+
27+
ion-datetime::part(wheel-item active) {
28+
color: rgb(128, 30, 171);
29+
}
30+
</style>
31+
```

0 commit comments

Comments
 (0)