h, ?< 7R
! " # $ % & ' ( ) * + , - . / 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.6.1
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"%=> 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 94 web-viewA child selector limits7 web-view A parent selector limits the selector to only apply when a descendent of the parent in question8 web-view'The styles to apply for a given atomic 99 web-view>Atomic classes include a selector and the corresponding styles= web-view!All the atomic classes used in a > web-view Element functions expect a modifier function as their first argument. These can add attributes and classes. Combine multiple >s with ( ) userEmail :: User -> View c ()
userEmail user = input (fontSize 16 . active) (text user.email)
where
active = isActive user then bold else id9If you don't want to specify any attributes, you can use 4plainView :: View c ()
plainView = el id "No styles"B web-viewThe Attributes for an F . Classes are merged and managed separately from the other attributes.F web-viewA single HTML tag. Note that the class attribute is stored separately from the rest of the attributes to make adding styles easierO web-view Raw embedded HTML or SVG. See P web-viewConstruct an ElementQ web-view Create a - given only a *R web-view0Create a class name, escaping special characters k U Z RPQ7?ABCED=4569:;<*+,LMONFGIHKJ
>@#%&$'-.21/30!"8()
LONMFHIGKJPBEDCA@?>=9;<:87465-/0123.Q*+,R()U#'&%$!" Z
k None
"#%&=> b 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"Set container display to Block or web-viewHide an element. See 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-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-viewHyphenate classnames 78 None"% !n None"#%1 'k web-view(Views are HTML fragments that carry all = 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 or for an example web-view Extract the from a web-view
Views have a built-in for convienient access to static data, and to add type-safety to view functions. See 'Web.View.Element.ListItem and https://hackage.haskell.org/package/hyperbole/docs/Web-Hyperbole.html numberView :: View Int ()
numberView = do
num <- context
el_ $ do
"Number: "
text (pack $ show num) web-viewRun a view with a specific
in a parent with a different context.
parentView :: View c ()
parentView = do
addContext 1 numberView
addContext 2 numberView
addContext 3 numberView web-view-Inserts contents into the first child element web-view8Create a new element constructor with the given tag name