| Safe Haskell | Safe-Inferred |
|---|---|
| Language | GHC2021 |
Web.View.Style
Synopsis
- width :: Length -> Mod c
- height :: Length -> Mod c
- minWidth :: Length -> Mod c
- minHeight :: Length -> Mod c
- pad :: Sides Length -> Mod c
- gap :: Length -> Mod c
- fontSize :: Length -> Mod c
- flexRow :: Mod c
- flexCol :: Mod c
- shadow :: Mod c
- rounded :: Length -> Mod c
- bg :: ToColor clr => clr -> Mod ctx
- color :: ToColor clr => clr -> Mod ctx
- bold :: Mod c
- hide :: Mod c
- opacity :: Float -> Mod c
- border :: Sides PxRem -> Mod c
- borderColor :: ToColor clr => clr -> Mod ctx
- pointer :: Mod c
- truncate :: Mod c
- transition :: Ms -> TransitionProperty -> Mod c
- data TransitionProperty
- textAlign :: Align -> Mod c
- hover :: Mod c -> Mod c
- active :: Mod c -> Mod c
- even :: Mod c -> Mod c
- odd :: Mod c -> Mod c
- media :: Media -> Mod c -> Mod c
- parent :: Text -> Mod c -> Mod c
- applyPseudo :: Pseudo -> Mod c -> Mod c
- mapModClass :: (Class -> Class) -> Mod c -> Mod c
- addClass :: Class -> Mod c
- cls :: ClassName -> Class
- extClass :: ClassName -> Mod c
- prop :: ToStyleValue val => Name -> val -> Class -> Class
- (-.) :: ToClassName a => ClassName -> a -> ClassName
Styles
minWidth :: Length -> Mod c Source #
Allow width to grow to contents but not shrink any smaller than value
minHeight :: Length -> Mod c Source #
Allow height to grow to contents but not shrink any smaller than value
pad :: Sides Length -> Mod c Source #
Space surrounding the children of the element
To create even spacing around and between all elements:
col (pad 10 . gap 10) $ do el_ "one" el_ "two" el_ "three"
border :: Sides PxRem -> Mod c Source #
Set a border around the element
el (border 1) "all sides" el (border (X 1)) "only left and right"
Use a button-like cursor when hovering over the element
Button-like elements:
btn = pointer . bg Primary . hover (bg PrimaryLight) options = row id $ do el btn "Login" el btn "Sign Up"
transition :: Ms -> TransitionProperty -> Mod c Source #
Animate changes to the given property
el (transition 100 (Height 400)) "Tall" el (transition 100 (Height 100)) "Small"
data TransitionProperty Source #
Instances
| Show TransitionProperty Source # | |
Defined in Web.View.Style Methods showsPrec :: Int -> TransitionProperty -> ShowS # show :: TransitionProperty -> String # showList :: [TransitionProperty] -> ShowS # | |
Selector Modifiers
hover :: Mod c -> Mod c Source #
Apply when hovering over an element
el (bg Primary . hover (bg PrimaryLight)) "Hover"
media :: Media -> Mod c -> Mod c Source #
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"
parent :: Text -> Mod c -> Mod c Source #
Apply 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"
Creating New Styles
addClass :: Class -> Mod c Source #
Add a single class
width :: PxRem -> Mod
width n =
addClass
$ cls ("w" -. n)
& prop "width" n
& prop @Int "flex-shrink" 0