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+
```

0 commit comments

Comments
 (0)