diff --git a/docs/api/datetime.md b/docs/api/datetime.md index 34ac7575b5c..c166841c37a 100644 --- a/docs/api/datetime.md +++ b/docs/api/datetime.md @@ -36,7 +36,8 @@ import HighlightedDatesCallback from '@site/static/usage/v7/datetime/highlighted import MultipleDateSelection from '@site/static/usage/v7/datetime/multiple/index.md'; -import Theming from '@site/static/usage/v7/datetime/theming/index.md'; +import GlobalTheming from '@site/static/usage/v7/datetime/styling/global-theming/index.md'; +import WheelStyling from '@site/static/usage/v7/datetime/styling/wheel-styling/index.md'; ion-datetime: Ionic API Input for Datetime Format Picker @@ -310,13 +311,21 @@ A callback is better when the highlighted dates are recurring, such as birthdays -## Theming +## Styling + +### Global Theming 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`. The benefit of this approach is that every component, not just `ion-datetime`, can automatically take advantage of this theme. - + + +### Wheel Pickers + +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. + + ## Time Zones diff --git a/static/usage/v7/datetime/theming/angular/example_component_html.md b/static/usage/v7/datetime/styling/global-theming/angular/example_component_html.md similarity index 100% rename from static/usage/v7/datetime/theming/angular/example_component_html.md rename to static/usage/v7/datetime/styling/global-theming/angular/example_component_html.md diff --git a/static/usage/v7/datetime/theming/angular/global_css.md b/static/usage/v7/datetime/styling/global-theming/angular/global_css.md similarity index 100% rename from static/usage/v7/datetime/theming/angular/global_css.md rename to static/usage/v7/datetime/styling/global-theming/angular/global_css.md diff --git a/static/usage/v7/datetime/theming/demo.html b/static/usage/v7/datetime/styling/global-theming/demo.html similarity index 95% rename from static/usage/v7/datetime/theming/demo.html rename to static/usage/v7/datetime/styling/global-theming/demo.html index f2e502cfe56..7ea2d621df3 100644 --- a/static/usage/v7/datetime/theming/demo.html +++ b/static/usage/v7/datetime/styling/global-theming/demo.html @@ -4,8 +4,8 @@ Datetime - - + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v7/datetime/styling/wheel-styling/index.md b/static/usage/v7/datetime/styling/wheel-styling/index.md new file mode 100644 index 00000000000..4cc1808f81b --- /dev/null +++ b/static/usage/v7/datetime/styling/wheel-styling/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v7/datetime/styling/wheel-styling/javascript.md b/static/usage/v7/datetime/styling/wheel-styling/javascript.md new file mode 100644 index 00000000000..3e0df9e425d --- /dev/null +++ b/static/usage/v7/datetime/styling/wheel-styling/javascript.md @@ -0,0 +1,20 @@ +```html + + + +``` diff --git a/static/usage/v7/datetime/styling/wheel-styling/react/main_css.md b/static/usage/v7/datetime/styling/wheel-styling/react/main_css.md new file mode 100644 index 00000000000..936a6699b06 --- /dev/null +++ b/static/usage/v7/datetime/styling/wheel-styling/react/main_css.md @@ -0,0 +1,16 @@ +```css +ion-datetime { + --background: rgb(245, 235, 247); + --background-rgb: 245, 235, 247; + --wheel-highlight-background: rgb(218, 216, 255); + --wheel-fade-background-rgb: 245, 235, 247; +} + +ion-datetime::part(wheel-item) { + color: rgb(255, 66, 97); +} + +ion-datetime::part(wheel-item active) { + color: rgb(128, 30, 171); +} +``` diff --git a/static/usage/v7/datetime/styling/wheel-styling/react/main_tsx.md b/static/usage/v7/datetime/styling/wheel-styling/react/main_tsx.md new file mode 100644 index 00000000000..6e01ae735c3 --- /dev/null +++ b/static/usage/v7/datetime/styling/wheel-styling/react/main_tsx.md @@ -0,0 +1,11 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v7/datetime/styling/wheel-styling/vue.md b/static/usage/v7/datetime/styling/wheel-styling/vue.md new file mode 100644 index 00000000000..a90c729af63 --- /dev/null +++ b/static/usage/v7/datetime/styling/wheel-styling/vue.md @@ -0,0 +1,31 @@ +```html + + + + + +```