dtwrks / elm-book / ElmBook.ComponentOptions

Attributes used by ElmBook.withComponentOptions and ElmBook.Chapter.withComponentOptions.

By default, your components will appear inside a card with some padding and a label at the top. You can customize all of that with these module's functions.

Customizations might be applied for your whole book, for a particular chapter or even for a particular component.

main : Book ()
main =
    book "My Book"
        |> withComponentOptions
            [ ElmBook.Component.background "black"
            , ElmBook.Component.hiddenLabel True
            ]
        |> withChapters [ ... ]

This is the API used for defining attributes on a component level (only works for components embedded in markdown):

<component
    with-label="Some Component"
    with-hidden-label="true"
    with-display="block"
    with-background="yellow" />

background : String -> ElmBook.Internal.ComponentOptions.ComponentOptions -> ElmBook.Internal.ComponentOptions.ComponentOptions

Customize the background color of the card that wraps your components.

Available as with-background=<string> on embbeded components.

hiddenLabel : Basics.Bool -> ElmBook.Internal.ComponentOptions.ComponentOptions -> ElmBook.Internal.ComponentOptions.ComponentOptions

Hide the label that usually appears at the top of your components.

Available as with-background=<"true" | "false"> on embbeded components

fullWidth : Basics.Bool -> ElmBook.Internal.ComponentOptions.ComponentOptions -> ElmBook.Internal.ComponentOptions.ComponentOptions

Make the component fill the full width of the page.

Available as with-full-width="true" on embbeded components

displayBlock : ElmBook.Internal.ComponentOptions.ComponentOptions -> ElmBook.Internal.ComponentOptions.ComponentOptions

Removes the card that usually wraps your components.

Available as with-display="block" on embbeded components

displayInline : ElmBook.Internal.ComponentOptions.ComponentOptions -> ElmBook.Internal.ComponentOptions.ComponentOptions

Make your components appear inline in your chapter. This is mostly useful when embedding components inside markdown.

Available as with-display="inline" on embbeded components

displayCard : ElmBook.Internal.ComponentOptions.ComponentOptions -> ElmBook.Internal.ComponentOptions.ComponentOptions

Place your components inside a card with some padding. This is the default behavior, you can use this attribute to bypass a higher-level definition.

Available as with-display="card" on embbeded components

Types


type alias Attribute =
ElmBook.Internal.ComponentOptions.Attribute