-
Notifications
You must be signed in to change notification settings - Fork 2.9k
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.
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(picker): new documentation pages for picker and picker-legacy #3321
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
||
<body> | ||
<ion-app> | ||
<ion-content> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Optional, but I think the following demo looks a bit nicer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Picker | Basic</title>
<link rel="stylesheet" href="../../../common.css" />
<script src="../../../common.js"></script>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@ionic/core@7.5.8-dev.11702398696.1ab62ea9/dist/ionic/ionic.esm.js"
></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@ionic/core@7.5.8-dev.11702398696.1ab62ea9/css/ionic.bundle.css"
/>
<style>
ion-modal {
--height: auto;
align-items: end;
}
ion-picker {
margin-bottom: var(--ion-safe-area-bottom);
}
</style>
</head>
<body>
<ion-app>
<ion-content>
<div class="container">
<ion-button id="open-modal">Open modal</ion-button>
<ion-modal trigger="open-modal" is-open="true">
<ion-toolbar>
<ion-buttons slot="start">
<ion-button onclick="modal.dismiss(null, 'cancel')">Cancel</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button onclick="modal.dismiss(currentValue, 'confirm')">Done</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-picker>
<ion-picker-column value="javascript">
<ion-picker-column-option value="" disabled="true">--</ion-picker-column-option>
<ion-picker-column-option value="javascript">Javascript</ion-picker-column-option>
<ion-picker-column-option value="typescript">Typescript</ion-picker-column-option>
<ion-picker-column-option value="rust">Rust</ion-picker-column-option>
<ion-picker-column-option value="c#">C#</ion-picker-column-option>
</ion-picker-column>
</ion-picker>
</ion-modal>
</div>
</ion-content>
</ion-app>
<script>
const modal = document.querySelector('ion-modal');
let currentValue = 'javascript';
modal.addEventListener('didDismiss', (event) => {
console.log('didDismiss', JSON.stringify(event.detail));
});
const pickerColumn = document.querySelector('ion-picker-column');
pickerColumn.addEventListener('ionChange', (event) => {
currentValue = event.detail.value;
});
</script>
</body>
</html>
Notable changes:
- Add bottom margin to the picker for safe area
- Used the "custom dialog" feature for modal to make the modal only as large as the content
- Removed the "initial-breakpoint" usage (I think this was left over from a previous attempt at using a sheet)
- Updated the modal style to align the modal to the bottom of the view
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Love it! Addressed here: 789540d
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good to go once the following changes are made. Great work!
This PR is based on the feature work here: ionic-team/ionic-framework#28689
What Changed
ion-picker
was moved toion-picker-legacy
.ion-picker
.ion-picker-internal
component has a new docs page ation-picker
.ion-picker
.ion-picker
ion-picker-column-option
to customize the appearance.ion-picker
in an overlay. Demonstrates how to pass the selected data back to the presenting component.Resources
New
ion-picker
docs: https://ionic-docs-git-sp-fw-5583-ionic1.vercel.app/docs/v8/api/pickerLegacy
ion-picker-legacy
docs: https://ionic-docs-git-sp-fw-5583-ionic1.vercel.app/docs/v8/api/picker-legacy