Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(datetime): add preferWheel playground #2385

Merged
merged 3 commits into from
Jun 14, 2022
Merged

docs(datetime): add preferWheel playground #2385

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5dd9c9a
docs(datetime): add base wheel picker text
liamdebeasi Jun 13, 2022
65f4510
docs(datetime): add playground
liamdebeasi Jun 13, 2022
d77e5f1
chore(): use latest stable version of ionic
liamdebeasi Jun 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 23 additions & 1 deletion docs/api/datetime.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
3 changes: 3 additions & 0 deletions static/usage/datetime/presentation/wheel/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```html
<ion-datetime presentation="date-time" [preferWheel]="true"></ion-datetime>
```
26 changes: 26 additions & 0 deletions static/usage/datetime/presentation/wheel/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
8 changes: 8 additions & 0 deletions static/usage/datetime/presentation/wheel/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" />
3 changes: 3 additions & 0 deletions static/usage/datetime/presentation/wheel/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```html
<ion-datetime presentation="date-time" prefer-wheel="true"></ion-datetime>
```
10 changes: 10 additions & 0 deletions static/usage/datetime/presentation/wheel/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
```
14 changes: 14 additions & 0 deletions static/usage/datetime/presentation/wheel/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
```