ionic-team / ionic-team/ionic-framework

feat: add CSS variables or shadow part for customizing toggle on/off label color

Ouverte
#26,021 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
package: core type: feature request
Langage dominant
TypeScript
Étoiles
52.7k
Forks
13.3k
Merge moyen
1 j 14 h
PR mergées (30 j)
50

Description

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.

### Describe the Feature Request

The toggle component in `ios` currently has no way to style the on/off label colors except for by customizing `--ion-color-dark` or `--ion-color-contrast`. See the following code:

https://github.com/ionic-team/ionic-framework/blob/597bec753412758516e69725a89f57970fbb6f6e/core/src/components/toggle/toggle.ios.scss#L90
https://github.com/ionic-team/ionic-framework/blob/597bec753412758516e69725a89f57970fbb6f6e/core/src/components/toggle/toggle.ios.scss#L108

I think we should avoid having users customize the Ionic colors on a per-component basis.

### Describe the Use Case

If you customize the toggle by using the following:

```html

```

```css
ion-toggle {
--background: #000;
--background-checked: #f3e895;

--handle-background: #f3e895;
--handle-background-checked: #000;
}
```

You are not able to see the on/off labels in light mode. Here is a demo: https://stackblitz.com/edit/suseoe-jzo3g2?file=index.html

### Describe Preferred Solution

I believe we should either add CSS variables for the color & color-checked state or we should expose it as a shadow part which would also allow users to customize the size of the labels. As it is right now they can't change the `width` or `height` either.

### Describe Alternatives

_No response_

### Related Code

https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/toggle/toggle.ios.scss#L58-L118

### Additional Information

_No response_

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par core/src/components/toggle/toggle.ios.scss, en particulier les lignes référencées et la plage plus large autour des lignes 58-118. Examinez comment le toggle iOS rend ses libellés activé/désactivé et déterminez si des variables CSS ou une shadow part permettent au mieux d’exposer leur couleur et leurs dimensions. C’est terminé lorsque les utilisateurs peuvent personnaliser la couleur et les dimensions des libellés sans remplacer les couleurs globales d’Ionic.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
css, typescript
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.