Styling Buttons when the Render as ButtonList Property is checked



When you add radio button or checkbox controls to a UX you can choose to render the controls as a Button List. In this video we show how the buttons can be styled.



#buttonlist #buttonstyling #alphastyling #alphastyle #alphanaywhere #listcontrol


Transcript

in this video we'll describe how you can

create a custom appearance

for a radio button or a checkbox

that is rendered as a button list so you

can see here we have

two radio buttons that are both rendered

as a button list

and this the bottom radio button here is

using

all default settings so when i make a

selection the only way that i know

that this gamma item was selected was

because it has a check box next to it

but what if i want to

set the background color and other

properties of the button

when it is selected so you can see here

in the

first radio button when i check on

a radio button we display the

button with a pink background

a red border with

rounded corners and the way that this

was done was

as follows so you can see if we go to

the first radio button over here

our orientation is horizontal and we've

said

renderers button list we've also said

allow sub themes to be used

and we've also turned on keep pressed so

key pressed is important in this case

because

what this does is when the

when the button is clicked it stays in

its clicked state

even after the user releases the mouse

and that's how we are able to keep a

permanent

change in appearance so then in order to

create the sub theme over here

we go to properties we go to

just underneath the style name there's a

sub theme

ability property here so we can go here

and we can

add a new sub theme so we'll create a

new sub theme that is based on a button

list and we'll base it on the base

sub theme which is the default sub theme

then i'll just give it a name so

in this case i gave it a name b2

so that filled in all these properties

over here

and you can see here's the press class

name so the press class

name is using uh button pressed and now

i'm going to just go and add an

additional

css selector called selected so which is

defined over here so here is selected

it's got a pink background it's got um

a red border of 2 pixels and a 10 pixel

border radius

so this is the css classes that will be

applied

to the button when it's been clicked and

because we have

the keep pressed uh property selected

it remains in that state even after i've

released the mouse so we can go back now

and take a look at this

so when i click on the button you can

see it remains in the pressed

state it has the css classes for the

press state applied

and so therefore it shows the pink

background with the red order

thanks very much for watching