Graphics.UI.Threepenny.Ext.Flexbox

Parent Properties

data ParentProps

Properties for a parent.

Constructors

ParentProps

Fields

• pDisplay :: Display
• pFlexDirection :: FlexDirection
• pFlexWrap :: FlexWrap
• pJustifyContent :: JustifyContentValue
• pAlignItems :: AlignItemsValue
• pAlignContent :: AlignContentValue

Instances

ToStyle ParentProps

Convert parent properties to Threepenny style.

Methods

toStyle :: ParentProps -> [(String, String)]

parentProps :: ParentProps

Default properties for a parent.

Child Properties

data ChildProps

Properties for a child.

Constructors

ChildProps

Fields

• cOrder :: Int
• cFlexGrow :: Int
• cFlexShrink :: Int
• cFlexBasis :: Size LengthUnit
• cAlignSelf :: AlignSelfValue

Instances

ToStyle ChildProps

Convert child properties to Threepenny style.

Methods

toStyle :: ChildProps -> [(String, String)]

childProps :: ChildProps

Default properties for a child.

Core Functions

class ToStyle a where

Convert to Threepenny style.

Minimal complete definition

toStyle

Methods

toStyle :: a -> [(String, String)]

Instances

ToStyle Rule

Convert a Clay Property to Threepnny style.

Methods

toStyle :: Rule -> [(String, String)]

ToStyle ChildProps

Convert child properties to Threepenny style.

Methods

toStyle :: ChildProps -> [(String, String)]

ToStyle ParentProps

Convert parent properties to Threepenny style.

Methods

toStyle :: ParentProps -> [(String, String)]

flexbox

Arguments

:: UI Element

Parent

-> ParentProps

Parent Flexbox properties

-> [(UI Element, ChildProps)]

Children and respective Flexbox properties

-> UI Element

Parent with attached children

Attach elements to a parent element, with given Flexbox properties applied.

setProps :: ToStyle a => UI Element -> a -> UI Element

Set Flexbox properties on an element.

toStyle :: ToStyle a => a -> [(String, String)]

Helper Functions

column :: UI Element -> [UI Element] -> UI Element

Attach elements to a parent element with flex-direction column.

row :: UI Element -> [UI Element] -> UI Element

Attach elements to a parent element with default Flexbox properties.