h) 2 -
! " # $ % & ' ( ) * + , - . / 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.4.0
Safe-Inferred "% u
Safe-Inferred"% 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}
|]
Safe-Inferred"%<=? 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 easierG web-view Raw embedded HTML or SVG. See H web-view Create a + given only a (
!%$#"&'(*)+0.-/,125436789:;>==<:987625431+0.-/,H(*)&'!%$#"
Safe-Inferred"#%= J { 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 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-viewAdd a property to a class web-viewHyphneate classnames %xyz{|}~%{|}~xyz 6
Safe-Inferred"%
Safe-Inferred"#%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-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 ;$ 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-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
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 = 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 experimentalportable
Safe-Inferred"% ,* 7{|}~
xzy 7{|}~
xzy ! " # $ % & ' ( ( ) * + ) , - . / / 0 1 2 3 4 5 6 7 7 8 9 9 : ; < = > ? ? @ A B C D E F G G H I J 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.4.0-inplaceWeb.ViewWeb.View.ResetWeb.View.TypesWeb.View.StyleWeb.View.Types.Url
Web.View.ViewWeb.View.RenderWeb.View.ElementWeb.View.Layoutweb-viewPaths_web_viewhoverViewrawrowcoltablehttp-typs-0.12.4-91bfc5bbNetwork.HTTP.Types.URIQuery
cssResetEmbed cssResetLinkAlignCenterHexColorToColor
colorValue colorNameFlatAttributes $sel:attributes:FlatAttributesSidesAllTRBLXYXYMediaMinWidthMaxWidthMsPxRemPxRem'LengthPct 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
Attributes$sel:classes:Attributes$sel:other:AttributesElement$sel:name:Element$sel:attributes:Element$sel:children:ElementContentNodeTextRawselector$fToClassNameFloat$fToClassNameText$fToClassNameInt$fToStyleValueFloat$fToStyleValueInt$fToStyleValueText$fToStyleValue[]$fToStyleValuePxRem$fToStyleValueLength $fNumLength$fToClassNameLength$fToStyleValueMs$fIsStringSelector$fMonoidAttributes$fSemigroupAttributes
$fNumSides$fIsStringHexColor$fToStyleValueHexColor$fToColorHexColor $fShowAlign$fToClassNameAlign$fToStyleValueAlign$fGenericFlatAttributes $fEqSelector
$fOrdSelector $fEqMedia
$fOrdMedia$fShowMs$fNumMs$fToClassNameMs $fShowLength $fShowPxRem$fToClassNamePxRem
$fNumPxRem $fEqPxRem$fIntegralPxRem $fRealPxRem
$fOrdPxRem $fEnumPxRem$fIsStringStyleValue$fShowStyleValue $fShowPseudo
$fEqPseudo $fOrdPseudo
$fEqClassName$fOrdClassName$fIsStringClassNameTransitionPropertyWidthHeightwidthheightminWidth minHeightpadgapfontSizeflexRowflexColshadowroundedbgcolorboldhideopacityborder borderColorpointertruncate
transition textAlignactiveevenoddmediaparent applyPseudo mapModClassaddClassclsprop-.$fShowTransitionPropertyUrl$sel:scheme:Url$sel:domain:Url
$sel:path:Url$sel:query:UrlSegmentpathUrl cleanSegment pathSegmentsurl renderUrl
$fIsStringUrl $fShowUrl$fEqUrl 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_textnoneprelinkforminputnamevaluelabelbuttonscriptstyle
stylesheettcolthtdlayoutrootgrowspacecollapsescrollnavversion getBinDir getLibDir getDynLibDir
getDataDir
getLibexecDirgetDataFileName
getSysconfDir