Open felipefialho opened 1 year ago
Thanks for the report. I talked with the team, and this is an experience we'd like to improve. color
is not designed to cascade the same way mode
is, but we'd like to explore adding a color
property to components like ion-alert
and ion-action-sheet
so you can easily customize the theme. For ion-select
, you'd be able to customize the theme in the interfaceOptions
property.
@liamdebeasi Thank you for your prompt response.
I would like to inquire about customizing the theme color of the ion-checkbox
component using the interfaceOptions
property. I attempted to achieve this customization, but unfortunately, I couldn't find any examples or documentation regarding the specific usage of interfaceOptions
for customizing the theme color of ion-checkbox
.
Could you please provide some guidance or examples on how to customize the theme color of ion-checkbox
using the interfaceOptions
property? I appreciate any assistance you can offer in this matter.
We do not expose that customization option as a property. Though the proposed feature here would let you customize all checkboxes, radios, buttons, etc using the color
property.
ion-alert
is a scoped component, so you are also able to style the checkboxes directly using CSS as workaround.
Example:
ion-alert.my-custom-class .alert-checkbox-icon {
border-color: green;
background: green;
}
Thank you for your response, @liamdebeasi.
I have successfully customized the theme color of the ion-checkbox
component using the interfaceOptions property. By utilizing the cssClass
interface available in components like ion-alert
, ion-action-sheet
and ion-popover
, I was able to add a color class to achieve the desired customization.
For example, in my code snippet, I used the interfaceOptions property in the IonSelect component to specify a custom color class based on the color variable:
<IonSelect
label="Popover"
interfaceOptions={{
cssClass: `ion-select-color-${color}`,
}}
interface="popover"
placeholder="Select One"
>
</IonSelect>
So I just used the global style to change the color of variables
.select-popover {
&.ion-select-color-primary {
.item-checkbox-checked {
--color: var(--ion-color-primary);
}
ion-checkbox {
--checkbox-background-checked: var(--ion-color-primary);
--border-color-checked: var(--ion-color-primary);
}
}
&.ion-select-color-secondary {
.item-checkbox-checked {
--color: var(--ion-color-secondary);
}
ion-checkbox {
--checkbox-background-checked: var(--ion-color-secondary);
--border-color-checked: var(--ion-color-secondary);
}
}
}
By modifying these global styles, I was able to customize the color of the ion-checkbox component within the specified ion-select context.
I hope this explanation helps clarify the customization process I followed. If you have any further suggestions or recommendations, please let me know.
Thank you!
Hi, these are my data. I think I have a problem with the ionic display. Ionic CLI: Version 7.1.1. The Ionic CLI is the command-line interface for Ionic development. NodeJS: Version v16.14.0. Node.js is a JavaScript runtime environment. npm: Version 9.2.0. npm is the package manager for Node.js. OS: Windows 10. Indicates the operating system you're using. native-run: Version 1.7.2. It is a utility used to run native platform builds. cordova-res: Version 0.15.4. A utility for generating Cordova resources. Capacitor CLI: Version 5.0.4. Capacitor CLI is the command-line interface for Capacitor, a cross-platform app runtime. @capacitor/core: Version 5.0.4. Part of Capacitor, it provides the core functionality. @capacitor/ios: Version 5.0.4. A Capacitor plugin for iOS platform support. @capacitor/android: Version 5.0.4. A Capacitor plugin for Android platform support. Ionic Framework: Version @ionic/react 7.0.9. The Ionic Framework is used for building cross-platform mobile applications using web technologies.
@AlonaLaskar Please ask your debugging question on the Ionic Forums. We use this GitHub tracker for bug reports and feature requests.
Is there any solution of this issue. I am not able to solve this color issue in select option.
`
<ion-select-option value="Science">Science</ion-select-option>
<ion-select-option value="English">English</ion-select-option>
</ion-select>`
Thank you for your response, @liamdebeasi.
I have successfully customized the theme color of the
ion-checkbox
component using the interfaceOptions property. By utilizing thecssClass
interface available in components likeion-alert
,ion-action-sheet
andion-popover
, I was able to add a color class to achieve the desired customization.For example, in my code snippet, I used the interfaceOptions property in the IonSelect component to specify a custom color class based on the color variable:
<IonSelect label="Popover" interfaceOptions={{ cssClass: `ion-select-color-${color}`, }} interface="popover" placeholder="Select One" > </IonSelect>
So I just used the global style to change the color of variables
.select-popover { &.ion-select-color-primary { .item-checkbox-checked { --color: var(--ion-color-primary); } ion-checkbox { --checkbox-background-checked: var(--ion-color-primary); --border-color-checked: var(--ion-color-primary); } } &.ion-select-color-secondary { .item-checkbox-checked { --color: var(--ion-color-secondary); } ion-checkbox { --checkbox-background-checked: var(--ion-color-secondary); --border-color-checked: var(--ion-color-secondary); } } }
By modifying these global styles, I was able to customize the color of the ion-checkbox component within the specified ion-select context.
I hope this explanation helps clarify the customization process I followed. If you have any further suggestions or recommendations, please let me know.
Thank you!
I still dont understand how you resolve this because in first issue you posted with multiple option select that is the main problem and then you posted resolve but there is no multiple option select. If you have you github link to see the project how you resolved , please help me.
@SE-Ab These classes that I've stylized are the default for any checkbox
, so don't need to specify if is multiple or not
You can check the complete project working in this repository
Prerequisites
Ionic Framework Version
v7.x
Current Behavior
When using
ion-select
withcolor='secondary'
, theion-checkbox
andion-item
components inside theion-select
still use the defaultcolor='primary'
.Expected Behavior
ion-checkbox
andion-item
components insideion-select
should inherit the color property defined in the parent ion-select component.Steps to Reproduce
color
ofion-select
tosecondary
multiple
Code Reproduction URL
https://felipefialho.github.io/select-with-multiple/
Ionic Info
Additional Information
No response