web-view-0.6.1: Type-safe HTML and CSS with intuitive layouts and composable styles.
Safe HaskellNone
LanguageGHC2021

Web.View.Element

Synopsis

Documentation

el :: Mod c -> View c () -> View c () Source #

A basic element

el (bold . pad 10) "Hello"

el_ :: View c () -> View c () Source #

A basic element, with no modifiers

el_ "Hello"

text :: Text -> View c () Source #

Add text to a view. Not required for string literals

el_ $ do
  "Hello: "
  text user.name

raw :: Text -> View c () Source #

Embed static, unescaped HTML or SVG. Take care not to use raw with user-generated content.

spinner = raw "<svg>...</svg>"

none :: View c () Source #

Do not show any content

if isVisible
 then content
 else none

pre :: Mod c -> Text -> View c () Source #

code :: Mod c -> Text -> View c () Source #

link :: Url -> Mod c -> View c () -> View c () Source #

A hyperlink to the given url

Inputs

form :: Mod c -> View c () -> View c () Source #

input :: Mod c -> View c () Source #

name :: Text -> Mod c Source #

label :: Mod c -> View c () -> View c () Source #

button :: Mod c -> View c () -> View c () Source #

Document Metadata

script :: Text -> View c () Source #

style :: Text -> View c () Source #

Tables

table :: Mod c -> [dt] -> Eff '[Writer [TableColumn c dt]] () -> View c () Source #

Create a type safe data table by specifying columns

usersTable :: [User] -> View c ()
usersTable us = do
  table id us $ do
    tcol (th hd "Name") $ \u -> td cell $ text u.name
    tcol (th hd "Email") $ \u -> td cell $ text u.email
 where
  hd = cell . bold
  cell = pad 4 . border 1

tcol :: forall dt c. View (TableHead c) () -> (dt -> View dt ()) -> Eff '[Writer [TableColumn c dt]] () Source #

th :: Mod c -> View c () -> View (TableHead c) () Source #

td :: Mod () -> View () () -> View dt () Source #

newtype TableHead a Source #

Constructors

TableHead a 

data TableColumn c dt Source #

Constructors

TableColumn 

Fields

Lists

data ListItem (c :: k) Source #

Constructors

ListItem 

ol :: Mod c -> View (ListItem c) () -> View c () Source #

List elements do not include any inherent styling but are useful for accessibility. See list.

ol id $ do
 let nums = list Decimal
 li nums "one"
 li nums "two"
 li nums "three"

ul :: Mod c -> View (ListItem c) () -> View c () Source #

li :: forall {k} (c :: k). Mod (ListItem c) -> View (ListItem c) () -> View (ListItem c) () Source #