Crate savory[−][src]
Savory is library for building user interface.
Core Concept
There are two main types in Savory, Views and Elements. View types produce static HTML nodes, while Element types produce dynamic HTML nodes, as simple as that.
View types
View types implements View
trait, this trait have one method that
generate the resulted HTML nodes, here is simple example:
struct HomePage; impl<Msg> View<Node<Msg>> for HomePage { fn view(&self) -> Node<Msg> { html::div().push("Home page") } }
Element types
Element types implements Element
trait, most of the time elements have
logic inside them, they commonly carry their state inside them, and since
Savory follow Elm style we need message type and lastly we need config type
that is used to config the element on it’s initialization, here is simple
example:
// Element module struct Counter(u32); enum Msg { Increase, Decrease, } impl Element for Counter { type Config = u32; type Message = Msg; fn init(config: u32, _orders: &mut impl Orders<Msg>) -> Self { Counter(config) } fn update(&mut self, msg: Self::Message, _orders: &mut impl Orders<Self::Message>) { match msg { Msg::Increase => self.0 += 1, Msg::Decrease => self.0 -= 1, } } } impl View<Node<Msg>> for Counter { fn view(&self) -> Node<Msg> { html::div() .push( html::button() .push("+") .on_click(|_| Msg::Increase) ) .push( html::button() .push("-") .on_click(|_| Msg::Decrease) ) .push(html::h1().push(self.0.to_string())) } }
This example shows how to wirte counter element, so you can write your own elements.
Ecosystem
savory
(this crate) - Core library for building user interfacesavory-router
- Savory Router used to generate router for your appsavory-style
- Typed CSS style for Savorysavory-elements
- Collection of UI elements based on Savorysavory-elements-derive
- Crate that provideElement
derive
Re-exports
pub extern crate seed; |
pub use web_sys; |
Modules
element | Traits used to handle model messages and update element state accordingly. |
events | Traits and implementation that makes working |
html | Functions used to create HTML nodes |
node | Traits and implementation that makes working with |
orders | Traits extensions that makes working with |
prelude | |
traits | Helper traits commonly used to make API consistent and convenient. |
view | Traits used to build views. |