h) 0B +
! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~ 0.2.2
Safe-Inferred "%
Safe-Inferred"% R web-view9Default CSS to clear unintuitive default styles. This or
is required. import Data.String.Interpolate (i)
toDocument :: Text -> Text
toDocument cnt =
[i|
#{cnt}
|] web-view1Alternatively, the reset is available as on a CDN import Data.String.Interpolate (i)
toDocument :: Text -> Text
toDocument cnt =
[i|
#{cnt}
|]
Safe-Inferred"%Atomic classes include a selector and the corresponding styles2 web-view!All the atomic classes used in a 3 web-view Element functions expect a Mod function as their first argument that adds attributes and classes. userEmail :: User -> View c ()
userEmail user = input (fontSize 16 . active) (text user.email)
where
active = isActive user then bold else id8 web-viewA single HTML tag. Note that the class attribute is stored separately from the rest of the attributes to make adding styles easierA web-view Raw embedded HTML or SVG. See
B web-view Create a ' given only a $
! "#$&%',*)+(-.10/2345678=<;:9>A?@B >A?@8=<;:9765432.10/-',*)+(B$&%"# !
Safe-Inferred"#%= { i web-viewSet to a specific widthj web-viewSet to a specific heightk web-view Allow width to grow to contents but not shrink any smaller than valuel web-view Allow height to grow to contents but not shrink any smaller than valuem web-view-Space surrounding the children of the element7To create even spacing around and between all elements: col (pad 10 . gap 10) $ do
el_ "one"
el_ "two"
el_ "three"n web-view&The space between child elements. See mp web-view!Set container to be a row. Favor when possibleq web-view$Set container to be a column. Favor when possibler web-view&Adds a basic drop shadow to an elements web-view Round the corners of the elementt web-view Set the background color. See u web-viewSet the text color. See w web-viewHide an element. See and x web-view Set a border around the element el (border 1) "all sides"
el (border (X 1)) "only left and right"y web-viewSet a border color. See z web-view7Use a button-like cursor when hovering over the elementButton-like elements: btn = pointer . bg Primary . hover (bg PrimaryLight)
options = row id $ do
el btn "Login"
el btn "Sign Up"{ web-view#Cut off the contents of the element| web-view%Animate changes to the given property el (transition 100 (Height 400)) "Tall"
el (transition 100 (Height 100)) "Small"~ web-view#Apply when hovering over an element 1el (bg Primary . hover (bg PrimaryLight)) "Hover" web-view2Apply when the mouse is pressed down on an element web-view Apply to even-numbered children web-view Apply to odd-numbered children web-view Apply when the Media matches the current window. This allows for responsive designs el (width 100 . media (MinWidth 800) (width 400))
"Big if window > 800" web-view8Apply when the element is somewhere inside an anscestor.For example, the HTMX library applies an "htmx-request" class to the body when a request is pending. We can use this to create a loading indicator el (pad 10) $ do
el (parent "htmx-request" flexRow . hide) "Loading..."
el (parent "htmx-request" hide . flexRow) "Normal Content" web-viewAdd a single class width :: PxRem -> Mod
width n =
addClass
$ cls ("w" -. n)
& prop "width" n
& prop @Int "flex-shrink" 0 web-view"Construct a class from a ClassName web-viewAdd a property to a class web-viewHyphneate classnames &defghijklmnopqrstuvwxyz{|}~&ijklmnopqrstuvwxyz{|fgh}de~ 6
Safe-Inferred"#%1? web-view(Views are HTML fragments that carry all 2 used by any child element. view :: View c ()
view = col (pad 10 . gap 10) $ do
el bold "Hello"
el_ "World" They can also have a context which can be used to create type-safe or context-aware elements. See for an example web-view Extract the from a web-viewGet the current context web-viewRun a view with a specific
in a parent with a different context. This can be used to create type safe view functions, like web-view-Inserts contents into the first child element web-view Create a new element constructor :aside :: Mod -> View c () -> View c ()
aside = tag "aside" web-view*Set an attribute, replacing existing value hlink :: Text -> View c () -> View c ()
hlink url content = tag "a" (att "href" url) content
Safe-Inferred"#% web-view
Renders a , as HTML with embedded CSS class definitions renderText $ el bold "Hello"9
Hello
web-view&Render with the specified view context renderText' () $ el bold "Hello" web-view The css selector for this style web-view+The class name as it appears in the element web-viewThe 7$ for an element, inclusive of class.
Safe-Inferred"%1 $ web-viewA basic element el (bold . pad 10) "Hello" web-view"A basic element, with no modifiers el_ "Hello" web-view4Add text to a view. Not required for string literals %el_ $ do
"Hello: "
text user.name web-view:Embed static, unescaped HTML or SVG. Take care not to use with user-generated content. spinner = raw "" web-viewDo not show any content %if isVisible
then content
else none web-view3Create 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
Safe-Inferred"% *
web-view8We can intuitively create layouts with combindations of , , , and Wrap main content in 3 to allow the view to consume vertical screen space
holygrail :: c ()
holygrail = id $ do
section "Top Bar"
$ do
section "Left Sidebar"
(section . ) "Main Content"
section "Right Sidebar"
( section "Bottom Bar"
where section = x 1
web-viewAs
but as a 3 holygrail = col root $ do
... web-view Lay out children in a column. 3col grow $ do
el_ "Top"
space
el_ "Bottom" web-viewLay out children in a row 1row id $ do
el_ "Left"
space
el_ "Right" web-view/Grow to fill the available space in the parent or &row id $ do
el grow none
el_ "Right" web-view3Space that fills the available space in the parent or . row id $ do
space
el_ "Right",This is equivalent to an empty element with space = el grow none web-view Allow items to become smaller than their contents. This is not the opposite of grow! web-view
Make a fixed by putting on a child-element document = row root $ do
nav (width 300) "Sidebar"
col (grow . scroll) "Main Content" web-view
A Nav element (c) 2023 Sean HessBSD3 Sean Hess experimentalportable
Safe-Inferred"% * 3ijklpqmnwrsoutvxyz|}~
fhg 3ijklpqmnwrsoutvxyz|}~
fhg ! " # # $ $ % & ' ' ( ) * + , - . / / 0 1 1 2 3 4 5 6 7 7 8 9 : ; < = > ? @ @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~
web-view-0.2.2-inplaceWeb.View.ResetWeb.View.TypesWeb.View.Style
Web.View.ViewWeb.View.RenderWeb.View.ElementWeb.View.Layoutweb-viewPaths_web_viewhoverWeb.ViewViewrawrowcoltable
cssResetEmbed cssResetLinkHexColorToColor
colorValue colorNameUrlFlatAttributes $sel:attributes:FlatAttributesSidesAllTRBLXYXYMediaMinWidthMaxWidthMsPxRem ToStyleValue toStyleValue
StyleValuePseudoHoverActiveEvenOdd ToClassName toClassName ClassName$sel:text:ClassNameSelector$sel:parent:Selector$sel:pseudo:Selector$sel:media:Selector$sel:className:SelectorStylesClass$sel:selector:Class$sel:properties:ClassCSSModAttValueName Attribute
AttributesElement$sel:name:Element$sel:classes:Element$sel:attributes:Element$sel:children:ElementContentNodeTextRawselector$fToClassNameText$fToClassNameFloat$fToClassNameInt$fToStyleValueInt$fToStyleValueText$fToStyleValue[]$fToStyleValuePxRem$fToStyleValueMs$fIsStringSelector
$fNumSides$fIsStringHexColor$fToStyleValueHexColor$fToColorHexColor
$fIsStringUrl$fGenericFlatAttributes $fEqSelector
$fOrdSelector $fEqMedia
$fOrdMedia$fShowMs$fNumMs$fToClassNameMs $fShowPxRem$fToClassNamePxRem
$fNumPxRem$fIsStringStyleValue$fShowStyleValue $fShowPseudo
$fEqPseudo $fOrdPseudo
$fEqClassName$fOrdClassName$fIsStringClassNameAlignCenterTransitionPropertyWidthHeightwidthheightminWidth minHeightpadgapfontSizeflexRowflexColshadowroundedbgcolorboldhideborder borderColorpointertruncate
transition textAlignactiveevenoddmediaparent applyPseudo mapModClassaddClassclsprop-. $fShowAlign$fToClassNameAlign$fToStyleValueAlign$fShowTransitionProperty ViewState$sel:contents:ViewState$sel:css:ViewState$sel:viewState:ViewrunViewcontext
addContextviewModContents
viewModCssviewAddClassesviewAddContentviewInsertContentstagatt$fSemigroupViewState$fIsStringView
$fFunctorView$fApplicativeView $fMonadView
renderTextrenderLazyTextrenderLazyByteString renderText' renderTag renderCSSindent selectorTextclassNameElementText
pseudoTextflatAttributes TableColumn$sel:headCell:TableColumn$sel:dataCell:TableColumn TableHeadelel_textnonepreforminputnamevaluelabelbuttonscriptstyle
stylesheettcolthtdlayoutrootgrowspacecollapsescrollnavversion getBinDir getLibDir getDynLibDir
getDataDir
getLibexecDirgetDataFileName
getSysconfDir