docs(datetime): add preferWheel playground (#2385)

ionic-team · Jun 14, 2022 · 34ea348 · 34ea348
1 parent 329c768
commit 34ea348
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 1 deletion.
diff --git a/docs/api/datetime.md b/docs/api/datetime.md
@@ -209,12 +209,34 @@ This example shows a datetime with the `time` configuration.
 
 ### Date Selection
 
-Time selection is available by passing `date-time`, `time-date`, or `date` to the `presentation` property.
+Date selection is available by passing `date-time`, `time-date`, or `date` to the `presentation` property.
 
 This example shows a datetime with the `date` configuration.
 
 <Date />
 
+### Wheel Style Pickers
+
+By default, Ionic will prefer to show a grid style layout when using `presentation`. However, it is possible to show a wheel style using the `preferWheel` property. When `preferWheel` is `true`, Ionic will prefer to show the wheel style layout when possible.
+
+Certain `presentation` options have both grid and wheel styles that developers can choose from with the `preferWheel` property. Other `presentation` values only have a wheel style and will never show a grid style. The table below shows which `presentation` values have grid or wheel styles.
+
+| `presentation` | Has Grid Style? | Has Wheel Style? |
+| -------------- | --------------- | ---------------- |
+| `date`         | Yes             | Yes              |
+| `date-time`    | Yes             | Yes              |
+| `month`        | No              | Yes              |
+| `month-year`   | No              | Yes              |
+| `time`         | No              | Yes              |
+| `time-date`    | Yes             | Yes              |
+| `year`         | No              | Yes              |
+
+The example below shows the wheel picker with `presentation="date-time"`.
+
+import Wheel from '@site/static/usage/datetime/presentation/wheel/index.md';
+
+<Wheel />
+
 ## Titles
 
 By default, `ion-datetime` does not show any header or title associated with the component. Developers can use the `showDefaultTitle` property to show the default title/header configuration. They can also use the `title` slot to customize what is rendered in the header.

diff --git a/static/usage/datetime/presentation/wheel/angular.md b/static/usage/datetime/presentation/wheel/angular.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="date-time" [preferWheel]="true"></ion-datetime>
+```
diff --git a/static/usage/datetime/presentation/wheel/demo.html b/static/usage/datetime/presentation/wheel/demo.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Datetime</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
+    <style>
+      ion-datetime {
+        width: 350px;
+      }
+    </style>
+  </head>
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-datetime presentation="date-time" prefer-wheel="true"></ion-datetime>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/static/usage/datetime/presentation/wheel/index.md b/static/usage/datetime/presentation/wheel/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground size="medium" code={{ javascript, react, vue, angular }} src="usage/datetime/presentation/wheel/demo.html" />
diff --git a/static/usage/datetime/presentation/wheel/javascript.md b/static/usage/datetime/presentation/wheel/javascript.md
@@ -0,0 +1,3 @@
+```html
+<ion-datetime presentation="date-time" prefer-wheel="true"></ion-datetime>
+```
diff --git a/static/usage/datetime/presentation/wheel/react.md b/static/usage/datetime/presentation/wheel/react.md
@@ -0,0 +1,10 @@
+```tsx
+import React from 'react';
+import { IonDatetime } from '@ionic/react';
+function Example() {
+  return (
+    <IonDatetime presentation="date-time" preferWheel={true}></IonDatetime>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/datetime/presentation/wheel/vue.md b/static/usage/datetime/presentation/wheel/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-datetime presentation="date-time" :prefer-wheel="true"></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+```