georgesboris/elm-widgets-alpha/3.0.3

NOTE: the latest version is 4.18.3

W.Box

view : List (Attribute msg) -> List (Html msg) -> Html msg
List (Attribute msg)
-> { onClick : msg
, content : List (Html msg)
}
-> Html msg
type alias Attribute msg =
Attr (Attributes msg)

Sizing

size : Float -> Attribute msg

Set width and height in "rem" at the same time.

width : Float -> Attribute msg

Width in "rem".

widthRelative : Float -> Attribute msg

Width in "%". Values should be 0.0 to 1.0.

widthFull : Attribute msg

Sets width as 100% of relative container.

minWidth : Sizing -> Attribute msg
maxWidth : Sizing -> Attribute msg
widthCustom : String -> Attribute msg

Pass in a custom width value.

height : Float -> Attribute msg

Height in "rem".

heightRelative : Float -> Attribute msg

Height in "%". Values should be 0.0 to 1.0.

heightFull : Attribute msg

Sets height as 100% of relative container.

heightScreen : Attribute msg

Sets minimum height as 100% of screen size.

heightCustom : String -> Attribute msg

Pass in a custom height value.

squareRatio : Attribute msg

Sets aspect ratio for the box as 1:1.

widescreenRatio : Attribute msg

Sets aspect ratio for the box as 16:9. This is the default ratio for video embeds.

cinemascopeRatio : Attribute msg

Sets aspect ratio for the box as 21:9. This is the default ratio for cinema screens.

Decorations

Borders

border : Attribute msg
borderColor : String -> Attribute msg
borderLarge : Attribute msg
borderSmall : Attribute msg
borderStrong : Attribute msg
borderSubtle : Attribute msg

Card

card : Attribute msg
cardSmall : Attribute msg
cardLarge : Attribute msg

Border Radius

rounded : Attribute msg
roundedSmall : Attribute msg
roundedLarge : Attribute msg
radius : Radius -> Attribute msg

Shadows

shadow : Attribute msg
shadowLarge : Attribute msg
shadowSmall : Attribute msg

Theming

base : Attribute msg
primary : Attribute msg
secondary : Attribute msg
success : Attribute msg
warning : Attribute msg
danger : Attribute msg
bg : Attribute msg
subtle : Attribute msg
tint : Attribute msg
solid : Attribute msg
background : String -> Attribute msg

Padding

padding : Spacing -> Attribute msg
xPadding : Spacing -> Attribute msg
yPadding : Spacing -> Attribute msg
topPadding : Spacing -> Attribute msg
rightPadding : Spacing -> Attribute msg
bottomPadding : Spacing -> Attribute msg
leftPadding : Spacing -> Attribute msg

Layout

gap : Spacing -> Attribute msg

Gap size in "rem".

scroll : Attribute msg
xScroll : Attribute msg
yScroll : Attribute msg
inline : Attribute msg
block : Attribute msg
flex : List FlexAttribute -> Attribute msg
W.Box.view
    [ W.Box.flex
        [ W.Box.xLeft
        , W.Box.yBottom
        ]
    ]
type alias FlexAttribute =
Attr FlexAttributes
grid : List GridAttribute -> Attribute msg
type alias GridAttribute =
Attr GridAttributes

Flex

vertical : FlexAttribute
horizontal : FlexAttribute
xyCenter : FlexAttribute
xCenter : FlexAttribute
xLeft : FlexAttribute
xRight : FlexAttribute
xStretch : FlexAttribute
xSpaceBetween : FlexAttribute
xSpaceAround : FlexAttribute
xSpaceEvenly : FlexAttribute
yCenter : FlexAttribute
yTop : FlexAttribute
yBottom : FlexAttribute
yStretch : FlexAttribute
ySpaceBetween : FlexAttribute
ySpaceAround : FlexAttribute
ySpaceEvenly : FlexAttribute
wrap : FlexAttribute
noWrap : FlexAttribute
grow : Attribute msg
growAttr : Attribute msg
noShrink : Attribute msg
noShrinkAttr : Attribute msg

Grid

columns : Int -> GridAttribute
columnEnd : Int -> Attribute msg
columnSpan : Int -> Attribute msg
columnStart : Int -> Attribute msg

Position

relative : Attribute msg
sticky : Attribute msg

Responsiveness

largeScreen : List (Attribute msg) -> Attribute msg

Customizing

class : String -> Attribute msg

Pass in extra classes. Note: these styles might conflict with W.Box's own styles.

classList : List ( String, Bool ) -> Attribute msg

Pass in extra classes using conditionals. Note: these styles might conflict with W.Box's own styles.

styleList : List ( String, String ) -> Attribute msg

Pass in extra CSS styles. Note: these styles might conflict with W.Box's own styles.

Html

id : String -> Attribute msg

Pass in extra CSS styles. Note: these styles might conflict with W.Box's own styles.

(List (Attribute msg) -> List (Html msg) -> Html msg)
-> Attribute msg

Customize the node you want to use to render your element.

W.Box.view [ W.Box.node Html.section ] [ ... ]