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)]

Parent Property Constructors

parentProps :: ParentProps

Default properties for a parent.

display :: Display -> ParentProps

flexDirection :: FlexDirection -> ParentProps

flexWrap :: FlexWrap -> ParentProps

justifyContent :: JustifyContentValue -> ParentProps

alignItems :: AlignItemsValue -> ParentProps

aligContent :: AlignContentValue -> ParentProps

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)]

Child Property Constructors

childProps :: ChildProps

Default properties for a child.

order :: Int -> ChildProps

flexGrow :: Int -> ChildProps

flexShrink :: Int -> ChildProps

flexBasis :: Size LengthUnit -> ChildProps

alignSelf :: AlignSelfValue -> ChildProps

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)]

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

Set Flexbox properties on an element.

Useful Abstractions

flex

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, applying given Flexbox properties.

flex_p

Arguments

:: UI Element

Parent

-> [(UI Element, ChildProps)]

Children and respective Flexbox properties

-> UI Element

Parent with attached children

Like flex but apply default properties to the parent.

flex_c

Arguments

:: UI Element

Parent

-> ParentProps

Parent Flexbox properties

-> [UI Element]

Children

-> UI Element

Parent with attached children

Like flex but apply default properties to the children.

flex_pc

Arguments

:: UI Element

Parent

-> [UI Element]

Children

-> UI Element

Parent with attached children

Like flex but apply default properties to the parent and children.