mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 08:09:32 +08:00
cd5c099dd3
Issue number: resolves #24905, resolves #26840, resolves #15710 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The current picker is only displayed as an overlay which makes it impossible to use inline with the rest of the application. Additionally, there are several bugs and missing features. For example, it is impossible to know when the value of the picker column has changed using public APIs. This is valuable for updating other columns in response to that data. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Introduces `ion-picker` as an inline wheel picker component. The overlay picker is still available using `ion-picker-legacy`. - The implementation of this component resolves linked bugs. It also resolves linked features by exposing an `ionChange` event for developers to listen for. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev-build: `7.5.8-dev.11702398696.1ab62ea9` --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Shawn Taylor <shawn@ionic.io> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com> Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com> Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
102 lines
1.8 KiB
SCSS
102 lines
1.8 KiB
SCSS
@import "./picker.vars";
|
|
|
|
// Picker
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
/**
|
|
* @prop --highlight-background: Background of the picker highlight for the selected item
|
|
* @prop --highlight-border-radius: Border radius of the picker highlight for the selected item
|
|
*
|
|
* @prop --fade-background-rgb: Background of the gradient covering non-selected items in rgb format
|
|
*/
|
|
|
|
display: flex;
|
|
|
|
position: relative;
|
|
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
width: 100%;
|
|
height: 200px;
|
|
|
|
/**
|
|
* Picker columns should display
|
|
* in the order in which developers
|
|
* added them and should ignore
|
|
* LTR vs RTL directions.
|
|
*/
|
|
direction: ltr;
|
|
|
|
/**
|
|
* This is required otherwise the
|
|
* highlight will appear behind
|
|
* the picker when used inline.
|
|
*/
|
|
z-index: 0;
|
|
}
|
|
|
|
:host .picker-before,
|
|
:host .picker-after {
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
/**
|
|
* The transform and z-index
|
|
* are needed for WebKit otherwise
|
|
* the fade will appear underneath the picker.
|
|
*/
|
|
transform: translateZ(0);
|
|
|
|
z-index: 1;
|
|
|
|
pointer-events: none;
|
|
}
|
|
|
|
:host .picker-before {
|
|
@include position(0, null, null, 0);
|
|
|
|
height: 83px;
|
|
}
|
|
|
|
:host .picker-after {
|
|
@include position(116px, null, null, 0);
|
|
|
|
height: 84px;
|
|
}
|
|
|
|
:host .picker-highlight {
|
|
@include border-radius(var(--highlight-border-radius, 8px));
|
|
@include position(50%, 0, 0, 0);
|
|
@include margin(0, auto, 0, auto);
|
|
|
|
position: absolute;
|
|
|
|
width: calc(100% - 16px);
|
|
height: 34px;
|
|
|
|
transform: translateY(-50%);
|
|
|
|
background: var(--highlight-background);
|
|
|
|
z-index: -1;
|
|
}
|
|
|
|
:host input {
|
|
@include visually-hidden();
|
|
}
|
|
|
|
:host ::slotted(ion-picker-column:first-of-type) {
|
|
text-align: start;
|
|
}
|
|
|
|
:host ::slotted(ion-picker-column:last-of-type) {
|
|
text-align: end;
|
|
}
|
|
|
|
:host ::slotted(ion-picker-column:only-child) {
|
|
text-align: center;
|
|
}
|