## Basic controls ``` ☐ Checkbox1 ☑ Checkbox2 ⦿ Radio1 〇 Radio2 ┌──────────────┐ │ Textinput │ border: 1px (thin) └──────────────┘ ┏━━━━━━━━━━━━━━┓ ┃ Textinput ┃ border: 2px (thick) ┗━━━━━━━━━━━━━━┛ ╭──────────────╮ │ Button │ border: 1px, rounded, ╰──────────────╯ ╭──┬───────────╮ │Ⴍ │SearchInput│ border: 1px, rounded, ╰──┴───────────╯ ┏━━┳━━━━━━━━━━━┓ ┃Ⴍ ┃SearchInput┃ border: 2px, focused ┗━━┻━━━━━━━━━━━┛ ┏━━━━━━━━━━━━━━┓ ┃ Button ┃ border: 2px, rounded(will be cancelled) ┗━━━━━━━━━━━━━━┛ ┌────────────┬─┐ │ Combobox │⌵│ └────────────┴─┘ ┏━━━━━━━━━━━━┳━┓ ┃ Combobox ┃⌵┃ border: 2px, rounded(will be cancelled) ┗━━━━━━━━━━━━┻━┛ ``` **State transition** ``` ╭──────╮ ▄▄▄▄▄▄▄▄ │ btn │ █ btn ██ ╰──────╯ ▀▀▀▀▀▀▀▀ ┌──────┐ ▄▄▄▄▄▄▄▄ │ btn01│ █btn01██ └──────┘ ▀▀▀▀▀▀▀▀ ┌────────────┬─┐ │ Item12 │⌵│ ├────────────┴─┴────┐ │ Item11 │ border: 1px, divider: true │────────────────── │ │█Item12 ██████████ │ │────────────────── │ │ Item13 │ │────────────────── ▇ │ Item14 ▇ │────────────────── ▇ │ Item15 │ └───────────────────┘ ``` ## Progress bar ``` ┌───────────────────────────────────────────┐ │ █████████████ 25% │ border: 1px, no segment └───────────────────────────────────────────┘ ████████████████▉▉▉▉▉30%▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉ border: 0, segmented ┌───────────────────────────────────────────┐ │ ███████████████▉▉▉▉▉30%▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉ │ border: 1px, segmented └───────────────────────────────────────────┘ ╭───────────────────────────────────────────╮ │ ███████████████▉▉▉▉▉30%▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉ │ border: 1px, rounded border, segmented ╰───────────────────────────────────────────╯ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ ███████████████▉▉▉▉▉30%▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉ ┃ border: 2px, segmented ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ``` ## Slider ``` ──────▮──────────── track-width: 1px ━━━━━━▮━━━━━━━━━━━━ track-width: 2px ``` ## Scrollbars ``` │ track-width: 1px │ │ ▇ ▇ ▇ │ │ │ │ ────────▮▮▮▮▮────────── ┃ track-width: 2px ┃ ┃ ▇ ▇ ▇ ┃ ┃ ┃ ━━━━━━▮▮▮▮▮━━━━━━━━━━ ``` ## Box ``` ┌────────────────────────────────┐ │ │ border: 1px │ │ │ │ │ │ │ │ └────────────────────────────────┘ ╭────────────────────────────────╮ │ │ border: 1px, rounded, │ │ │ │ ╰────────────────────────────────╯ ╭────────────────────────────────╮ │ │ border: 1px, border-radius: 1px 1px 0 0 │ │ │ │ └────────────────────────────────┘ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ ┃ border: 2px ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ** Resizable ┌────────────────────────────────┐ │ │ border: 1px, resizable │ │ │ ⠴ │ └────────────────────────────────┘ ┌────────────────────────────────┐ │ │ border: 1px, resizable │ │ │ │ └───────────────────────────────◿ ┌────────────────────────────────┐ │ │ border: 1px, resizable │ │ │ │ └────────────────────────────────◢ ┌────────────────────────────────┐ │ │ border: 1px, resizable │ │ │ │ └────────────────────────────────⇲ ┌────────────────────────────────┐ │ │ border: 1px, resizable │ │ │ │ └───────────────────────────────.: ➤ ``` ## Scrollable box ``` ┌────────────────────────────────┐ │ │ border: 1px, overflow: auto │ │ │ ▇ │ ▇ │ ▇ │ │ │ │ │ │ │ │ └─────────▮▮▮▮▮──────────────────┘ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ ┃ border: 2px ┃ ┃ ┃ ▇ ┃ ▇ ┃ ▇ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗━━━━━━━━━▮▮▮▮▮━━━━━━━━━━━━━━━━━━┛ ``` ## List ``` ┌───────────────┐ │ Item11 │ border: 1px, divider: false │ Item12 │ │ Item13 ▇ │ Item14 ▇ │ Item15 ▇ │ Item16 │ │ Item17 │ │ Item18 │ │ Item19 │ └───────────────┘ ┌───────────────┐ │ Item11 │ border: 1px, divider: true │────────────── │ │ Item12 │ │────────────── │ │ Item13 │ │────────────── ▇ │ Item14 ▇ │────────────── ▇ │ Item15 │ │────────────── │ │ Item16 │ │────────────── │ │ Item17 │ │────────────── │ │ Item18 │ │────────────── │ │ Item19 │ └───────────────┘ ``` ## Tabs: ``` ╭──────╮ │ tab1 ├─tab2─┬─tab2─╮ ┌──┘ └──────┴──────┴────────┐ │ │ │ │ │ │ │ │ │ │ └────────────────────────────────┘ ╭──────╮──────┬──────╮ │ tab1 │ tab2 │ tab2 │ ┌──┘ └──────┴──────┴────────┐ │ │ │ │ │ │ │ │ │ │ └────────────────────────────────┘ ```