javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 18:54:11 +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-end
ion-select,css-prop,--padding-start ion-select,css-prop,--padding-start
ion-select,css-prop,--padding-top 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,shadow
ion-select-option,prop,disabled,boolean,false,false,false ion-select-option,prop,disabled,boolean,false,false,false

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

@ -794,11 +794,13 @@ Type: `Promise<any>`
## CSS Custom Properties ## CSS Custom Properties
| Name | Description | | Name | Description |
| ------------------ | --------------------------------------------------------------------------------------------------------- | | ----------------------- | --------------------------------------------------------------------------------------------------------- |
| `--padding-bottom` | Bottom padding of the select | | `--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-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-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 | | `--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-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-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 --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)); @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
display: flex; display: flex;
@ -37,9 +43,9 @@
} }
.select-placeholder { .select-placeholder {
color: currentColor; color: var(--placeholder-color);
opacity: .33; opacity: var(--placeholder-opacity);
} }
button { button {

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

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

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

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