Skip to content

UI.Style

Name Mandatory Description Default Type
⬅️ Input The input of the shard, if any Any
Output ➡️ The resulting output of the shard Any
InheritDefault No Inherit default style instead of current style. false Bool
OverrideTextStyle No If set this will change the default TextStyle for all widgets. none NoneTextStyleVar(TextStyle)StringVar(String)
FontId No If set this will change the font family and size for all widgets. none None{Any}Var({Any})
TextStyles No The FontFamily and size you want to use for a specific TextStyle. none None{Any}Var({Any})
DragValueTextStyle No The style to use for DragValue text. none NoneTextStyleVar(TextStyle)StringVar(String)
Wrap No If set, labels, buttons, etc will use this to determine wrap behavior of the text at the right edge of the Ui they are in. none NoneBoolTextWrap
AnimationTime No How many seconds a typical animation should last. none NoneFloatVar(Float)
ExplanationTooltips No Show tooltips explaining DragValues etc when hovered. none NoneBool
ResizeGrabRadiusSide No Mouse must be this close to the side of a window to resize none NoneFloatVar(Float)
ResizeGrabRadiusCorner No Mouse must be this close to the corner of a window to resize none NoneFloatVar(Float)
ShowTooltipsOnlyWhenStill No If false, tooltips will show up anytime you hover anything, even is mouse is still moving none NoneBool
ItemSpacing No Horizontal and vertical spacing between widgets. none NoneFloat2Var(Float2)
WindowMargin No Horizontal and vertical margins within a window frame. none NoneFloat4Var(Float4)
ButtonPadding No Button size is text size plus this on each side none NoneFloat2Var(Float2)
MenuMargin No Horizontal and vertical margins within a menu frame. none NoneFloat4Var(Float4)
Indent No Indent collapsing regions etc by this much. none NoneFloatVar(Float)
InteractSize No Minimum size of a DragValue, color picker button, and other small widgets. interact_size.y is the default height of button, slider, etc. Anything clickable should be (at least) this size. none NoneFloat2Var(Float2)
SliderWidth No Default width of a Slider. none NoneFloatVar(Float)
ComboWidth No Default (minimum) width of a ComboBox. none NoneFloatVar(Float)
TextEditWidth No Default width of a TextEdit. none NoneFloatVar(Float)
IconWidth No Checkboxes, radio button and collapsing headers have an icon at the start. This is the width/height of the outer part of this icon (e.g. the BOX of the checkbox). none NoneFloatVar(Float)
IconWidthInner No Checkboxes, radio button and collapsing headers have an icon at the start. This is the width/height of the inner part of this icon (e.g. the check of the checkbox). none NoneFloatVar(Float)
IconSpacing No Checkboxes, radio button and collapsing headers have an icon at the start. This is the spacing between the icon and the text none NoneFloatVar(Float)
DefaultAreaSize No The size used for the [Ui::max_rect] the first frame. Text will wrap at this width, and images that expand to fill the available space will expand to this size. none NoneFloat2Var(Float2)
TooltipWidth No Width of a tooltip (on_hover_ui, on_hover_text etc). none NoneFloatVar(Float)
IndentEndsWithHorizontalLine No End indented regions with a horizontal line none NoneBool
ComboHeight No Height of a combo-box before showing scroll bars. none NoneFloatVar(Float)
ScrollBarFloating No Use floating scroll bar. none NoneBoolVar(Bool)
ScrollBarWidth No Width of a scroll bar. none NoneFloatVar(Float)
ScrollBarFloatingWidth No Width of a floating scroll bar (not hovering). none NoneFloatVar(Float)
ScrollBarFloatingAllocatedWidth No Allocated width of a floating scroll bar (not hovering). none NoneFloatVar(Float)
ScrollHandleMinLength No Make sure the scroll handle is at least this big none NoneFloatVar(Float)
ScrollBarInnerMargin No Margin between contents and scroll bar. none NoneFloatVar(Float)
ScrollBarOuterMargin No Margin between scroll bar and the outer container (e.g. right of a vertical scroll bar). none NoneFloatVar(Float)
ScrollBarDormantOpacity No Opacity of the scroll bar when dormant. none NoneFloatVar(Float)
DarkMode No If true, the visuals are overall dark with light text. If false, the visuals are overall light with dark text. none NoneBoolVar(Bool)
OverrideTextColor No Override default text color for all text. none NoneColorVar(Color)
Selection No none None{Any}Var({Any})
HyperlinkColor No The color used for Hyperlink none NoneColorVar(Color)
FaintBgColor No Something just barely different from the background color. Used for Grid::striped. none NoneColorVar(Color)
ExtremeBgColor No Very dark or light color (for corresponding theme). Used as the background of text edits, scroll bars and others things that needs to look different from other interactive stuff. none NoneColorVar(Color)
CodeBgColor No Background color behind code-styled monospaced labels. none NoneColorVar(Color)
WarnFgColor No A good color for warning text (e.g. orange). none NoneColorVar(Color)
ErrorFgColor No A good color for error text (e.g. red). none NoneColorVar(Color)
WindowRounding No Window corner rounding. none NoneFloat4Var(Float4)
WindowShadow No Window shadow size. none None{Any}Var({Any})
WindowFill No Window background color. none NoneColorVar(Color)
WindowStroke No Window stroke (border) color and thickness. none None{Any}Var({Any})
MenuRounding No Menu corner rounding. none NoneFloat4Var(Float4)
PanelFill No Panel background color. none NoneColorVar(Color)
PopupShadow No Popup shadow size. none None{Any}Var({Any})
ResizeCornerSize No Corner rounding for resize handle rects. none NoneFloatVar(Float)
TextCursorWidth No Width of the line cursor when hovering over InputText etc. none NoneFloatVar(Float)
TextCursorPreview No Show where the text cursor would be if you clicked. none NoneBoolVar(Bool)
ClipRectMargin No Allow child widgets to be just on the border and still have a stroke with some thickness none NoneFloatVar(Float)
ButtonFrame No Show a background behind buttons. none NoneBoolVar(Bool)
CollapsingHeaderFrame No Show a background behind collapsing headers. none NoneBoolVar(Bool)
IndentHasLeftVLine No Draw a vertical lien left of indented region, in e.g. CollapsingHeader. none NoneBoolVar(Bool)
Striped No Whether or not Grids and Tables should be striped by default (have alternating rows differently colored). none NoneBoolVar(Bool)
SliderTrailingFill No Show trailing color behind the circle of a Slider. Default is OFF. Enabling this will affect ALL sliders, and can be enabled/disabled per slider with Slider::trailing_fill. none NoneBoolVar(Bool)

