Hi there
In one of my MashPlugIns components, I was asked if the components were theme-able. I have never really explored this in detail as some were just easy to theme using the css files provided.
I took a look. One of the beautiful things about ABMaterial is the ability to create one's own components etc and you can theme these also, on creation of the component.
As you might be aware, ABMaterial uses a color scheme that is made up of intensity and colors to define your color hex. This means you can use any color hex you want on your component, i.e. a combination of the color and intensity gives out the hex color to be applied.
For example, when you pass ABM.COLOR_PURPLE and ABM.INTENSITY_DARKEN3 when creating your theme, the ABMaterial engine will give you a hex color of #6a1b9a".
How can I then theme my Custom Component?
The Initialize methods of the component has a compulsory call that you need to make.
This extra property named css , after the ID, is where the magic happens, mostly its just blank, but you can pass it your own css and then your control will be themed depending on the colors you passed.
So I played around with some MashPlugInThings as in most cases I was just adding my css on BuildPage for the component.
This was my code...
That's rather confusing isn't it. Ok let me break down.
What I'm creating is basically
Etc etc, you can use the StringBuilder method to create your css. I'm doing it like this because anything can change and I didnt want to limit myself to fixing my StringBuilder code.
As you have noted above, there are different css classes that will be applied to the component based on where each class is called.
Now, when you are done, just pass these classed to
See this MashRangeSlider here compared to the themed one..
Do you like this tutorial?
In one of my MashPlugIns components, I was asked if the components were theme-able. I have never really explored this in detail as some were just easy to theme using the css files provided.
I took a look. One of the beautiful things about ABMaterial is the ability to create one's own components etc and you can theme these also, on creation of the component.
As you might be aware, ABMaterial uses a color scheme that is made up of intensity and colors to define your color hex. This means you can use any color hex you want on your component, i.e. a combination of the color and intensity gives out the hex color to be applied.
For example, when you pass ABM.COLOR_PURPLE and ABM.INTENSITY_DARKEN3 when creating your theme, the ABMaterial engine will give you a hex color of #6a1b9a".
How can I then theme my Custom Component?
The Initialize methods of the component has a compulsory call that you need to make.
B4X:
ABMComp.Initialize("ABMComp", Me, InternalPage, ID,"")This extra property named css , after the ID, is where the magic happens, mostly its just blank, but you can pass it your own css and then your control will be themed depending on the colors you passed.
So I played around with some MashPlugInThings as in most cases I was just adding my css on BuildPage for the component.
This was my code...
B4X:
Dim style As HTMLElement
style = style.CreateSTYLE(".irs-bar")
style.ApplyStyle("border-top:1px solid " & sbackground)
style.ApplyStyle("border-bottom:1px solid " & sbackground)
style.ApplyStyle("background:" & sbackground)
Themes.Add(style.BuildStyleClass)
style = style.CreateSTYLE(".irs-bar-edge")
style.ApplyStyle("border-top:1px solid " & sbackground)
style.ApplyStyle("background:" & sbackground)
Themes.Add(style.BuildStyleClass)
style = style.CreateSTYLE(".irs-from")
style.ApplyStyle("background:" & sbackground)
Themes.Add(style.BuildStyleClass)
style = style.CreateSTYLE(".irs-to")
style.ApplyStyle("background:" & sbackground)
Themes.Add(style.BuildStyleClass)
style = style.CreateSTYLE(".irs-single")
style.ApplyStyle("background:" & sbackground)
Themes.Add(style.BuildStyleClass)
style = style.CreateSTYLE(".irs-grid-pol")
style.ApplyStyle("background:" & sbackground)
Themes.Add(style.BuildStyleClass)
sTheme = style.MvFromList(Themes,CRLF)That's rather confusing isn't it. Ok let me break down.
What I'm creating is basically
B4X:
.irs-bar {border-top:1px solid #34567;border-bottom:1px solid #3456}Etc etc, you can use the StringBuilder method to create your css. I'm doing it like this because anything can change and I didnt want to limit myself to fixing my StringBuilder code.
As you have noted above, there are different css classes that will be applied to the component based on where each class is called.
Now, when you are done, just pass these classed to
B4X:
ABMComp.Initialize("ABMComp", Me, InternalPage, ID,myClasses)See this MashRangeSlider here compared to the themed one..
Do you like this tutorial?
