Current section
Files
Jump to
Current section
Files
src/glink/style.gleam
import glink/internal
import glink/style/align_items.{type AlignItems}
import glink/style/align_self.{type AlignSelf}
import glink/style/border_style.{type BorderStyle}
import glink/style/color.{type Color}
import glink/style/display.{type Display}
import glink/style/flex_direction.{type FlexDirection}
import glink/style/flex_wrap.{type FlexWrap}
import glink/style/justify_content.{type JustifyContent}
import glink/style/overflow.{type Overflow}
import glink/style/position.{type Position}
import glink/style/text_wrap.{type TextWrap}
pub type Style
pub fn text_wrap(text_wrap: TextWrap) -> Style {
internal.to_prop("textWrap", text_wrap.value(text_wrap))
}
pub fn position(position: Position) -> Style {
internal.to_prop("position", position.value(position))
}
/// Size of the gap between an element's columns.
pub fn column_gap(column_gap: Float) -> Style {
internal.to_prop("columnGap", column_gap)
}
/// Size of the gap between element's rows.
pub fn row_gap(row_gap: Float) -> Style {
internal.to_prop("rowGap", row_gap)
}
/// Size of the gap between an element's columns and rows. Shorthand for `column_gap` and `row_gap`.
pub fn gap(gap: Float) -> Style {
internal.to_prop("gap", gap)
}
/// Margin on all sides. Equivalent to setting `margin_top`, `margin_bottom`, `margin_left` and `margin_right`.
pub fn margin(margin: Float) -> Style {
internal.to_prop("margin", margin)
}
/// Horizontal margin. Equivalent to setting `margin_left` and `margin_right`.
pub fn margin_x(margin_x: Float) -> Style {
internal.to_prop("marginX", margin_x)
}
/// Vertical margin. Equivalent to setting `margin_top` and `margin_bottom`.
pub fn margin_y(margin_y: Float) -> Style {
internal.to_prop("marginY", margin_y)
}
/// Top margin.
pub fn margin_top(margin_top: Float) -> Style {
internal.to_prop("marginTop", margin_top)
}
/// Bottom margin.
pub fn margin_bottom(margin_bottom: Float) -> Style {
internal.to_prop("marginBottom", margin_bottom)
}
/// Left margin.
pub fn margin_left(margin_left: Float) -> Style {
internal.to_prop("marginLeft", margin_left)
}
/// Right margin.
pub fn margin_right(margin_right: Float) -> Style {
internal.to_prop("marginRight", margin_right)
}
/// Padding on all sides. Equivalent to setting `padding_top`, `padding_bottom`, `padding_left` and `padding_right`.
pub fn padding(padding: Float) -> Style {
internal.to_prop("padding", padding)
}
/// Horizontal padding. Equivalent to setting `padding_left` and `padding_right`.
pub fn padding_x(padding_x: Float) -> Style {
internal.to_prop("paddingX", padding_x)
}
/// Vertical padding. Equivalent to setting `padding_top` and `padding_bottom`.
pub fn padding_y(padding_y: Float) -> Style {
internal.to_prop("paddingY", padding_y)
}
/// Top padding.
pub fn padding_top(padding_top: Float) -> Style {
internal.to_prop("paddingTop", padding_top)
}
/// Bottom padding.
pub fn padding_bottom(padding_bottom: Float) -> Style {
internal.to_prop("paddingBottom", padding_bottom)
}
/// Left padding.
pub fn padding_left(padding_left: Float) -> Style {
internal.to_prop("paddingLeft", padding_left)
}
/// Right padding.
pub fn padding_right(padding_right: Float) -> Style {
internal.to_prop("paddingRight", padding_right)
}
/// This property defines the ability for a flex item to grow if necessary.
/// See [flex-grow](https://css-tricks.com/almanac/properties/f/flex-grow/).
pub fn flex_grow(flex_grow: Float) -> Style {
internal.to_prop("flexGrow", flex_grow)
}
/// It 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.
/// See [flex-shrink](https://css-tricks.com/almanac/properties/f/flex-shrink/).
pub fn flex_shrink(flex_shrink: Float) -> Style {
internal.to_prop("flexShrink", flex_shrink)
}
/// It establishes the main-axis, thus defining the direction flex items are placed in the flex container.
/// See [flex-direction](https://css-tricks.com/almanac/properties/f/flex-direction/).
pub fn flex_direction(flex_direction: FlexDirection) -> Style {
internal.to_prop("flexDirection", flex_direction.value(flex_direction))
}
/// It specifies the initial size of the flex item, before any available space is distributed according to the flex factors.
/// See [flex-basis](https://css-tricks.com/almanac/properties/f/flex-basis/).
pub fn flex_basis(flex_basis: String) -> Style {
internal.to_prop("flexBasis", flex_basis)
}
/// It 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.
/// See [flex-wrap](https://css-tricks.com/almanac/properties/f/flex-wrap/).
pub fn flex_wrap(flex_wrap: FlexWrap) -> Style {
internal.to_prop("flexWrap", flex_wrap.value(flex_wrap))
}
/// The align-items property defines the default behavior for how items are laid out along the cross axis (perpendicular to the main axis).
/// See [align-items](https://css-tricks.com/almanac/properties/a/align-items/).
pub fn align_items(align_items: AlignItems) -> Style {
internal.to_prop("alignItems", align_items.value(align_items))
}
/// It makes possible to override the align-items value for specific flex items.
/// See [align-self](https://css-tricks.com/almanac/properties/a/align-self/).
pub fn align_self(align_self: AlignSelf) -> Style {
internal.to_prop("alignSelf", align_self.value(align_self))
}
/// It defines the alignment along the main axis.
/// See [justify-content](https://css-tricks.com/almanac/properties/j/justify-content/).
pub fn justify_content(justify_content: JustifyContent) -> Style {
internal.to_prop("justifyContent", justify_content.value(justify_content))
}
/// Width of the element in spaces.
/// You can also set it in percent, which will calculate the width based on the width of parent element.
pub fn width(width: String) -> Style {
internal.to_prop("width", width)
}
/// Height of the element in lines (rows).
/// You can also set it in percent, which will calculate the height based on the height of parent element.
pub fn height(height: String) -> Style {
internal.to_prop("height", height)
}
/// Sets a minimum width of the element.
pub fn min_width(min_width: String) -> Style {
internal.to_prop("minWidth", min_width)
}
/// Sets a minimum height of the element.
pub fn min_height(min_height: String) -> Style {
internal.to_prop("minHeight", min_height)
}
/// Set this property to `None` to hide the element.
pub fn display(display: Display) -> Style {
internal.to_prop("display", display.value(display))
}
/// Hide the element.
pub fn display_() -> Style {
display(display.None)
}
/// Add a border with a specified style.
/// If `border_style` is not specified, no border will be added.
pub fn border_style(
top_left top_left: String,
top top: String,
top_right top_right: String,
right right: String,
bottom_right bottom_right: String,
bottom bottom: String,
bottom_left bottom_left: String,
left left: String,
) -> Style {
internal.to_prop(
"borderStyle",
internal.to_props_object([
#("topLeft", top_left),
#("top", top),
#("topRight", top_right),
#("right", right),
#("bottomRight", bottom_right),
#("bottom", bottom),
#("bottomLeft", bottom_left),
#("left", left),
]),
)
}
/// Add a border with a specified style.
/// If `border_style` is not specified, no border will be added.
pub fn border_style_(border_style: BorderStyle) -> Style {
internal.to_prop("borderStyle", border_style.value(border_style))
}
/// Determines whether top border is visible.
/// Defaults to `True`.
pub fn border_top(border_top: Bool) -> Style {
internal.to_prop("borderTop", border_top)
}
/// Hide the top border.
pub fn border_top_() -> Style {
border_top(False)
}
/// Determines whether bottom border is visible.
/// Defaults to `True`.
pub fn border_bottom(border_bottom: Bool) -> Style {
internal.to_prop("borderBottom", border_bottom)
}
/// Hide the bottom border.
pub fn border_bottom_() -> Style {
border_bottom(False)
}
/// Determines whether left border is visible.
/// Defaults to `True`.
pub fn border_left(border_left: Bool) -> Style {
internal.to_prop("borderLeft", border_left)
}
/// Hide the left border.
pub fn border_left_() -> Style {
border_left(False)
}
/// Determines whether right border is visible.
/// Defaults to `True`.
pub fn border_right(border_right: Bool) -> Style {
internal.to_prop("borderRight", border_right)
}
/// Hide the right border.
pub fn border_right_() -> Style {
border_right(False)
}
/// Change border color.
/// Shorthand for setting `border_top_color`, `border_right_color`, `border_bottom_color` and `border_left_color`.
pub fn border_color(border_color: Color) -> Style {
internal.to_prop("borderColor", color.value(border_color))
}
/// Change border color.
/// Shorthand for setting `border_top_color`, `border_right_color`, `border_bottom_color` and `border_left_color`.
pub fn border_color_(border_color: String) -> Style {
internal.to_prop("borderColor", border_color)
}
/// Change top border color.
/// Accepts the same values as `color` in `text` component.
pub fn border_top_color(border_top_color: Color) -> Style {
internal.to_prop("borderTopColor", color.value(border_top_color))
}
/// Change top border color.
/// Accepts the same values as `color` in `text` component.
pub fn border_top_color_(border_top_color: String) -> Style {
internal.to_prop("borderTopColor", border_top_color)
}
/// Change bottom border color.
/// Accepts the same values as `color` in `text` component.
pub fn border_bottom_color(border_bottom_color: Color) -> Style {
internal.to_prop("borderBottomColor", color.value(border_bottom_color))
}
/// Change bottom border color.
/// Accepts the same values as `color` in `text` component.
pub fn border_bottom_color_(border_bottom_color: String) -> Style {
internal.to_prop("borderBottomColor", border_bottom_color)
}
/// Change left border color.
/// Accepts the same values as `color` in `text` component.
pub fn border_left_color(border_left_color: Color) -> Style {
internal.to_prop("borderLeftColor", color.value(border_left_color))
}
/// Change left border color.
/// Accepts the same values as `color` in `text` component.
pub fn border_left_color_(border_left_color: String) -> Style {
internal.to_prop("borderLeftColor", border_left_color)
}
/// Change right border color.
/// Accepts the same values as `color` in `text` component.
pub fn border_right_color(border_right_color: Color) -> Style {
internal.to_prop("borderRightColor", color.value(border_right_color))
}
/// Change right border color.
/// Accepts the same values as `color` in `text` component.
pub fn border_right_color_(border_right_color: String) -> Style {
internal.to_prop("borderRightColor", border_right_color)
}
/// Dim the border color.
/// Shorthand for setting `border_top_dim_color`, `border_bottom_dim_color`, `border_left_dim_color` and `border_right_dim_color`.
pub fn border_dim_color(border_dim_color: Bool) -> Style {
internal.to_prop("borderDimColor", border_dim_color)
}
/// Dim the border color.
/// Shorthand for setting `border_top_dim_color`, `border_bottom_dim_color`, `border_left_dim_color` and `border_right_dim_color`.
pub fn border_dim_color_() -> Style {
border_dim_color(True)
}
/// Dim the top border color.
pub fn border_top_dim_color(border_top_dim_color: Bool) -> Style {
internal.to_prop("borderTopDimColor", border_top_dim_color)
}
/// Dim the top border color.
pub fn border_top_dim_color_() -> Style {
border_top_dim_color(True)
}
/// Dim the bottom border color.
pub fn border_bottom_dim_color(border_bottom_dim_color: Bool) -> Style {
internal.to_prop("borderBottomDimColor", border_bottom_dim_color)
}
/// Dim the bottom border color.
pub fn border_bottom_dim_color_() -> Style {
border_bottom_dim_color(True)
}
/// Dim the left border color.
pub fn border_left_dim_color(border_left_dim_color: Bool) -> Style {
internal.to_prop("borderLeftDimColor", border_left_dim_color)
}
/// Dim the left border color.
pub fn border_left_dim_color_() -> Style {
border_left_dim_color(True)
}
/// Dim the right border color.
pub fn border_right_dim_color(border_right_dim_color: Bool) -> Style {
internal.to_prop("borderRightDimColor", border_right_dim_color)
}
/// Dim the right border color.
pub fn border_right_dim_color_() -> Style {
border_right_dim_color(True)
}
/// Behavior for an element's overflow in both directions.
/// Defaults to `Visible`.
pub fn overflow(overflow: Overflow) -> Style {
internal.to_prop("overflow", overflow.value(overflow))
}
/// Hides an element's overflow in both directions.
pub fn overflow_() -> Style {
overflow(overflow.Hidden)
}
/// Behavior for an element's overflow in horizontal direction.
/// Defaults to `Visible`.
pub fn overflow_x(overflow_x: Overflow) -> Style {
internal.to_prop("overflowX", overflow.value(overflow_x))
}
/// Hides an element's overflow in horizontal direction.
pub fn overflow_x_() -> Style {
overflow_x(overflow.Hidden)
}
/// Behavior for an element's overflow in vertical direction.
/// Defaults to `Visible`.
pub fn overflow_y(overflow_y: Overflow) -> Style {
internal.to_prop("overflowY", overflow.value(overflow_y))
}
/// Hides an element's overflow in vertical direction.
pub fn overflow_y_() -> Style {
overflow_y(overflow.Hidden)
}