pink/attribute

Types

AlignItems is the type the function align_items accepts

pub type AlignItems {
  ItemsStart
  ItemsCenter
  ItemsEnd
}

Constructors

  • ItemsStart
  • ItemsCenter
  • ItemsEnd

AlignSelf is the type the function align_self accepts

pub type AlignSelf {
  SelfAuto
  SelfStart
  SelfCenter
  SelfEnd
}

Constructors

  • SelfAuto
  • SelfStart
  • SelfCenter
  • SelfEnd

Attribute is a type that represents an attribute of an element

pub opaque type Attribute

BorderStyle is the type the function border_style accepts

pub type BorderStyle {
  BorderSingle
  BorderDouble
  BorderRound
  BorderBold
  BorderSingleDouble
  BorderDoubleSingle
  BorderClassic
  BorderCustom(
    top_left: String,
    top: String,
    top_right: String,
    left: String,
    bottom_left: String,
    bottom: String,
    bottom_right: String,
    right: String,
  )
}

Constructors

  • BorderSingle
  • BorderDouble
  • BorderRound
  • BorderBold
  • BorderSingleDouble
  • BorderDoubleSingle
  • BorderClassic
  • BorderCustom(
      top_left: String,
      top: String,
      top_right: String,
      left: String,
      bottom_left: String,
      bottom: String,
      bottom_right: String,
      right: String,
    )

Dimension is the type some functions accept

pub type Dimension {
  Spaces(Int)
  Percent(Int)
}

Constructors

  • Spaces(Int)
  • Percent(Int)

Display is the type the function display accepts

pub type Display {
  DisplayFlex
  DisplayNone
}

Constructors

  • DisplayFlex
  • DisplayNone

FlexDirection is the type the function flex_direction accepts

pub type FlexDirection {
  FlexRow
  FlexColumn
  FlexRowReverse
  FlexColumnReverse
}

Constructors

  • FlexRow
  • FlexColumn
  • FlexRowReverse
  • FlexColumnReverse

FlexWrap is the type the function flex_wrap accepts

pub type FlexWrap {
  FlexWrap
  FlexNoWrap
  FlexWrapReverse
}

Constructors

  • FlexWrap
  • FlexNoWrap
  • FlexWrapReverse

JustifyContent is the type the function justify_content accepts

pub type JustifyContent {
  ContentStart
  ContentCenter
  ContentEnd
  ContentSpaceBetween
  ContentSpaceAround
}

Constructors

  • ContentStart
  • ContentCenter
  • ContentEnd
  • ContentSpaceBetween
  • ContentSpaceAround

Visibility is the type the overflow functions accept

pub type Visibility {
  Visible
  Hidden
}

Constructors

  • Visible
  • Hidden

Wrap is the type the function wrap accepts

pub type Wrap {
  Wrap
  Truncate
  TruncateStart
  TruncateMiddle
  TruncateEnd
}

Constructors

  • Wrap
  • Truncate
  • TruncateStart
  • TruncateMiddle
  • TruncateEnd

Functions

pub fn align_items(align: AlignItems) -> Attribute

Effects how elements are aligned both in Flexbox and Grid layouts For more information, see align-items

Examples

box([align_items(ItemsStart)], [
  box([margin_right(1)], [text([], "X")]),
  text_nested([], [
     text([], "A"),
     newline([]),
     text([], "B"),
     newline([]),
     text([], "C"),
  ]),
])
// -> X A
// ->   B
// ->   C
box([align_items(ItemsCenter)], [
  box([margin_right(1)], [text([], "X")]),
  text_nested([], [
     text([], "A"),
     newline([]),
     text([], "B"),
     newline([]),
     text([], "C"),
  ]),
])
// ->   A
// -> X B
// ->   C
box([align_items(ItemsEnd)], [
  box([margin_right(1)], [text([], "X")]),
  text_nested([], [
     text([], "A"),
     newline([]),
     text([], "B"),
     newline([]),
     text([], "C"),
  ]),
])
// ->   A
// ->   B
// -> X C
pub fn align_self(align: AlignSelf) -> Attribute

Makes possible to override the align-items value for specific flex items For more information, see align-self

Examples

