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
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 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 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 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 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_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 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_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 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"