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

fix(select): add and document custom properties

Browse Source 
references #14850
This commit is contained in:
Cam Wiegert
2018-08-21 16:43:23 -05:00
parent 9104850646
commit 88613ffae6
5 changed files with 53 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -73,6 +73,19 @@ Since select uses the alert, action sheet and popover interfaces, options can be
| `open` | |
## CSS Custom Properties
| Name | Description |
| --------------------- | ------------------------------------ |
| `--color` | Color of the select text |
| `--icon-color` | Color of the select icon |
| `--padding-bottom` | Bottom padding of the select |
| `--padding-end` | End padding of the select |
| `--padding-start` | Start padding of the select |
| `--padding-top` | Top padding of the select |
| `--placeholder-color` | Color of the select placeholder text |
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*

9
core/src/components/select/select.ios.scss
View File

@@ -5,18 +5,21 @@
// --------------------------------------------------
:host {
--color: #{$select-ios-text-color};
--icon-color: #{$select-ios-icon-color};
--padding-top: #{$select-ios-padding-top};
--padding-end: #{$select-ios-padding-end};
--padding-bottom: #{$select-ios-padding-bottom};
--padding-start: #{$select-ios-padding-start};
--placeholder-color: #{$select-ios-placeholder-color};
color: $select-ios-text-color;
color: var(--color);
font-family: $select-ios-font-family;
}
.select-placeholder {
color: $select-ios-placeholder-color;
color: var(--placeholder-color);
}
.select-icon {
@@ -39,7 +42,7 @@
border-right: 5px solid transparent;
border-left: 5px solid transparent;
color: $select-ios-icon-color;
color: var(--icon-color);
pointer-events: none;
}

9
core/src/components/select/select.md.scss
View File

@@ -5,18 +5,21 @@
// --------------------------------------------------
:host {
--color: #{$select-md-text-color};
--icon-color: #{$select-md-icon-color};
--padding-top: #{$select-md-padding-top};
--padding-end: #{$select-md-padding-end};
--padding-bottom: #{$select-md-padding-bottom};
--padding-start: #{$select-md-padding-start};
--placeholder-color: #{$select-md-placeholder-color};
color: $select-md-text-color;
color: var(--color);
font-family: $select-md-font-family;
}
.select-placeholder {
color: $select-md-placeholder-color;
color: var(--placeholder-color);
}
.select-md .item-select ion-label {
@@ -43,7 +46,7 @@
border-right: 5px solid transparent;
border-left: 5px solid transparent;
color: $select-md-icon-color;
color: var(--icon-color);
pointer-events: none;
}

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

@@ -4,6 +4,16 @@
// --------------------------------------------------
:host {
/**
* @prop --color: Color of the select text
* @prop --icon-color: Color of the select icon
* @prop --padding-top: Top padding of the select
* @prop --padding-end: End padding of the select
* @prop --padding-bottom: Bottom padding of the select
* @prop --padding-start: Start padding of the select
* @prop --placeholder-color: Color of the select placeholder text
*/
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
display: flex;

18
core/src/components/select/test/standalone/index.html
View File

@@ -59,5 +59,23 @@
<ion-select-option>1998</ion-select-option>
<ion-select-option>1999</ion-select-option>
</ion-select>
<ion-select class="custom" placeholder="Day">
<ion-select-option>Sunday</ion-select-option>
<ion-select-option>Monday</ion-select-option>
<ion-select-option>Tuesday</ion-select-option>
<ion-select-option>Wednesday</ion-select-option>
<ion-select-option>Thursday</ion-select-option>
<ion-select-option>Friday</ion-select-option>
<ion-select-option>Saturday</ion-select-option>
</ion-select>
<style>
.custom {
--color: crimson;
--icon-color: pink;
--placeholder-color: teal;
}
</style>
</body>
</html>