mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
refactor(components): consistent css variables for size (#16600)
Reviews the `--width` and `--height` variables in each component to either remove or add them based on need. - fixes a bug where the spinner color wasn't being set properly in loading - adds css variables for customizing background, color, some borders in overlays - fixes a bug where prefix, suffix are taking up too much width in picker closes #16097 references ionic-team/ionic-docs#228 BREAKING CHANGES ## Core Components Removes the `--width` and `--height` variables from the following components, in favor of CSS: - Button - FAB Button - Checkbox - Removes the `--width`/`--height` and adds a `--size` variable that is set on the width and height, allowing width and height to still be set and border-radius to still use it as a variable - Radio - Removes the `--width`/`--height` and `--inner-width`/`--inner-height` variables. Calculates inner values based on parent element size. ## Overlay Components The following components have all be converted to shadow (or scoped) and have CSS variables for width/height: - Action Sheet _(scoped)_ - Alert _(scoped)_ - Loading _(scoped)_ - Menu _(shadow)_ - Modal _(scoped)_ - Picker _(scoped)_ - Popover _(scoped)_ - Toast _(shadow)_ The above components will now have the following CSS variables for consistency among overlays: | Name | | ----------------- | | `--height` | | `--max-height` | | `--max-width` | | `--min-height` | | `--min-width` | | `--width` | If the component does not set the value, it will default to `auto`. ## Removed CSS Variables The following CSS properties have been removed: | Component | Property | Reason | | ---------------| --------------------| --------------------------------| | **Button** | `--height` | Use CSS instead | | **Button** | `--margin-bottom` | Use CSS instead | | **Button** | `--margin-end` | Use CSS instead | | **Button** | `--margin-start` | Use CSS instead | | **Button** | `--margin-top` | Use CSS instead | | **Button** | `--width` | Use CSS instead | | **Checkbox** | `--height` | Use CSS or `--size` | | **Checkbox** | `--width` | Use CSS or `--size` | | **FAB Button** | `--width` | Use CSS instead | | **FAB Button** | `--height` | Use CSS instead | | **FAB Button** | `--margin-bottom` | Use CSS instead | | **FAB Button** | `--margin-end` | Use CSS instead | | **FAB Button** | `--margin-start` | Use CSS instead | | **FAB Button** | `--margin-top | Use CSS instead | | **Menu** | `--width-small` | Use a media query and `--width` | | **Radio** | `--width` | Use CSS instead | | **Radio** | `--height` | Use CSS instead | | **Radio** | `--inner-height` | Calculated based on parent | | **Radio** | `--inner-width` | Calculated based on parent |
This commit is contained in:
Brandy Carney
@ -4,48 +4,47 @@
|
||||
// iOS Picker
|
||||
// --------------------------------------------------
|
||||
|
||||
.picker-ios .picker-wrapper {
|
||||
height: $picker-ios-height;
|
||||
:host {
|
||||
--background: #{$picker-ios-background-color};
|
||||
--border-width: #{1px 0 0};
|
||||
--border-color: #{$picker-ios-border-color};
|
||||
--height: #{$picker-ios-height};
|
||||
|
||||
border-top: 1px solid $picker-ios-border-color;
|
||||
|
||||
background: $picker-ios-background-color;
|
||||
color: $picker-ios-option-text-color;
|
||||
}
|
||||
|
||||
.picker-ios .picker-toolbar {
|
||||
.picker-toolbar {
|
||||
display: flex;
|
||||
|
||||
height: $picker-ios-toolbar-height;
|
||||
|
||||
border-bottom: $hairlines-width solid $picker-ios-border-color;
|
||||
|
||||
background: $picker-ios-toolbar-background-color;
|
||||
border-bottom: $hairlines-width solid var(--border-color);
|
||||
}
|
||||
|
||||
.picker-ios .picker-toolbar-button {
|
||||
.picker-toolbar-button {
|
||||
flex: 1;
|
||||
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.picker-ios .picker-toolbar-button:last-child .picker-button {
|
||||
.picker-toolbar-button:last-child .picker-button {
|
||||
font-weight: $picker-ios-button-strong-font-weight;
|
||||
}
|
||||
|
||||
.picker-ios .picker-toolbar-button:first-child {
|
||||
.picker-toolbar-button:first-child {
|
||||
font-weight: normal;
|
||||
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.picker-ios .picker-button,
|
||||
.picker-ios .picker-button.activated {
|
||||
.picker-button,
|
||||
.picker-button.activated {
|
||||
@include margin(0);
|
||||
@include padding($picker-ios-button-padding-top, $picker-ios-button-padding-end, $picker-ios-button-padding-bottom, $picker-ios-button-padding-start);
|
||||
|
||||
height: $picker-ios-button-height;
|
||||
|
||||
background: $picker-ios-button-background-color;
|
||||
background: transparent;
|
||||
color: $picker-ios-button-text-color;
|
||||
|
||||
font-size: $picker-ios-button-font-size;
|
||||
@ -56,49 +55,7 @@
|
||||
perspective: $picker-ios-column-perspective;
|
||||
}
|
||||
|
||||
.picker-ios .picker-col {
|
||||
@include padding($picker-ios-column-padding-top, $picker-ios-column-padding-end, $picker-ios-column-padding-bottom, $picker-ios-column-padding-start);
|
||||
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.picker-ios .picker-prefix,
|
||||
.picker-ios .picker-suffix,
|
||||
.picker-ios .picker-opts {
|
||||
top: $picker-ios-option-offset-y;
|
||||
|
||||
transform-style: preserve-3d;
|
||||
|
||||
color: $picker-ios-option-text-color;
|
||||
|
||||
font-size: $picker-ios-option-font-size;
|
||||
|
||||
line-height: $picker-ios-option-height;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.picker-ios .picker-opt {
|
||||
@include padding($picker-ios-option-padding-top, $picker-ios-option-padding-end, $picker-ios-option-padding-bottom, $picker-ios-option-padding-start);
|
||||
@include margin(0);
|
||||
@include transform-origin(center, center);
|
||||
|
||||
height: 46px;
|
||||
|
||||
transform-style: preserve-3d;
|
||||
|
||||
transition-timing-function: ease-out;
|
||||
|
||||
background: transparent;
|
||||
color: $picker-ios-option-text-color;
|
||||
|
||||
font-size: $picker-ios-option-font-size;
|
||||
|
||||
line-height: $picker-ios-option-height;
|
||||
backface-visibility: hidden;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.picker-ios .picker-above-highlight {
|
||||
.picker-above-highlight {
|
||||
@include position(0, null, null, 0);
|
||||
@include transform(translate3d(0, 0, 90px));
|
||||
|
||||
@ -108,16 +65,17 @@
|
||||
width: 100%;
|
||||
height: $picker-ios-option-offset-y + 4px;
|
||||
|
||||
border-bottom: 1px solid $picker-ios-border-color;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
|
||||
background: linear-gradient(to bottom,
|
||||
$picker-ios-top-background-color 20%,
|
||||
$picker-ios-bottom-background-color 100%);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
$picker-ios-top-background-color 20%,
|
||||
$picker-ios-bottom-background-color 100%);
|
||||
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.picker-ios .picker-below-highlight {
|
||||
.picker-below-highlight {
|
||||
@include position($picker-ios-option-offset-y + $picker-ios-option-height - 4, null, null, 0);
|
||||
@include transform(translate3d(0, 0, 90px));
|
||||
|
||||
@ -127,11 +85,12 @@
|
||||
width: 100%;
|
||||
height: $picker-ios-option-offset-y + $picker-ios-option-height;
|
||||
|
||||
border-top: 1px solid $picker-ios-border-color;
|
||||
border-top: 1px solid var(--border-color);
|
||||
|
||||
background: linear-gradient(to top,
|
||||
$picker-ios-top-background-color 30%,
|
||||
$picker-ios-bottom-background-color 100%);
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
$picker-ios-top-background-color 30%,
|
||||
$picker-ios-bottom-background-color 100%);
|
||||
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
@ -13,13 +13,13 @@ $picker-ios-border-color: $item-ios-border-color !defaul
|
||||
$picker-ios-background-color: $background-color !default;
|
||||
|
||||
/// @prop - Top Background Color of the picker wrapper gradient
|
||||
$picker-ios-top-background-color: $picker-ios-background-color !default;
|
||||
$picker-ios-top-background-color: var(--background, $picker-ios-background-color) !default;
|
||||
|
||||
/// @prop - Bottom Background Color alpha of the picker wrapper gradient
|
||||
$picker-ios-bottom-background-color-alpha: .8 !default;
|
||||
|
||||
/// @prop - Bottom Background Color of the picker wrapper gradient
|
||||
$picker-ios-bottom-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $picker-ios-bottom-background-color-alpha) !default;
|
||||
$picker-ios-bottom-background-color: rgba(var(--background-rgb, var(--ion-background-color-rgb, $background-color-rgb)), $picker-ios-bottom-background-color-alpha) !default;
|
||||
|
||||
/// @prop - Height of the picker toolbar
|
||||
$picker-ios-toolbar-height: 44px !default;
|
||||
@ -33,9 +33,6 @@ $picker-ios-button-height: $picker-ios-toolbar-height !de
|
||||
/// @prop - Text color of the picker button
|
||||
$picker-ios-button-text-color: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Background of the picker button
|
||||
$picker-ios-button-background-color: transparent !default;
|
||||
|
||||
/// @prop - Font size of the picker button
|
||||
$picker-ios-button-font-size: 16px !default;
|
||||
|
||||
|
||||
@ -4,26 +4,25 @@
|
||||
// Material Design Picker
|
||||
// --------------------------------------------------
|
||||
|
||||
.picker-md .picker-wrapper {
|
||||
height: $picker-md-height;
|
||||
:host {
|
||||
--background: #{$picker-md-background-color};
|
||||
--border-width: #{$hairlines-width 0 0};
|
||||
--border-color: #{$picker-md-border-color};
|
||||
--height: #{$picker-md-height};
|
||||
|
||||
border-top: $hairlines-width solid $picker-md-border-color;
|
||||
|
||||
background: $picker-md-background-color;
|
||||
color: $picker-md-option-text-color;
|
||||
}
|
||||
|
||||
.picker-md .picker-toolbar {
|
||||
.picker-toolbar {
|
||||
display: flex;
|
||||
|
||||
justify-content: flex-end;
|
||||
|
||||
height: $picker-md-toolbar-height;
|
||||
|
||||
background: $picker-md-toolbar-background-color;
|
||||
}
|
||||
|
||||
.picker-md .picker-button,
|
||||
.picker-md .picker-button.activated {
|
||||
.picker-button,
|
||||
.picker-button.activated {
|
||||
@include margin(0);
|
||||
@include padding(0, 1.1em);
|
||||
|
||||
@ -40,58 +39,12 @@
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.picker-md .picker-columns {
|
||||
.picker-columns {
|
||||
height: $picker-md-height - $picker-md-toolbar-height;
|
||||
perspective: 1800px;
|
||||
}
|
||||
|
||||
.picker-md .picker-col {
|
||||
@include padding($picker-md-column-padding-top, $picker-md-column-padding-end, $picker-md-column-padding-bottom, $picker-md-column-padding-start);
|
||||
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.picker-md .picker-prefix,
|
||||
.picker-md .picker-suffix,
|
||||
.picker-md .picker-opts {
|
||||
top: $picker-md-option-offset-y;
|
||||
|
||||
transform-style: preserve-3d;
|
||||
|
||||
color: $picker-md-option-text-color;
|
||||
|
||||
font-size: $picker-md-option-font-size;
|
||||
|
||||
line-height: $picker-md-option-height;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
.picker-md .picker-opt {
|
||||
@include margin(0);
|
||||
@include padding($picker-md-option-padding-top, $picker-md-option-padding-end, $picker-md-option-padding-bottom, $picker-md-option-padding-start);
|
||||
|
||||
height: 43px;
|
||||
|
||||
transition-timing-function: ease-out;
|
||||
|
||||
background: transparent;
|
||||
color: $picker-md-option-text-color;
|
||||
|
||||
font-size: $picker-md-option-font-size;
|
||||
|
||||
line-height: $picker-md-option-height;
|
||||
backface-visibility: hidden;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.picker-md .picker-prefix,
|
||||
.picker-md .picker-suffix,
|
||||
.picker-md .picker-opt.picker-opt-selected {
|
||||
color: $picker-md-option-selected-color;
|
||||
}
|
||||
|
||||
.picker-md .picker-above-highlight {
|
||||
.picker-above-highlight {
|
||||
@include position(0, null, null, 0);
|
||||
@include transform(translate3d(0, 0, 90px));
|
||||
|
||||
@ -102,14 +55,15 @@
|
||||
|
||||
border-bottom: 1px solid $picker-md-border-color;
|
||||
|
||||
background: linear-gradient(to bottom,
|
||||
$picker-md-top-background-color 20%,
|
||||
$picker-md-bottom-background-color 100%);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
$picker-md-top-background-color 20%,
|
||||
$picker-md-bottom-background-color 100%);
|
||||
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.picker-md .picker-below-highlight {
|
||||
.picker-below-highlight {
|
||||
@include position($picker-md-option-offset-y + $picker-md-option-height - 4, null, null, 0);
|
||||
@include transform(translate3d(0, 0, 90px));
|
||||
|
||||
@ -120,9 +74,10 @@
|
||||
|
||||
border-top: 1px solid $picker-md-border-color;
|
||||
|
||||
background: linear-gradient(to top,
|
||||
$picker-md-top-background-color 30%,
|
||||
$picker-md-bottom-background-color 100%);
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
$picker-md-top-background-color 30%,
|
||||
$picker-md-bottom-background-color 100%);
|
||||
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
@ -3,15 +3,40 @@
|
||||
// Picker
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-picker {
|
||||
:host {
|
||||
/**
|
||||
* @prop --background: Background of the picker
|
||||
* @prop --background-rgb: Background of the picker in rgb format
|
||||
*
|
||||
* @prop --border-radius: Border radius of the picker
|
||||
* @prop --border-color: Border color of the picker
|
||||
* @prop --border-width: Border width of the picker
|
||||
* @prop --border-style: Border style of the picker
|
||||
*
|
||||
* @prop --min-width: Minimum width of the picker
|
||||
* @prop --width: Width of the picker
|
||||
* @prop --max-width: Maximum width of the picker
|
||||
*
|
||||
* @prop --min-height: Minimum height of the picker
|
||||
* @prop --height: Height of the picker
|
||||
* @prop --max-height: Maximum height of the picker
|
||||
*/
|
||||
--border-radius: 0;
|
||||
--border-style: solid;
|
||||
--min-width: auto;
|
||||
--width: #{$picker-width};
|
||||
--max-width: #{$picker-max-width};
|
||||
--min-height: auto;
|
||||
--max-height: auto;
|
||||
|
||||
@include font-smoothing();
|
||||
@include position(0, null, null, 0);
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
||||
width: $picker-width;
|
||||
height: $picker-width;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
font-family: $font-family-base;
|
||||
|
||||
@ -20,14 +45,8 @@ ion-picker {
|
||||
z-index: $z-index-overlay;
|
||||
}
|
||||
|
||||
.picker-toolbar {
|
||||
width: 100%;
|
||||
|
||||
contain: strict;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.picker-wrapper {
|
||||
@include border-radius(var(--border-radius));
|
||||
@include position(null, 0, 0, 0);
|
||||
@include margin(auto);
|
||||
@include transform(translate3d(0, 100%, 0));
|
||||
@ -37,14 +56,53 @@ ion-picker {
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
width: $picker-width;
|
||||
max-width: $picker-max-width;
|
||||
width: var(--width);
|
||||
min-width: var(--min-width);
|
||||
max-width: var(--max-width);
|
||||
|
||||
height: var(--height);
|
||||
min-height: var(--min-height);
|
||||
max-height: var(--max-height);
|
||||
|
||||
border-width: var(--border-width);
|
||||
border-style: var(--border-style);
|
||||
border-color: var(--border-color);
|
||||
|
||||
background: var(--background);
|
||||
|
||||
contain: strict;
|
||||
overflow: hidden;
|
||||
z-index: $z-index-overlay-wrapper;
|
||||
}
|
||||
|
||||
// Picker Toolbar and Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
.picker-toolbar {
|
||||
width: 100%;
|
||||
|
||||
background: transparent;
|
||||
|
||||
contain: strict;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.picker-button {
|
||||
border: 0;
|
||||
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.picker-button {
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Picker Columns and Highlight
|
||||
// --------------------------------------------------
|
||||
|
||||
.picker-columns {
|
||||
@include rtl() {
|
||||
// Date is the same format in both directions
|
||||
@ -62,118 +120,8 @@ ion-picker {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.picker-col {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
|
||||
height: 100%;
|
||||
box-sizing: content-box;
|
||||
|
||||
contain: content;
|
||||
}
|
||||
|
||||
.picker-opts {
|
||||
position: relative;
|
||||
|
||||
flex: 1;
|
||||
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.picker-prefix {
|
||||
position: relative;
|
||||
|
||||
flex: 2;
|
||||
|
||||
min-width: 45%;
|
||||
max-width: 50%;
|
||||
|
||||
text-align: end;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.picker-suffix {
|
||||
position: relative;
|
||||
|
||||
flex: 2;
|
||||
|
||||
min-width: 45%;
|
||||
max-width: 50%;
|
||||
|
||||
text-align: start;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// contain property is supported by Chrome
|
||||
.picker-opt {
|
||||
@include position(0, null, null, 0);
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
||||
width: 100%;
|
||||
|
||||
border: 0;
|
||||
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
contain: strict;
|
||||
overflow: hidden;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.picker-opt.picker-opt-disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.picker-opt-disabled {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.picker-opts-left {
|
||||
@include ltr() {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.picker-opts-right {
|
||||
@include ltr() {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@include rtl() {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.picker-above-highlight,
|
||||
.picker-below-highlight {
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.picker-button {
|
||||
border: 0;
|
||||
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.picker-opt,
|
||||
.picker-button {
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,7 +12,8 @@ import { iosLeaveAnimation } from './animations/ios.leave';
|
||||
styleUrls: {
|
||||
ios: 'picker.ios.scss',
|
||||
md: 'picker.md.scss'
|
||||
}
|
||||
},
|
||||
scoped: true
|
||||
})
|
||||
export class Picker implements ComponentInterface, OverlayInterface {
|
||||
private durationTimeout: any;
|
||||
@ -137,13 +138,7 @@ export class Picker implements ComponentInterface, OverlayInterface {
|
||||
*/
|
||||
@Method()
|
||||
async present(): Promise<void> {
|
||||
await present(
|
||||
this,
|
||||
'pickerEnter',
|
||||
iosEnterAnimation,
|
||||
iosEnterAnimation,
|
||||
undefined
|
||||
);
|
||||
await present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
|
||||
|
||||
if (this.duration > 0) {
|
||||
this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
|
||||
@ -158,14 +153,7 @@ export class Picker implements ComponentInterface, OverlayInterface {
|
||||
if (this.durationTimeout) {
|
||||
clearTimeout(this.durationTimeout);
|
||||
}
|
||||
return dismiss(
|
||||
this,
|
||||
data,
|
||||
role,
|
||||
'pickerLeave',
|
||||
iosLeaveAnimation,
|
||||
iosLeaveAnimation
|
||||
);
|
||||
return dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -249,7 +237,6 @@ export class Picker implements ComponentInterface, OverlayInterface {
|
||||
tappable={this.backdropDismiss}
|
||||
>
|
||||
</ion-backdrop>,
|
||||
|
||||
<div class="picker-wrapper" role="dialog">
|
||||
<div class="picker-toolbar">
|
||||
{this.buttons.map(b => (
|
||||
@ -266,9 +253,11 @@ export class Picker implements ComponentInterface, OverlayInterface {
|
||||
</div>
|
||||
|
||||
<div class="picker-columns">
|
||||
<div class="picker-above-highlight" />
|
||||
{this.columns.map(c => <ion-picker-column col={c} />)}
|
||||
<div class="picker-below-highlight" />
|
||||
<div class="picker-above-highlight"></div>
|
||||
{this.columns.map(c =>
|
||||
<ion-picker-column col={c}></ion-picker-column>
|
||||
)}
|
||||
<div class="picker-below-highlight"></div>
|
||||
</div>
|
||||
</div>
|
||||
];
|
||||
|
||||
@ -102,6 +102,24 @@ Type: `Promise<void>`
|
||||
|
||||
|
||||
|
||||
## CSS Custom Properties
|
||||
|
||||
| Name | Description |
|
||||
| ------------------ | -------------------------------------- |
|
||||
| `--background` | Background of the picker |
|
||||
| `--background-rgb` | Background of the picker in rgb format |
|
||||
| `--border-color` | Border color of the picker |
|
||||
| `--border-radius` | Border radius of the picker |
|
||||
| `--border-style` | Border style of the picker |
|
||||
| `--border-width` | Border width of the picker |
|
||||
| `--height` | Height of the picker |
|
||||
| `--max-height` | Maximum height of the picker |
|
||||
| `--max-width` | Maximum width of the picker |
|
||||
| `--min-height` | Minimum height of the picker |
|
||||
| `--min-width` | Minimum width of the picker |
|
||||
| `--width` | Width of the picker |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
120
core/src/components/picker/test/basic/index.html
Normal file
120
core/src/components/picker/test/basic/index.html
Normal file
@ -0,0 +1,120 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Picker - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Picker - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
<ion-button id="basic" expand="block" onclick="presentPicker()">Show Picker</ion-button>
|
||||
<ion-button id="custom" expand="block" onclick="presentPicker('my-custom-class')">Show Custom Picker</ion-button>
|
||||
</ion-content>
|
||||
|
||||
</ion-app>
|
||||
<ion-picker-controller></ion-picker-controller>
|
||||
|
||||
<style>
|
||||
.my-custom-class {
|
||||
--width: 200px;
|
||||
--height: 50%;
|
||||
|
||||
--background: #272727;
|
||||
--background-rgb: 39, 39, 39;
|
||||
--border-width: 2px;
|
||||
--border-color: #000000;
|
||||
--border-radius: 16px 16px 0 0;
|
||||
|
||||
color: #d6d6d6;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
async function presentPicker(customClass) {
|
||||
const pickerController = document.querySelector('ion-picker-controller');
|
||||
await pickerController.componentOnReady();
|
||||
const pickerElement = await pickerController.create({
|
||||
buttons: [{
|
||||
text: 'Save',
|
||||
handler: () => console.log('Clicked Save!')
|
||||
}, {
|
||||
text: 'Log',
|
||||
handler: (val) => {
|
||||
console.log('Clicked Log. Do not Dismiss.', val);
|
||||
return false;
|
||||
}
|
||||
}],
|
||||
columns: [{
|
||||
name: 'hours',
|
||||
prefix: 'total',
|
||||
suffix: 'hours',
|
||||
options: [{
|
||||
text: '1',
|
||||
value: '01'
|
||||
},
|
||||
{
|
||||
text: '2',
|
||||
value: '02'
|
||||
},
|
||||
{
|
||||
text: '3',
|
||||
value: '03'
|
||||
},
|
||||
{
|
||||
text: '4',
|
||||
value: '04'
|
||||
},
|
||||
{
|
||||
text: '5',
|
||||
value: '05'
|
||||
},
|
||||
{
|
||||
text: '6',
|
||||
value: '06'
|
||||
},
|
||||
{
|
||||
text: '7',
|
||||
value: '07'
|
||||
},
|
||||
{
|
||||
text: '8',
|
||||
value: '08'
|
||||
},
|
||||
{
|
||||
text: '9',
|
||||
value: '09'
|
||||
},
|
||||
{
|
||||
text: '10',
|
||||
value: '10'
|
||||
},
|
||||
{
|
||||
text: '11',
|
||||
value: '11'
|
||||
},
|
||||
{
|
||||
text: '12',
|
||||
value: '12'
|
||||
}]
|
||||
}],
|
||||
cssClass: customClass
|
||||
});
|
||||
return await pickerElement.present();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user