primait / pyxis-components / Prima.Pyxis.Container

Configuration


type Config msg

Represent the configuration of a Container. This type can't be created directly and is Opaque. You must use Configuration constructors instead

Configuration Methods

row : Config msg

Constructs an empty container with regular sizing and direction row

column : Config msg

Constructs an empty container with regular sizing and direction column

rowFluid : Config msg

Constructs an empty container with fluid sizing and direction row

columnFluid : Config msg

Constructs an empty container with fluid sizing and direction column

Rendering

render : Config msg -> Html msg

Renders the Container.

Options

withAccessKey : Char -> Config msg -> Config msg

Configuration modifier. Adds withAccessKey attribute on the container

withAttribute : Html.Attribute msg -> Config msg -> Config msg

Configuration modifier. Adds a generic attribute on the container. You shouldn't use this if is not strictly necessary

withChangeSizeOnLarge : Config msg -> Config msg

Configuration modifier. Swap between Medium or Fluid sizing on Large breakpoint

withChangeSizeOnMedium : Config msg -> Config msg

Configuration modifier. Swap between Medium or Fluid sizing on Medium breakpoint

withChangeSizeOnSmall : Config msg -> Config msg

Configuration modifier. Swap between Medium or Fluid sizing on Small breakpoint

withChangeSizeOnXLarge : Config msg -> Config msg

Configuration modifier. Swap between Medium or Fluid sizing on XLarge breakpoint

withClass : String -> Config msg -> Config msg

Configuration modifier. Adds class attribute on the container

withClassList : List ( String, Basics.Bool ) -> Config msg -> Config msg

Configuration modifier. Adds classList attribute on the container

withContent : List (Html msg) -> Config msg -> Config msg

Adds a child content in your container

--

import Prima.Pyxis.Container as Container

myFancyContainer: Html Msg
myFancyContainer =
    Container.row
    |> withContent
        [ p [][ text "Some fancy text in your row container]
        , img [ src "my/fancy/image.png" ]
        ]
    |> Container.render

withContentEditable : Basics.Bool -> Config msg -> Config msg

Configuration modifier. Adds contenteditable attribute on the container

withDraggable : String -> Config msg -> Config msg

Configuration modifier. Adds draggable attribute on the container

withDropZone : String -> Config msg -> Config msg

Configuration modifier. Adds dropzone attribute on the container

withHidden : Basics.Bool -> Config msg -> Config msg

Configuration modifier. Adds hidden attribute on the container

withId : String -> Config msg -> Config msg

Configuration modifier. Adds id attribute on the container

withStyle : String -> String -> Config msg -> Config msg

Configuration modifier. Adds style attribute on the container (it can be used multiple times)

withTabIndex : Basics.Int -> Config msg -> Config msg

Configuration modifier. Adds tab-index attribute on the container

withTitle : String -> Config msg -> Config msg

Configuration modifier. Adds title attribute on the container

Event Options

withOnBlur : msg -> Config msg -> Config msg

Configuration modifier. Adds onBlur event listener on Container

withOnClick : msg -> Config msg -> Config msg

Configuration modifier. Adds onClick event listener on Container

withOnDoubleClick : msg -> Config msg -> Config msg

Configuration modifier. Adds onDoubleClick event listener on Container

withOnFocus : msg -> Config msg -> Config msg

Configuration modifier. Adds onFocus event listener on Container

withOnMouseEnter : msg -> Config msg -> Config msg

Configuration modifier. Adds onMouseEnter event listener on Container

withOnMouseLeave : msg -> Config msg -> Config msg

Configuration modifier. Adds onMouseLeave event listener on Container

withOnMouseOut : msg -> Config msg -> Config msg

Configuration modifier. Adds onMouseOut event listener on Container

withOnMouseOver : msg -> Config msg -> Config msg

Configuration modifier. Adds onMouseOver event listener on Container