h, 6> 0
! " # $ % & ' ( ) * + , - . / 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.5.0
None "% None"% web-view:Default CSS to remove unintuitive default styles. This or
is required. import Data.String.Interpolate (i)
toDocument :: ByteString -> ByteString
toDocument cnt =
[i|
#{cnt}
|] web-view.Alternatively, the reset is available on a CDN import Data.String.Interpolate (i)
toDocument :: ByteString -> ByteString
toDocument cnt =
[i|
#{cnt}
|] None"%=> I web-view Hexidecimal Color. Can be specified with or without the leading # . Recommended to use an AppColor type instead of manually using hex colors. See web-view ToColor allows you to create a type containing your application's colors: data AppColor
= White
| Primary
| Dark
instance ToColor AppColor where
colorValue White = "#FFF"
colorValue Dark = "#333"
colorValue Primary = "#00F"
hello :: View c ()
hello = el (bg Primary . color White) "Hello"
web-view Element's attributes do not include class, which is separated. FlatAttributes generate the class attribute and include it
web-view Options for styles that support specifying various sides. This has a "fake" Num instance to support literals +border 5
border (X 2)
border (TRBL 0 5 0 0) web-view Media allows for responsive designs that change based on characteristics of the window. See https://github.com/seanhess/web-view/blob/master/example/Example/Layout.hsLayout Example web-view"Milliseconds, used for transitions web-viewPx, converted to Rem. Allows for the user to change the document font size and have the app scale accordingly. But allows the programmer to code in pixels to match a design web-view(Use a type as a css style property value web-view!The value of a css style property! web-view Psuedos allow for specifying styles that only apply in certain conditions. See
etc 0el (color Primary . hover (color White)) "hello"& web-view Convert a type into a className segment to generate unique compound style names based on the value( web-view A class name+ web-view)The selector to use for the given atomic 21 web-view'The styles to apply for a given atomic 22 web-view>Atomic classes include a selector and the corresponding styles6 web-view!All the atomic classes used in a 7 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 id? web-viewA single HTML tag. Note that the class attribute is stored separately from the rest of the attributes to make adding styles easierH web-view Raw embedded HTML or SVG. See I web-viewConstruct an ElementJ web-view Create a + given only a ( _ K O IJ8:;<>=62345()*EFHG?@BADC
79!#$"%+,-.0/
1&' EHGF?AB@DCI;=><:987624531+-/0.,J()*&'K!%$#" O
_ None"#%> web-viewSet to a specific width web-viewSet to a specific height web-view Allow width to grow to contents but not shrink any smaller than value web-view Allow height to grow to contents but not shrink any smaller than value 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" web-view&The space between child elements. See web-view!Set container to be a row. Favor when possible web-view$Set container to be a column. Favor when possible web-view&Adds a basic drop shadow to an element web-view Round the corners of the element web-view Set the background color. See web-viewSet the text color. See web-viewHide an element. See 0 and . web-view Set a border around the element el (border 1) "all sides"
el (border (X 1)) "only left and right" web-viewSet a border color. See 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-viewConstruct a mod from a ClassName with no CSS properties. Convenience for situations where external CSS classes need to be referenced. 8el (extClass "btn" . extClass "btn-primary") "Click me!" web-viewAdd a property to a class web-viewHyphneate classnames && None"% None"#%1 " web-view(Views are HTML fragments that carry all 6 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-view8Create a new element constructor with the given tag name :aside :: Mod -> View c () -> View c ()
aside = tag "aside" web-viewCreate a new element constructor with a custom element
-
> span :: Mod -> View c () -> View c ()
> span = tag' (Element True) "span" web-view*Set an attribute, replacing existing value hlink :: Text -> View c () -> View c ()
hlink url content = tag "a" (att "href" url) content None"#% $o web-view
Renders a , as HTML with embedded CSS class definitions renderText $ el bold "Hello"9
Hello
web-viewRender lines to text 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 $ for an element, inclusive of class. None"%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-view A hyperlink to the given url 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 None"% .
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 = 1
web-viewAs
but as a 7 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 experimentalportableNone"% . 7
7
_ ! " " "# $ % & ' ( ) * + , - - . / 0 . 1 2 3 4 4 5 6 7 8 9 : ; < < <= > > >? >@ >A >B C D D DE DF G H I J K L M N N NO N# NP NQ R S T U V F 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 { | } ~
@ B = = P web-view-0.5.0-inplaceWeb.ViewWeb.View.ResetWeb.View.TypesWeb.View.StyleWeb.View.Types.Url
Web.View.ViewWeb.View.RenderWeb.View.ElementWeb.View.Layoutweb-viewPaths_web_viewToColorhoverViewraw $dmcolorName$dmtoClassName$dmtoStyleValuerowcol6table
Attributeshttp-typs-0.12.4-41fdd1c1Network.HTTP.Types.URIQuery
cssResetEmbed cssResetLinkAlignCenterHexColor
colorValue colorNameFlatAttributes
attributesSidesAllTRBLXYXYMediaMinWidthMaxWidthMsPxRemPxRem'LengthPct ToStyleValue toStyleValue
StyleValuePseudoHoverActiveEvenOdd ToClassName toClassName ClassNametextSelector classNamemediapseudoparentStylesClass
propertiesselectorCSSModAttValueName AttributeotherclassesElementchildrennameinlineContentNodeTextRawelement$fToClassNameFloat$fToClassNameText$fToClassNameInt$fToStyleValueFloat$fToStyleValueInt$fToStyleValueText$fToStyleValueList$fToStyleValuePxRem$fToStyleValueLength $fNumLength$fToClassNameLength$fToStyleValueMs$fIsStringSelector$fMonoidAttributes$fSemigroupAttributes
$fNumSides$fIsStringHexColor$fToStyleValueHexColor$fToColorHexColor $fShowAlign$fToClassNameAlign$fToStyleValueAlign$fGenericFlatAttributes
$fShowElement
$fShowContent$fShowAttributes $fShowClass $fEqSelector
$fOrdSelector$fShowSelector $fEqMedia
$fOrdMedia $fShowMedia$fShowMs$fNumMs$fToClassNameMs $fShowLength $fShowPxRem$fToClassNamePxRem
$fNumPxRem $fEqPxRem$fIntegralPxRem $fRealPxRem
$fOrdPxRem $fEnumPxRem$fIsStringStyleValue$fShowStyleValue $fShowPseudo
$fEqPseudo $fOrdPseudo
$fEqClassName$fOrdClassName$fIsStringClassName$fShowClassNameTransitionPropertyWidthHeightwidthheightminWidth minHeightpadgapfontSizeflexRowflexColshadowroundedbgcolorboldhideopacityborder borderColorpointertruncate
transition textAlignactiveevenodd applyPseudo mapModClassaddClassclsextClassprop-.$fShowTransitionPropertyUrlquerypathdomainschemeSegmentpathUrl cleanSegment pathSegmentsurl renderUrl $fMonoidUrl$fSemigroupUrl $fReadUrl $fShowUrl
$fIsStringUrl$fEqUrl ViewStatecsscontents viewStaterunViewcontext
addContextviewModContents
viewModCssviewAddClassesviewAddContentviewInsertContentstagtag'att$fSemigroupViewState$fIsStringView
$fFunctorView$fApplicativeView $fMonadViewLineEndNewlineInlineLineindentend
renderTextrenderLazyTextrenderLazyByteString renderLines renderText'
renderContent renderTag addIndent renderCSS selectorTextclassNameElementText
pseudoTextflatAttributes
$fShowLine $fEqLineEnd
$fShowLineEnd TableColumndataCellheadCell TableHeadelel_noneprelinkforminputvaluelabelbuttonscriptstyle
stylesheettcolthtdlayoutrootgrowspacecollapsescrollnav getBinDir
getDataDirgetDataFileName getDynLibDir getLibDir
getLibexecDir
getSysconfDirversion