box([height(Spaces(3))], [
  box([align_self(SelfStart)], [text([], "X")]),
])
// -> X
// ->
// ->
box([height(Spaces(3))], [
  box([align_self(SelfCenter)], [text([], "X")]),
])
// ->
// -> X
// ->
box([height(Spaces(3))], [
  box([align_self(SelfEnd)], [text([], "X")]),
])
// ->
// ->
// -> X
pub fn background_color(color: String) -> Attribute

Change text background color. Ink uses chalk under the hood, so all its functionality is supported

Examples

text([background_color("green")], "Green")
text([background_color("#005cc5")], "Blue")
text([background_color("rgb(232, 131, 136)")], "Red")
pub fn bold(is_bold: Bool) -> Attribute

Make the text bold

pub fn border_bottom(has_border: Bool) -> Attribute

Determines whether bottom border is visible

pub fn border_bottom_color(color: String) -> Attribute

Change bottom border color. Accepts the same values as color in text function

Examples

box([border_style(BorderRound), border_bottom_color("green")], [
  text([], "Hello world")
])
pub fn border_bottom_dim_color(has_color: Bool) -> Attribute

Dim the bottom border color.

Examples

box([border_style(BorderRound), border_bottom_dim_color(True)], [
  text([], "Hello world")
])
pub fn border_color(color: String) -> Attribute

Change border color. Shorthand for setting border_top_color, border_right_color, border_bottom_color and border_left_color.

Examples

box([border_style(BorderRound), border_color("green")], [
  text([], "Green Rounded Box")
])
pub fn border_dim_color(has_color: Bool) -> Attribute

Dim the border color.

Examples

box([border_style(BorderRound), border_dim_color(True)], [
  text([], "Hello world")
])
pub fn border_left(has_border: Bool) -> Attribute

Determines whether left border is visible

pub fn border_left_color(color: String) -> Attribute

Change left border color. Accepts the same values as color in text function

Examples

box([border_style(BorderRound), border_left_color("green")], [
  text([], "Hello world")
])
pub fn border_left_dim_color(has_color: Bool) -> Attribute

Dim the left border color.

Examples

box([border_style(BorderRound), border_left_dim_color(True)], [
  text([], "Hello world")
])
pub fn border_right(has_border: Bool) -> Attribute

Determines whether right border is visible

pub fn border_right_color(color: String) -> Attribute

Change right border color. Accepts the same values as color in text function

Examples

box([border_style(BorderRound), border_right_color("green")], [
  text([], "Hello world")
])
pub fn border_right_dim_color(has_color: Bool) -> Attribute

Dim the right border color.

Examples

box([border_style(BorderRound), border_right_dim_color(True)], [
  text([], "Hello world")
])
pub fn border_style(style: BorderStyle) -> Attribute

Add a border with a specified style. If border_style is not set, no border will be added. Ink uses border styles from cli-boxes module.

Examples

box([border_style(BorderSingle)], [text([], "single")])
// -> ┌──────┐
// -> │single│
// -> └──────┘
box([border_style(BorderDouble)], [text([], "double")])
// -> ╔══════╗
// -> ║double║
// -> ╚══════╝
box([border_style(BorderRound)], [text([], "round")])
// -> ╭─────╮
// -> │round│
// -> ╰─────╯
box([border_style(BorderBold)], [text([], "bold")])
// -> ┏━━━━┓
// -> ┃bold┃
// -> ┗━━━━┛
box([border_style(BorderSingleDouble)], [text([], "single double")])
// -> ╓─────────────╖
// -> ║single double║
// -> ╙─────────────╜
box([border_style(BorderDoubleSingle)], [text([], "double single")])
// -> ╒═════════════╕
// -> │double single│
// -> ╘═════════════╛
box([border_style(BorderClassic)], [text([], "classic")])
// -> +-------+
// -> |classic|
// -> +-------+
pub fn border_top(has_border: Bool) -> Attribute

Determines whether top border is visible

pub fn border_top_color(color: String) -> Attribute

Change top border color. Accepts the same values as color in text function

Examples

box([border_style(BorderRound), border_top_color("green")], [
  text([], "Hello world")
])
pub fn border_top_dim_color(has_color: Bool) -> Attribute

Dim the top border color.

Examples

box([border_style(BorderRound), border_top_dim_color(True)], [
  text([], "Hello world")
])
pub fn color(color: String) -> Attribute

