Think of Elements as Html with layout!
By building your view with Elements, you have a single place to go to adjust or add to your layout, which is great because that's usually what you're doing in your view!
Same as layout, but the height and width of the site is set to the height and width of the screen.
You can think of an Element as Html with built-in layout.
It has one style identifier, which you can think of as a CSS class.
It can also have style variations, which are covered in the Style module.
The most basic element.
You need to specify a style, a list of attributes, and a single child.
-- an element with the style `MyStyle`, that is aligned left, and has one child.
el MyStyle [ alignLeft ] (text "Hello World!")el can only have one child because in order to have multiple children, we need to specify how the layout would work.
A helper function. This:
when (x == 5) (text "yay, it's 5")is sugar for
if (x == 5) then
text "yay, it's 5"
else
emptyAnother helper function that defaults to empty
whenJust (Just ("Hi!")) textis sugar for
case maybe of
Nothing ->
empty
Just x ->
text xFor when you want to embed Html.
If you're using this library, I'd encourage you to try to solve your problem without using this escape hatch.
Usage of this function makes the most sense when you're dealing with Html from another module or package or if you need to craft something "manually" yourself.
Change the msg that an Element is sending.
An analog of Html.map.
A full element will ignore the spacing set for it by the parent, and also grow to cover the parent's padding.
This is mostly useful in text layouts.
A layout element will explicitly define how it's children are layed out.
Make sure to check out the Style Element specific attributes in Element.Attributes as they will help out when doing layout!
A text layout.
Children that are aligned left or right will be floated left or right. Everything else is arranged in the standard 'block' layout of css, meaning a column flowing down.
Paragraph is actually a layout if you can believe it!
This is the same as a textLayout, except all of the children are set to display:inline.
Because all the children are inline, they will not respect a width or height set on them.
A table is a special grid
An interface to css grid. Here's a basic example:
grid MyGridStyle []
{ columns = [ px 100, px 100, px 100, px 100 ]
, rows =
[ px 100
, px 100
, px 100
, px 100
]
, cells =
[ cell
{ start = ( 0, 0 )
, width = 1
, height = 1
, content =
el Box [] (text "box")
}
, cell
{ start = ( 1, 1 )
, width = 1
, height = 2
, content =
el Box [] (text "box")
}
]
}With a named grid, you can name areas within the grid and use that name to place an element.
Here's an example:
namedGrid MyGridStyle []
{ columns = [ px 200, px 200, px 200, fill 1 ]
, rows =
[ px 200 => [ spanAll "header" ]
, px 200 => [ span 3 "content", span 1 "sidebar" ]
, px 200 => [ span 3 "content", span 1 "sidebar" ]
, px 200 => [ spanAll "footer" ]
]
, cells =
[ named "header"
(el Box [] (text "box"))
, named "sidebar"
(el Box [] (text "box"))
]
}note: this example uses rocket(=>) as a synonym for creating a tuple. For more, check out the rocket update package!
A specific position on a grid.
Specify a named postion on a namedGrid.
Used to define named areas in a namedGrid.
Used to define named areas in a namedGrid.
It can be useful to position something near another element.
In CSS terms, this positions children using 'position:absolute'. So, to position three boxes below a container, we could do the following:
el MyStyle [ width (px 200), height (px 200) ] empty
|> below
[ el Box [ width (px 40), height (px 40) ] empty
-- below on the right
, el Box [ alignRight, width (px 40), height (px 40) ] empty
-- below and centered
, el Box [ center, width (px 40), height (px 40) ] empty
]Position an element relative to the window.
Essentially the same as display: fixed.
If you're trying to make a modal, check out Element.Location.modal
Turn an element into a link.
link "http://zombo.com"
<| el MyStyle (text "Welcome to Zombocom")Wraps an element in an <a> and sets the href. rel properties are set to noopener and noreferrer.
Make a link that opens in a new tab.
Depending on the browsers configiration, it may open in a new window.
newTab "http://zombo.com"
<| el MyStyle (text "Welcome to Zombocom")Same as target "_blank"
Make a link that will download a file
download "http://zombo.com/schedule.pdf"
<| el MyStyle (text "Welcome to Zombocom")Make a link that will download a file and give it a specific filename.
downloadAs
{ src = "http://zombo.com/schedule.pdf"
, filename = "zombocomSchedule.pdf"
}
<| el MyStyle (text "Welcome to Zombocom")Renders as a <button>
Also is able to receive keyboard focus.
Creates a 1 px tall horizontal line.
If you want a horizontal rule that is something more specific, craft it with el!
An element for adding additional spacing. The Float is the multiple that should be used of the spacing that's being set by the parent.
So, if the parent element is a column that set spacing to 5, and this spacer was a 2. Then it would be a 10 pixel spacer.
A simple circle. Provide the radius it should have.
Automatically sets the propery width, height, and corner rounded.
This is the main page header area.
The main content of your page.
This is a sidebar which contains complementary information to your main content.
It's rendered as a column.
An area that houses the controls for running a search.
While Element.Input.search will create a literal search input,
this element is meant to group all the controls that are involved with searching,
such as filters and the search button.
This is a modal
Don't use a heading like h2 if you want a subheading/subtitle, instead use this element!
For images, both a source and a caption are required. The caption will serve as the alt-text.
If an image is purely decorative, you can skip the caption.
These elements are useful for quick text markup.
Since this library moves all layout and positioning logic to the view instead of the stylesheet, it doesn't make a ton of sense to support media queries in the stylesheet.
Instead, responsiveness is controlled directly in the view.
Here's how it's done:
Window.resizes from the Window package.Element.classifyDevice function which will convert Window.width and Window.height into a Device record, which you should store in your model.Device record in your view to specify how your page changes with window size.responsive function to map one range to another.Takes in a Window.Size and returns a device profile which can be used for responsiveness.
Define two ranges that should linearly match up with each other.
Provide a value for the first and receive the calculated value for the second.
fontsize =
responsive device.width ( 600, 1200 ) ( 16, 20 )When the device width is between 600 and 1200, set the font-size between 16 and 20 using a linear scale.
Renders Element's into Html, but does not embed a stylesheet.
Embed a stylesheet.
Embeds the stylesheet and renders the
Element's intoHtml.