javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 10:41:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(select): add --placeholder-opacity and --placeholder-color, expose shadow parts (#19893)

Browse Source 
resolves #17446
This commit is contained in:
Liam DeBeasi
2019-11-11 12:49:10 -05:00
committed by GitHub
parent 1a8b7a4559
commit bef0f53d0d
5 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/api.txt
View File

@ -1038,6 +1038,8 @@ ion-select,css-prop,--padding-bottom
ion-select,css-prop,--padding-end
ion-select,css-prop,--padding-start
ion-select,css-prop,--padding-top
ion-select,css-prop,--placeholder-color
ion-select,css-prop,--placeholder-opacity
ion-select-option,shadow
ion-select-option,prop,disabled,boolean,false,false,false

14
core/src/components/select/readme.md
View File

@ -793,12 +793,14 @@ Type: `Promise<any>`
## CSS Custom Properties
| Name | Description |
| ------------------ | --------------------------------------------------------------------------------------------------------- |
| `--padding-bottom` | Bottom padding of the select |
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select |
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select |
| `--padding-top` | Top padding of the select |
| Name | Description |
| ----------------------- | --------------------------------------------------------------------------------------------------------- |
| `--padding-bottom` | Bottom padding of the select |
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select |
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select |
| `--padding-top` | Top padding of the select |
| `--placeholder-color` | Color of the select placeholder text |
| `--placeholder-opacity` | Opacity of the select placeholder text |
----------------------------------------------

10
core/src/components/select/select.scss
View File

@ -9,7 +9,13 @@
* @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select
* @prop --padding-bottom: Bottom padding of the select
* @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select
*
* @prop --placeholder-color: Color of the select placeholder text
* @prop --placeholder-opacity: Opacity of the select placeholder text
*/
--placeholder-color: currentColor;
--placeholder-opacity: 0.33;
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
display: flex;
@ -37,9 +43,9 @@
}
.select-placeholder {
color: currentColor;
color: var(--placeholder-color);
opacity: .33;
opacity: var(--placeholder-opacity);
}
button {

4
core/src/components/select/select.tsx
View File

@ -471,10 +471,10 @@ export class Select implements ComponentInterface {
'select-disabled': disabled,
}}
>
<div class={selectTextClasses}>
<div class={selectTextClasses} part="text">
{selectText}
</div>
<div class="select-icon" role="presentation">
<div class="select-icon" role="presentation" part="icon">
<div class="select-icon-inner"></div>
</div>
<button

5
core/src/components/select/test/basic/index.html
View File

@ -26,7 +26,7 @@
<ion-item>
<ion-label>Gender</ion-label>
<ion-select id="gender" placeholder="Select One">
<ion-select id="gender" placeholder="Select One" class="custom-select">
<ion-select-option value="fn">Female</ion-select-option>
<ion-select-option value="ml">Male</ion-select-option>
</ion-select>
@ -286,6 +286,9 @@
.outer-content {
--background: #f2f2f2;
}
.custom-select {
--placeholder-opacity: 0.5;
}
</style>
<script>