Skip to content

styling.md

Latest commit

 

History

History
89 lines (64 loc) · 3.37 KB

styling.md

File metadata and controls

89 lines (64 loc) · 3.37 KB

Pages

  1. Getting started
  2. Layouts
  3. Styling
  4. Components
  5. Writing component

Styling

Defined in style.sh

Preview

img

Description

Style class utilizes abilities of terminal and allows some level of customization for user interface.

All components provide a way to set properties of theirs styles, accepting unified format.

A mandatory function for all components is xxx.set_style, which modifies corresponding style. Note that some components may have multiple styles, for example rect has rect.set_style which applied to all rect, and rect.set_title_style that applied only for label used as title.

Interface of set_style

style.set_style functions accepts name of class style as first argument, and then list of arguments, for enabling or disabling properties

When setting a style property, you can pass value - either 0, to disable it, or 1, or specific parameter if property requires it. Value passed after = delimeter. For example blink=1. If parameter passed without value, then value becomes default - 1 or specific default

Below described list of properties

  • blink - default value is 1, if set, then text will blink. Only if supported by terminal
  • reversed - default value is 1, if set, swaps background and foreground colors
  • underlined - default 1, if set, current pixel will be underlined
  • crossed - default 1, if set, current pixel will be crossed
  • bg_color - default value is "255;255;255", if set, current pixel background color will be changed to value, if terminal doesn't support rgb colors, terminal will try to pick simillar color
  • fg_color - default value is "255;255;255", if set, current pixel foreground(text) color will be changed to value, if terminal doesn't support rgb colors, terminal will try to pick simillar color
  • reset - default 1, if set, all styles, applied before reset will be cleared. Note that that also apply to style, with enabled reset. It may reset some of styles, none, or all - order matters lets as example enable all properties, of label
label.set_style label1 blink reversed underlined crossed bg_color="255;0;0" fg_color="0;0;255"

Note that you shoudn't call style.set_style directly, instead you should call set_style, defined in component

Code from preview

Preview from styles.sh in examples folder

source ../src/lib.sh
init_screen

layout.create_from_screen Layout

layout.v_split Layout vbox1 vbox2 
layout.h_split vbox1 hbox1 hbox2 
layout.h_split vbox2 hbox3 hbox4 


rect.new blue_rect
rect.new red_rect
rect.new green_rect
rect.new purple_rect

rect.set_style blue_rect bg_color="0;0;255" fg_color="0;0;0"
rect.set_style red_rect bg_color="255;0;0"
rect.set_style green_rect bg_color="0;255;0"
rect.set_style purple_rect bg_color="255;0;225" fg_color="0;0;0"

rect.set_title blue_rect "blue rect"
rect.set_title red_rect "red rect"
rect.set_title green_rect "green rect"
rect.set_title purple_rect "purple rect"

rect.set_title_style blue_rect reversed
rect.set_title_style red_rect crossed
rect.set_title_style green_rect underlined
rect.set_title_style purple_rect blink


rect.draw blue_rect hbox1
rect.draw red_rect hbox2
rect.draw green_rect hbox3
rect.draw purple_rect hbox4


buffer.flush
sleep 10
exit_screen