ButtonEx Skin States & Properties

www.progui.co.uk  Top  Previous  Next

ButtonEx Skin States & Properties

Component Names

ButtonEx, ToggleButtonEx, RadioButtonEx, CheckButtonEx

State Names

Name

Description

Normal

Normal button state.

Hot

Hover state when the mouse pointer is over the button.

Pressed

When the button is pressed.

Disabled

The button is disabled.

ToggleButtonEx, CheckButtonEx and RadioButtonEx Only States

selected

Normal selected toggle/check/radio button state.

selected hot

Selected hover state when the mouse pointer is over the toggle/check/radio button.

selected pressed

When the toggle/check/radio button is in the selected state and pressed.

CheckButtonEx only States

inbetween

Normal "inbetween" state of a check button.

inbetween hot

Hover state when the mouse pointer is over the "inbetween" state check button.

inbetween pressed

When the check button is in the "inbetween" state and pressed.

Properties

Name

Description

Valid Value/s separated by semi-colon (';')

background image

Displays a background image.

Can be an image or icon file path/name.

background position

Sets the position of the background image.

x: centre / repeat / <pixels> / <value>%

y: centre / repeat / <pixels> / <value>%

top: centre / repeat / <pixels> / <value>%

bottom: centre / repeat / <pixels> / <value>%

left: centre / repeat / <pixels> / <value>%

right: centre / repeat / <pixels> / <value>%

stretch: true / false

tile: true / false

masked: true / false

background

Sets the background colour, gradient or theme.

Can be a colour, gradient or background theme constant (Please see AddPanelExPage for a description of the possible values).

 

gradient: <start_colour>, <end_colour>

gradient: <start_colour>, <end_colour>, <pos.f>, <colour>, <pos.f>, <colour>, ...

gradient: vertical / rectangle / ellipse, <start_colour>, <end_colour>

gradient: vertical / rectangle / ellipse, <start_colour>, <end_colour>,  <pos.f>, <colour>, <pos.f>, <colour>, ...

<colour>

<theme constant>

border image

Sets the border image.

Can be an image or icon file path/name.

 

The following optional parameters manually specify the border rectangle used to create the border:

 

top: <pixels>

bottom: <pixels>

left: <pixels>

right: <pixels>

border mask

Sets the border mask.

Can be an image/icon file path/name or null to automatically generate mask from border image or -1 to not use a mask or -2 to automatically generate mask from border image but not render the border.

 

The following optional parameters manually specify the border rectangle used to create the border mask:

 

top: <pixels>

bottom: <pixels>

left: <pixels>

right: <pixels>

overlay image

Sets the second background overlay image.

Can be an image or icon file path/name.

overlay position

Sets the position of the second overlay background image.

x: centre / repeat / <pixels> / <value>%

y: centre / repeat / <pixels> / <value>%

top: centre / repeat / <pixels> / <value>%

bottom: centre / repeat / <pixels> / <value>%

left: centre / repeat / <pixels> / <value>%

right: centre / repeat / <pixels> / <value>%

stretch: true / false

tile: true / false

masked: true / false

overlay

Sets the second overlay background colour, gradient or theme.

Can be a colour, gradient or background theme constant (Please see AddPanelExPage for a description of the possible values).

 

gradient: <start_colour>, <end_colour>

gradient: <start_colour>, <end_colour>, <pos.f>, <colour>, <pos.f>, <colour>, ...

gradient: vertical / rectangle / ellipse, <start_colour>, <end_colour>

gradient: vertical / rectangle / ellipse, <start_colour>, <end_colour>,  <pos.f>, <colour>, <pos.f>, <colour>, ...

<colour>

<theme constant>

image

Sets the image to use as the button's icon.

Can be an image or icon file path/name.

 

noclip: true / false

image position

Sets the position of the button's image/icon.

x: centre / <pixels> / <value>%

y: centre / <pixels> / <value>%

top: centre / <pixels> / <value>%

bottom: centre / <pixels> / <value>%

left: centre / <pixels> / <value>%

right: centre / <pixels> / <value>%

image padding

Sets the padding size around the button's image.

top: <pixels>

bottom: <pixels>

left: <pixels>

right: <pixels>

text

Sets the button text font and colour.

font: <name>, <point-size>

font: <name>, <point-size>, italic / underline / bold / strikethrough, .. , ...

colour: <colour>

text position

Sets the position of the button text.

x: centre / <pixels> / <value>%

y: centre / <pixels> / <value>%

top: centre / <pixels> / <value>%

bottom: centre / <pixels> / <value>%

left: centre / <pixels> / <value>%

right: centre / <pixels> / <value>%

text padding

Sets the padding size around the button's text.

top: <pixels>

bottom: <pixels>

left: <pixels>

right: <pixels>

cursor

Sets the mouse pointer/cursor for the button state.

appstarting

arrow

cross

hand

help

ibeam

no

size

sizeall

sizenesw

sizens

sizenwse

sizewe

uparrow

wait

<HCURSOR>

 

 

ButtonEx Index