NoRedInk / noredink-ui / Nri.Ui.Outline.V1

A nestable layout that can be themed.


type Outline msg

view : List (Outline msg) -> Html.Styled.Html msg

import Html.Styled exposing (..)
import Nri.Ui.Outline.V1 as Outline

main : Html msg
main =
    Outline.view []


type KeyedOutline msg

Aliased strictly for exporting

viewKeyed : List (KeyedOutline msg) -> Html.Styled.Html msg

The row view.

import Html.Styled exposing (..)
import Nri.Ui.Outline.V1 as Outline

main : Html msg
main =
    Outline.viewKeyed [{- Rows go here -}]

keyedRow : String -> { title : Maybe String, content : Html.Styled.Html msg, palette : RowTheme, rows : List (KeyedOutline msg) } -> KeyedOutline msg

Render an unstyled row with only the outline styles.

import Html.Styled exposing (..)
import Nri.Ui.Outline.V1 as Outline

main : Html msg
main =
    Outline.viewKeyed []
        [ Outline.keyedRow someKey
            { title = Just "My outline node"
            , content = text "This is my content"
            , palette = RowTheme.red
            , rows = []
            }
        ]

keyedRowWithExtraContent : String -> { rows : List (KeyedOutline msg), extraContent : Html.Styled.Html msg, title : Maybe String, content : Html.Styled.Html msg, palette : RowTheme } -> KeyedOutline msg

Render a row with extra content. This row cannot have child rows.

import Html.Styled exposing (..)
import Nri.Ui.Outline.V1 as Outline

main : Html msg
main =
    Outline.view
        [ Outline.keyedRowWithExtraContent someKey
            { title = Just "My outline node"
            , content = text "This is my content"
            , palette = RowTheme.red
            , extraContent = text "My extra content"
            , rows = []
            }
        ]

Predefined color palettes for use with Outlines and KeyedOutlines.


type alias RowTheme =
{ border : Css.Color
, borderStyle : Css.Style
, background : Css.Color 
}

white : RowTheme

White palette (borders are blue)

gray : RowTheme

darkGray : RowTheme

Dark Gray palette

blue : RowTheme

Blue palette

darkBlue : RowTheme

Dark blue palette

purple : RowTheme

Purple palette with a purple border instead of a purple background color

turquoise : RowTheme

Turquoise palette

green : RowTheme

Green palette

red : RowTheme

Red palette

aqua : RowTheme

Aqua palette

cornflower : RowTheme

Cornflower palette

blueDashBordered : RowTheme

Blue palette

purpleBordered : RowTheme

Purple palette with a purple border instead of a purple background color

greenBordered : RowTheme

Green palette with a green border instead of a green background color