ionic-team / ionic-team/ionic-framework

feat: Set custom --opacity for disabled labels/inputs/select

未关闭
#18,514 2 条评论 5 个 reaction 已指派 0 人 在 GitHub 查看
package: core type: feature request
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
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

贡献指南

打开贡献指南

调研方向

Read input.scss, select.scss, and label.scss first, then inspect how disabled ion-input, ion-select, and ion-label styles are applied. The work is complete when each listed disabled form element accepts a custom --opacity value while retaining its current default opacity and pointer or cursor behavior.

由索引模型根据 Issue 内容生成。

评估

技术栈
scss
领域
frontend
Issue 类型
功能
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
描述清楚
新手友好度
42/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。