Change text color. Ink uses chalk under the hood, so all its functionality is supported

Examples

text([color("green")], "Green")
text([color("#005cc5")], "Blue")
text([color("rgb(232, 131, 136)")], "Red")
pub fn column_gap(gap: Int) -> Attribute

Size of the gap between an element’s columns

Examples

box([column_gap(1)], [
  text([], "A"),
  text([], "B"),
])
// -> A B
pub fn count(count: Int) -> Attribute

Number of newlines to insert

pub fn custom(key: String, value: Json) -> Attribute

Create a custom attribute Useful for passing custom data to components or for setting attributes that are not yet supported by Pink

pub fn dim_color(color: String) -> Attribute

Dim the color (emit a small amount of light)

Examples

text([dim_color("red")], "Dimmed red")
pub fn display(display: Display) -> Attribute

Set this property to DisplayNone to hide the element

pub fn encode(attributes: List(Attribute)) -> Json
pub fn flex_basis(basis: Dimension) -> Attribute

Specifies the initial size of the flex item, before any available space is distributed according to the flex factors. When omitted from the flex shorthand, its specified value is the length zero For more information, see flex-basis

Examples

box([width(6)], [
  box([flex_basis(Spaces(3))], [
    text([], "X")
  ]),
  text([], "Y")
])
// -> X  Y
box([width(6)], [
  box([flex_basis(Percent(50))], [
    text([], "X")
  ]),
  text([], "Y")
])
// -> X  Y
pub fn flex_direction(direction: FlexDirection) -> Attribute

Establishes the main-axis, thus defining the direction flex items are placed in the flex container For more information, see flex-direction

Examples

box([], [
  box([margin_right(1)], [
    text([], "X")
  ]),
  text([], "Y")
])
// -> X Y
box([flex_direction(FlexRowReverse)], [
  text([], "X"),
  box([margin_right(1)], [
    text([], "Y")
  ])
])
// -> Y X
box([flex_direction(FlexColumn)], [
  text([], "X"),
  text([], "Y")
])
// -> X
// -> Y
box([flex_direction(FlexColumnReverse)], [
  text([], "X"),
  text([], "Y")
])
// -> Y
// -> X
pub fn flex_grow(grow: Int) -> Attribute

Defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up For more information, see flex-grow

Examples

box([], [
  text([], "Label"),
  box([flex_grow(1)], [
    text([], "Fills all remaining space")
  ])
])
pub fn flex_shrink(shrink: Int) -> Attribute

Specifies the “flex shrink factor” which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn’t enough space on the row For more information, see flex-shrink

Examples

box([width(20)], [
  box([flex_shrink(2), width(10)], [
    text([], "Will be 1/4")
  ]),
  box([width(10)], [
    text([], "Will be 3/4")
  ]),
])
pub fn flex_wrap(wrap: FlexWrap) -> Attribute

Defines whether the flex items are forced in a single line or can be flowed into multiple lines. If set to multiple lines, it also defines the cross-axis which determines the direction new lines are stacked in, aiding responsiveness layout behavior without CSS media queries For more information, see flex-wrap

Examples

box([width(2), flex_wrap(FlexWrap)], [
  text([], "A"),
  text([], "BC")
])
// -> A
// -> BC
box([flex_direction(FlexColumn), height(2), flex_wrap(FlexWrap)], [
  text([], "A"),
  text([], "B"),
  text([], "C")
])
// -> AC
// -> B
pub fn gap(gap: Int) -> Attribute

Size of the gap between an element’s columns and rows. Shorthand for column_gap and row_gap

Examples

box([gap(1), width(3), flex_wrap(FlexWrap)], [
  text([], "A"),
  text([], "B"),
  text([], "C")
])
// -> A B
// ->
// -> C
pub fn height(height: Dimension) -> Attribute

Height of the element. You can set it in lines (rows) or in percent, which will calculate the height based on the height of parent element

Examples

box([height(Spaces(4))], [text([], "X")])
// -> X\n\n\n
box([height(Spaces(6)), flex_direction(FlexColumn)], [
  box([width(Percent(50))], [text([], "X")]),
  text([], "Y")
])
// -> X\n\n\nY\n\n\n
pub fn inverse(is_inverse: Bool) -> Attribute

Inverse background and foreground colors

