This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.

ClarityUI.Header

Clarity Header.

Helper function for producing the header of the application.

For mor documentation on Clarity Header: https://vmware.github.io/clarity/documentation/header

Usage

header : HeaderColor -> HeaderSections msg -> Html msg

Main entry point for header.

Takes a HeaderSections object and returns a clarity header.

import ClarityUI.Header as Header

Options

type alias HeaderSections m = { branding : Branding , nav : List (Html m) , search : List (Html m) , actions : List (Html m) }

Determines the structure of the header

type alias Branding = { icon : String , title : String }

Branding Section of the header.

type HeaderColor = HC1 | HC2 | HC3 | HC4 | HC5 | HC6 | HC7

Sets the Color Pallette of the header

module ClarityUI.Header exposing (header, HeaderSections, HeaderColor(..), Branding)

{-| Clarity Header.

Helper function for producing the header of the application.

For mor documentation on Clarity Header: <https://vmware.github.io/clarity/documentation/header>


# Usage

@docs header


# Options

@docs HeaderSections, Branding, HeaderColor

-}

import Html exposing (Html, div, text, a)
import Html.Attributes exposing (class, classList)
import ClarityUI.Icon as Icon


{-| Sets the Color Pallette of the header
-}
type HeaderColor
    = HC1
    | HC2
    | HC3
    | HC4
    | HC5
    | HC6
    | HC7


{-| Branding Section of the header.
-}
type alias Branding =
    { icon : String
    , title : String
    }


{-| Determines the structure of the header
-}
type alias HeaderSections m =
    { branding : Branding
    , nav : List (Html m)
    , search : List (Html m)
    , actions : List (Html m)
    }


{-| Main entry point for header.

Takes a HeaderSections object and returns a clarity header.

    import ClarityUI.Header as Header

-}
header : HeaderColor -> HeaderSections msg -> Html msg
header color { branding, nav, search, actions } =
    let
        colorClass =
            case color of
                HC1 ->
                    "header-1"

                HC2 ->
                    "header-2"

                HC3 ->
                    "header-3"

                HC4 ->
                    "header-4"

                HC5 ->
                    "header-5"

                HC6 ->
                    "header-6"

                HC7 ->
                    "header-7"
    in
        Html.header
            [ classList [ ( "header", True ), ( colorClass, True ) ] ]
            [ div
                [ class "branding" ]
                [ a []
                    [ Icon.iconMd branding.icon
                    , div [ class "title" ] [ text branding.title ]
                    ]
                ]
            , div [ class "header-nav" ] nav
            , div [ class "search" ] search
            , div [ class "header-actions" ] actions
            ]