ToggleStyle

This style is used by both ToggleButton and Switch.

Both controls can operate in two modes.

class ToggleStyle

Text Mode

The control has text and the text determines the size of the control. An extra image can be placed in the background an will be stretched to fill the text area plus any extra padding applied.

Image Mode

The control is solely based on an image and determines its size based on the image and padding.

Constructors

Overload 1

constructor(image: ImageAsset? = default_toggle_button_image, width: Float? = nil, height: Float? = nil, padding: EdgeInsets = EdgeInsets(horizontal: 18, vertical: 4), font_family: FontFamilyName = default_font, font_weight: Int = ui.font_weights.normal, italic: Bool = false, text_size: Int = 12, text_colors: ToggleStateColors = ToggleStateColors(resting: Color(0xFFEEEEEE), hovered: Color(0xFFEEEEEE), pressed: Color(0xFFEEEEEE), checked: Color(0xFFEEEEEE), checked_and_hovered: Color(0xFFEEEEEE), checked_and_pressed: Color(0xFFEEEEEE), disabled: Color(0x3DEEEEEE), checked_and_disabled: Color(0x3DEEEEEE)), text_alignment: ui.Alignment = ui.Alignment.center)

image: ImageAsset? = default_toggle_button_image

If a text is provided to the control, this image is in the background and assumed to be stretchable to fill the control.

If no text is provided the image will be used to determine the size of the control.

width: Float? = nil

Overrides the default width which is either based on the text or image if not text is set.

height: Float? = nil

Overrides the default height which is either based on the text or image if not text is set.

padding: EdgeInsets = EdgeInsets(horizontal: 18, vertical: 4)

Extra space around the text or image.

font_family: FontFamilyName = default_font

The font family of the text.

See Load Font.

font_weight: Int = ui.font_weights.normal

The font weight of the text.

See font_weights.

italic: Bool = false

Enables italic style of the text.

text_size: Int = 12

The font size in pixels of the text.

text_colors: ToggleStateColors = ...

The text's color for each state of the toggle.

Default colors:

import { ToggleStateColors } from kontakt_controls

var colors = ToggleStateColors(
    resting: Color(0xFFEEEEEE),
    hovered: Color(0xFFEEEEEE),
    pressed: Color(0xFFEEEEEE),
    checked: Color(0xFFEEEEEE),
    checked_and_hovered: Color(0xFFEEEEEE),
    checked_and_pressed: Color(0xFFEEEEEE),
    disabled: Color(0x3DEEEEEE),
    checked_and_disabled: Color(0x3DEEEEEE),
)

See ToggleStateColors

text_alignment: ui.Alignment = ui.Alignment.center

The alignment position of the text.

This only has an effect, if width or height are configured to a larger size than the text itself.

See Alignment.

Overload 2

constructor(image: ImageAsset? = default_toggle_button_image, width: Float? = nil, height: Float? = nil, padding: EdgeInsets = EdgeInsets(horizontal: 18, vertical: 4), font_family: FontFamilyName = default_font, font_weight: Int = ui.font_weights.normal, italic: Bool = false, text_size: Int = 12, text_colors: ToggleStateColors = ToggleStateColors(resting: Color(0xFFEEEEEE), hovered: Color(0xFFEEEEEE), pressed: Color(0xFFEEEEEE), checked: Color(0xFFEEEEEE), checked_and_hovered: Color(0xFFEEEEEE), checked_and_pressed: Color(0xFFEEEEEE), disabled: Color(0x3DEEEEEE), checked_and_disabled: Color(0x3DEEEEEE)), text_alignment: ui.Alignment = ui.Alignment.center)

image: ImageAsset? = default_toggle_button_image

If a text is provided to the control, this image is in the background and assumed to be stretchable to fill the control.

If no text is provided the image will be used to determine the size of the control.

width: Float? = nil

Overrides the default width which is either based on the text or image if not text is set.

height: Float? = nil

Overrides the default height which is either based on the text or image if not text is set.

padding: EdgeInsets = EdgeInsets(horizontal: 18, vertical: 4)

Extra space around the text or image.

font_family: FontFamilyName = default_font

The font family of the text.

See Load Font.

font_weight: Int = ui.font_weights.normal

The font weight of the text.

See font_weights.

italic: Bool = false

Enables italic style of the text.

text_size: Int = 12

The font size in pixels of the text.

text_colors: ToggleStateColors = ...

The text's color for each state of the toggle.

Default colors:

import { ToggleStateColors } from kontakt_controls

var colors = ToggleStateColors(
    resting: Color(0xFFEEEEEE),
    hovered: Color(0xFFEEEEEE),
    pressed: Color(0xFFEEEEEE),
    checked: Color(0xFFEEEEEE),
    checked_and_hovered: Color(0xFFEEEEEE),
    checked_and_pressed: Color(0xFFEEEEEE),
    disabled: Color(0x3DEEEEEE),
    checked_and_disabled: Color(0x3DEEEEEE),
)

See ToggleStateColors

text_alignment: ui.Alignment = ui.Alignment.center

The alignment position of the text.

This only has an effect, if width or height are configured to a larger size than the text itself.

See Alignment.

Properties

image

image: ImageAsset? { get set }

If a text is provided to the control, this image is in the background and assumed to be stretchable to fill the control.

If no text is provided the image will be used to determine the size of the control.

width

width: Float? { get set }

Overrides the default width which is either based on the text or image if not text is set.

height

height: Float? { get set }

Overrides the default height which is either based on the text or image if not text is set.

padding

padding: EdgeInsets { get set }

Extra space around the text or image.

font_family

font_family: FontFamilyName { get set }

The font family of the text.

See Load Font.

font_weight

font_weight: Int { get set }

The font weight of the text.

See font_weights.

italic

italic: Bool { get set }

Enables italic style of the text.

text_size

text_size: Int { get set }

The font size in pixels of the text.

text_colors

text_colors: ToggleStateColors { get set }

The text's color for each state of the toggle.

Default colors:

import { ToggleStateColors } from kontakt_controls

var colors = ToggleStateColors(
    resting: Color(0xFFEEEEEE),
    hovered: Color(0xFFEEEEEE),
    pressed: Color(0xFFEEEEEE),
    checked: Color(0xFFEEEEEE),
    checked_and_hovered: Color(0xFFEEEEEE),
    checked_and_pressed: Color(0xFFEEEEEE),
    disabled: Color(0x3DEEEEEE),
    checked_and_disabled: Color(0x3DEEEEEE),
)

See ToggleStateColors

text_alignment

text_alignment: ui.Alignment { get set }

The alignment position of the text.

This only has an effect, if width or height are configured to a larger size than the text itself.

See Alignment.

Methods

copy

copy() -> (ToggleStyle)

Returns a shallow copy of the style.

deep_copy

deep_copy() -> (ToggleStyle)

Returns a deep copy (includes copying padding and text_colors).

overriding

overriding(_ modify: (ToggleStyle) -> ()) -> (ToggleStyle)

Returns a modified copy of the style.

Text Mode​

Image Mode​

Constructors​

Overload 1​

Overload 2​

Properties​

image​

width​

height​

padding​

font_family​

font_weight​

italic​

text_size​

text_colors​

text_alignment​

Methods​

copy​

deep_copy​

overriding​

Text Mode

Image Mode

Constructors

Overload 1

Overload 2

Properties

image

width

height

padding

font_family

font_weight

italic

text_size

text_colors

text_alignment

Methods

copy

deep_copy

overriding