Examples

text([inverse(True), color("yellow")], "Inversed Yellow")
pub fn italic(is_italic: Bool) -> Attribute

Make the text italic

pub fn justify_content(justify: JustifyContent) -> Attribute

Defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line For more information, see justify-content

Examples

box([justify_content(ContentStart)], [
  text([], "X")
])
// -> "X      "
box([justify_content(ContentCenter)], [
  text([], "X")
])
// -> "   X   "
box([justify_content(ContentEnd)], [
  text([], "X")
])
// -> "      X"
box([justify_content(ContentSpaceBetween)], [
  text([], "X"),
  text([], "Y")
])
// -> "X     Y"
box([justify_content(ContentSpaceAround)], [
  text([], "X"),
  text([], "Y")
])
// -> "  X   Y  "
pub fn key(key: String) -> Attribute

Set a unique key for the element Useful for components that are rendered in a loop

pub fn margin(margin: Int) -> Attribute

Margin on all sides. Equivalent to setting margin_top, margin_bottom, margin_left and margin_right

pub fn margin_bottom(margin: Int) -> Attribute

Bottom margin

pub fn margin_left(margin: Int) -> Attribute

Left margin

pub fn margin_right(margin: Int) -> Attribute

Right margin

pub fn margin_top(margin: Int) -> Attribute

Top margin

pub fn margin_x(margin: Int) -> Attribute

Horizontal margin. Equivalent to setting margin_left and margin_right

pub fn margin_y(margin: Int) -> Attribute

Vertical margin. Equivalent to setting margin_top and margin_bottom

pub fn min_height(height: Int) -> Attribute

Sets a minimum height of the element

pub fn min_width(width: Int) -> Attribute

Sets a minimum width of the element

pub fn overflow(overflow: Visibility) -> Attribute

Shortcut for setting overflow_x and overflow_y at the same time

pub fn overflow_x(overflow: Visibility) -> Attribute

Behavior for an element’s overflow in horizontal direction.

pub fn overflow_y(overflow: Visibility) -> Attribute

Behavior for an element’s overflow in vertical direction.

pub fn padding(padding: Int) -> Attribute

Padding on all sides. Equivalent to setting padding_top, padding_bottom, padding_left and padding_right

pub fn padding_bottom(padding: Int) -> Attribute

Bottom padding

pub fn padding_left(padding: Int) -> Attribute

Left padding

pub fn padding_right(padding: Int) -> Attribute

Right padding

pub fn padding_top(padding: Int) -> Attribute

Top padding

pub fn padding_x(padding: Int) -> Attribute

Horizontal padding. Equivalent to setting padding_left and padding_right

pub fn padding_y(padding: Int) -> Attribute

Vertical padding. Equivalent to setting padding_top and padding_bottom

pub fn row_gap(gap: Int) -> Attribute

Size of the gap between an element’s rows

Examples

box([flex_direction(FlexColumn), row_gap(1)], [
  text([], "A"),
  text([], "B"),
])
// -> A
// ->
// -> B
pub fn strikethrough(is_strikethrough: Bool) -> Attribute

Make the text crossed with a line

pub fn underline(is_underline: Bool) -> Attribute

Make the text underlined

pub fn width(width: Dimension) -> Attribute

Width of the element. You can set it in Spaces or in Percent, which will calculate the width based on the width of parent element.

Examples

box([width(Spaces(4))], [text([], "X")])
// -> X
box([width(Spaces(10))], [
  box([width(Percent(50))], [text([], "X")]),
  text([], "Y")
])
// -> X    Y
pub fn wrap(wrap: Wrap) -> Attribute

This property tells Ink to wrap or truncate text if its width is larger than container If wrap is passed (by default), Ink will wrap text and split it into multiple lines. If Truncate* is passed, Ink will truncate text instead, which will result in one line of text with the rest cut off

Examples

box([width(7)], [text([], "Hello World")])
// -> "Hello\nWorld"
// Truncate is an alias to TruncateEnd
box([width(7)], [text([wrap(Truncate)], "Hello World")])
// -> "Hello…"
box([width(7)], [text([wrap(TruncateMiddle)], "Hello World")])
// -> "He…ld"
box([width(7)], [text([wrap(TruncateStart)], "Hello World")])
// -> "…World"
Search Document