ionic-team / ionic-team/ionic-framework
feat: Set custom --opacity for disabled labels/inputs/select
- 主要言語
- TypeScript
- スター
- 52.7k
- フォーク
- 13.3k
- 平均マージ
- 1日 15時間
- マージ済み PR(30日)
- 51
説明
# Feature Request
**Ionic version:**
- [x] **4.x**
**Describe the Feature Request**
Availability to overwrite the default opacity of disabled form elements in the following scenarios:
1. When an `ion-input` or `ion-select` is disabled
1. When an `ion-label` is inside an `ion-item` with the class `item-interactive-disabled` (allow to overwrite label's opacity from parent)
Leave a comment if there might be any other scenario I missed.
**Describe Preferred Solution**
- Setting the value of the variable `--opacity` in the disabled `ion-item`, `ion-input` or `ion-select` (or another parent, e.g. `ion-list`) overwrites its default opacity
**Related Code**
`input.scss`:
```scss
// Change
.native-input[disabled] {
opacity: .4;
}
// To
.native-input[disabled] {
opacity: var(--opacity, .4);
}
```
`select.scss`:
```scss
// Change
:host(.select-disabled) {
opacity: .4;
pointer-events: none;
}
// To
:host(.select-disabled) {
opacity: var(--opacity, .4);
pointer-events: none;
}
```
`label.scss`:
```scss
// Change
:host-context(.item-interactive-disabled) {
cursor: default;
opacity: .3;
pointer-events: none;
}
// To
:host-context(.item-interactive-disabled) {
cursor: default;
opacity: var(--opacity, .3);
pointer-events: none;
}
```
**Additional Context**
I will submit the PR myself, if that's OK.
Related Issues: #17166, https://github.com/ionic-team/ionic/issues/16965#issuecomment-456422796
コントリビューションガイド
評価
この issue はまだ評価されていません。