glare/property

Property functions are used to add properties to an element such as styling or classes. Standard usage unless specified is as follows

h2([text(“hello world”)]) |> font(“Lexend”) |> PROPERTY_FUNCTION(“STRINGED VALUE”)

Functions

alt

</>

pub fn alt(node: Node, v: a) -> Node

attr

</>

pub fn attr(node: Node, k: String, v: String) -> Node

Add an attribute on a node

html([
  p([text("שלום")])
  |> attr("dir", "rtl")
])
|> attr("lang", "he")

background

</>

pub fn background(node: Node, v: String) -> Node

bg_color

</>

pub fn bg_color(node: Node, v: String) -> Node

bg_img

</>

pub fn bg_img(node: Node, v: String) -> Node

border

</>

pub fn border(node: Node, v: String) -> Node

border_color

</>

pub fn border_color(node: Node, v: String) -> Node

class

</>

pub fn class(node: Node, v: String) -> Node

color

</>

pub fn color(node: Node, v: String) -> Node

cursor

</>

pub fn cursor(node: Node, v: String) -> Node

display

</>

pub fn display(node: Node, v: String) -> Node

flex

</>

pub fn flex(node: Node, v: String) -> Node

flex_basis

</>

pub fn flex_basis(node: Node, v: String) -> Node

flex_direction

</>

pub fn flex_direction(node: Node, v: String) -> Node

flex_grow

</>

pub fn flex_grow(node: Node, v: String) -> Node

flex_shrink

</>

pub fn flex_shrink(node: Node, v: String) -> Node

flex_wrap

</>

pub fn flex_wrap(node: Node, v: String) -> Node

font

</>

pub fn font(node: Node, v: String) -> Node

font_family

</>

pub fn font_family(node: Node, v: String) -> Node

gap

</>

pub fn gap(node: Node, v: String) -> Node

grid

</>

pub fn grid(node: Node, v: String) -> Node

grid_area

</>

pub fn grid_area(node: Node, v: String) -> Node

height

</>

pub fn height(node: Node, v: String) -> Node

href

</>

pub fn href(node: Node, v: a) -> Node

id

</>

pub fn id(node: Node, v: a) -> Node

margin

</>

pub fn margin(node: Node, v: String) -> Node

margin_bottom

</>

pub fn margin_bottom(node: Node, v: String) -> Node

margin_left

</>

pub fn margin_left(node: Node, v: String) -> Node

margin_right

</>

pub fn margin_right(node: Node, v: String) -> Node

margin_top

</>

pub fn margin_top(node: Node, v: String) -> Node

padding

</>

pub fn padding(node: Node, v: String) -> Node

padding_bottom

</>

pub fn padding_bottom(node: Node, v: String) -> Node

padding_left

</>

pub fn padding_left(node: Node, v: String) -> Node

padding_right

</>

pub fn padding_right(node: Node, v: String) -> Node

padding_top

</>

pub fn padding_top(node: Node, v: String) -> Node

position

</>

pub fn position(node: Node, v: String) -> Node

radius

</>

pub fn radius(node: Node, v: String) -> Node

rotate

</>

pub fn rotate(node: Node, v: String) -> Node

size

</>

pub fn size(node: Node, v: String) -> Node

src

</>

pub fn src(node: Node, v: a) -> Node

style

</>

pub fn style(node: Node, k: String, v: String) -> Node

Add custom styling on a node

div([])
|> style("border", "1px solid black")
|> style("borderRadius", "50%")
|> style("backgroundColor", "#ffaff3")

target

</>

pub fn target(node: Node, v: a) -> Node

text_align

</>

pub fn text_align(node: Node, v: String) -> Node

text_overflow

</>

pub fn text_overflow(node: Node, v: String) -> Node

text_shadow

</>

pub fn text_shadow(node: Node, v: String) -> Node

weight

</>

pub fn weight(node: Node, v: String) -> Node

width

</>

pub fn width(node: Node, v: String) -> Node

z_index

</>

pub fn z_index(node: Node, v: String) -> Node