A nestable layout that can be themed.
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 []
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 = []
}
]
{ 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