Apply style changes to the current UI scope.

Examples

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
@wire(ui-wire {
  UI.Window(
    Position: @f2(0 0)
    Anchor: Anchor::Center
    Width: 200
    Height: 200
    Flags: [WindowFlags::NoResize]
    Contents: {
      UI.CentralPanel({
        Once({
          64 >= hue
          0 >= r >= g
          @color(0 0 0 0) >= color
          16.0 >= size
        })

        255 | Math.Subtract(hue) | Math.Multiply(2) | Min(255) > r
        hue | Math.Multiply(2) | Min(255) > g
        [r g 0 255] | ToColor > color

        UI.Scope({
          UI.Style(
            OverrideTextStyle: "MyStyle"
            TextStyles: {MyStyle: {Size: size
                                   Family: FontFamily::Monospace}}
            OverrideTextColor: color
          )
          UI.IntSlider(
            Variable: hue
            Min: 0 Max: 255
          )
          UI.FloatSlider(
            Variable: size
            Min: 8.0 Max: 96.0
          )
          "Hello Shards!" | UI.Label
        })

        "This text is not affected" | UI.Label
      })
    }
  )
} Looped: true)

{ui-behavior: ui-wire}
 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
@wire(ui-wire {
  UI.Window(
    Position: @f2(0 0)
    Anchor: Anchor::Center
    Width: 200
    Height: 200
    Flags: [WindowFlags::NoResize]
    Contents: {
      UI.CentralPanel(
        Contents: {
          UI.Style(
            OverrideTextStyle: "MyStyle"
            TextStyles: {MyStyle: {Size: 36.0
                                   Family: FontFamily::Monospace}}
          )
          "Hello Shards!" | UI.Label

          UI.Style(TextStyles: {MyStyle: {Size: 16.0 Family: FontFamily::Monospace}})
          "Hello Shards!" | UI.Label

          UI.Style(TextStyles: {MyStyle: {Size: 20.0 Family: FontFamily::Proportional}})
          "Hello Shards!" | UI.Label
        }
      )
    }
  )
} Looped: true)

{ui-behavior: ui-wire}