Merge pull request #66 from hecrj/feature/new-web-tour

Make `tour` work with `iced_web` again

examples/tour.rs

@@ -622,11 +622,19 @@ impl<'a> Step {
                 "Give it a shot! Check the following checkbox to be able to \
                  see element boundaries.",
             ))
-            .push(Checkbox::new(
+            .push(if cfg!(target_arch = "wasm32") {
-                debug,
+                Element::new(
-                "Explain layout",
+                    Text::new("Not available on web yet!")
-                StepMessage::DebugToggled,
+                        .color([0.7, 0.7, 0.7])
-            ))
+                        .horizontal_alignment(HorizontalAlignment::Center),
+                )
+            } else {
+                Element::new(Checkbox::new(
+                    debug,
+                    "Explain layout",
+                    StepMessage::DebugToggled,
+                ))
+            })
             .push(Text::new("Feel free to go back and take a look."))
     }
 

src/application.rs

@@ -83,7 +83,7 @@ pub trait Application: Sized {
     /// The type of __messages__ your [`Application`] will produce.
     ///
     /// [`Application`]: trait.Application.html
-    type Message: std::fmt::Debug + Send;
+    type Message: std::fmt::Debug + Send + Clone;
 
     /// Initializes the [`Application`].
     ///
@@ -140,7 +140,7 @@ pub trait Application: Sized {
         <Instance<Self> as iced_winit::Application>::run();
 
         #[cfg(target_arch = "wasm32")]
-        iced_web::Application::run(Instance(self));
+        <Instance<Self> as iced_web::Application>::run();
     }
 }
 
@@ -180,11 +180,21 @@ where
 {
     type Message = A::Message;
 
-    fn update(&mut self, message: Self::Message) {
+    fn new() -> (Self, Command<A::Message>) {
-        self.0.update(message);
+        let (app, command) = A::new();
+
+        (Instance(app), command)
     }
 
-    fn view(&mut self) -> Element<Self::Message> {
+    fn title(&self) -> String {
+        self.0.title()
+    }
+
+    fn update(&mut self, message: Self::Message) -> Command<Self::Message> {
+        self.0.update(message)
+    }
+
+    fn view(&mut self) -> Element<'_, Self::Message> {
         self.0.view()
     }
 }

src/sandbox.rs

@@ -81,7 +81,7 @@ pub trait Sandbox {
     /// The type of __messages__ your [`Sandbox`] will produce.
     ///
     /// [`Sandbox`]: trait.Sandbox.html
-    type Message: std::fmt::Debug + Send;
+    type Message: std::fmt::Debug + Send + Clone;
 
     /// Initializes the [`Sandbox`].
     ///

web/Cargo.toml

@@ -15,9 +15,11 @@ categories = ["web-programming"]
 maintenance = { status = "actively-developed" }
 
 [dependencies]
-iced_core = { version = "0.1.0-alpha", path = "../core" }
+iced_core = { version = "0.1.0-alpha", path = "../core", features = ["command"] }
 dodrio = "0.1.0"
 wasm-bindgen = "0.2.51"
+wasm-bindgen-futures = "0.4"
+futures = "0.3"
 
 [dependencies.web-sys]
 version = "0.3.27"

web/src/bus.rs

@@ -15,7 +15,7 @@ pub struct Bus<Message> {
 
 impl<Message> Bus<Message>
 where
-    Message: 'static,
+    Message: 'static + Clone,
 {
     pub(crate) fn new() -> Self {
         Self {

web/src/element.rs

@@ -1,4 +1,4 @@
-use crate::{Bus, Color, Widget};
+use crate::{style, Bus, Color, Widget};
 
 use dodrio::bumpalo;
 use std::rc::Rc;
@@ -38,8 +38,8 @@ impl<'a, Message> Element<'a, Message> {
     /// [`Element`]: struct.Element.html
     pub fn map<F, B>(self, f: F) -> Element<'a, B>
     where
-        Message: 'static,
+        Message: 'static + Clone,
-        B: 'static,
+        B: 'static + Clone,
         F: 'static + Fn(Message) -> B,
     {
         Element {
@@ -57,8 +57,9 @@ impl<'a, Message> Element<'a, Message> {
         &self,
         bump: &'b bumpalo::Bump,
         bus: &Bus<Message>,
+        style_sheet: &mut style::Sheet<'b>,
     ) -> dodrio::Node<'b> {
-        self.widget.node(bump, bus)
+        self.widget.node(bump, bus, style_sheet)
     }
 }
 
@@ -81,14 +82,16 @@ impl<'a, A, B> Map<'a, A, B> {
 
 impl<'a, A, B> Widget<B> for Map<'a, A, B>
 where
-    A: 'static,
+    A: 'static + Clone,
-    B: 'static,
+    B: 'static + Clone,
 {
     fn node<'b>(
         &self,
         bump: &'b bumpalo::Bump,
         bus: &Bus<B>,
+        style_sheet: &mut style::Sheet<'b>,
     ) -> dodrio::Node<'b> {
-        self.widget.node(bump, &bus.map(self.mapper.clone()))
+        self.widget
+            .node(bump, &bus.map(self.mapper.clone()), style_sheet)
     }
 }

web/src/lib.rs

@@ -57,19 +57,22 @@
 #![deny(unsafe_code)]
 #![deny(rust_2018_idioms)]
 use dodrio::bumpalo;
-use std::cell::RefCell;
+use std::{cell::RefCell, rc::Rc};
 
 mod bus;
 mod element;
+
+pub mod style;
 pub mod widget;
 
 pub use bus::Bus;
 pub use dodrio;
 pub use element::Element;
 pub use iced_core::{
-    Align, Background, Color, Font, HorizontalAlignment, Length,
+    Align, Background, Color, Command, Font, HorizontalAlignment, Length,
     VerticalAlignment,
 };
+pub use style::Style;
 pub use widget::*;
 
 /// An interactive web application.
@@ -84,7 +87,29 @@ pub trait Application {
     /// The type of __messages__ your [`Application`] will produce.
     ///
     /// [`Application`]: trait.Application.html
-    type Message;
+    type Message: Clone;
+
+    /// Initializes the [`Application`].
+    ///
+    /// Here is where you should return the initial state of your app.
+    ///
+    /// Additionally, you can return a [`Command`](struct.Command.html) if you
+    /// need to perform some async action in the background on startup. This is
+    /// useful if you want to load state from a file, perform an initial HTTP
+    /// request, etc.
+    ///
+    /// [`Application`]: trait.Application.html
+    fn new() -> (Self, Command<Self::Message>)
+    where
+        Self: Sized;
+
+    /// Returns the current title of the [`Application`].
+    ///
+    /// This title can be dynamic! The runtime will automatically update the
+    /// title of your application when necessary.
+    ///
+    /// [`Application`]: trait.Application.html
+    fn title(&self) -> String;
 
     /// Handles a __message__ and updates the state of the [`Application`].
     ///
@@ -96,7 +121,7 @@ pub trait Application {
     ///
     /// [`Application`]: trait.Application.html
     /// [`Command`]: struct.Command.html
-    fn update(&mut self, message: Self::Message);
+    fn update(&mut self, message: Self::Message) -> Command<Self::Message>;
 
     /// Returns the widgets to display in the [`Application`].
     ///
@@ -108,40 +133,75 @@ pub trait Application {
     /// Runs the [`Application`].
     ///
     /// [`Application`]: trait.Application.html
-    fn run(self)
+    fn run()
     where
         Self: 'static + Sized,
     {
-        let app = Instance::new(self);
+        let (app, command) = Self::new();
+        let mut instance = Instance::new(app);
+
+        instance.spawn(command);
 
         let window = web_sys::window().unwrap();
+
         let document = window.document().unwrap();
+        document.set_title(&instance.title);
+
         let body = document.body().unwrap();
-        let vdom = dodrio::Vdom::new(&body, app);
+        let vdom = dodrio::Vdom::new(&body, instance);
 
         vdom.forget();
     }
 }
 
+#[derive(Clone)]
 struct Instance<Message> {
-    ui: RefCell<Box<dyn Application<Message = Message>>>,
+    title: String,
+    ui: Rc<RefCell<Box<dyn Application<Message = Message>>>>,
 }
 
-impl<Message> Instance<Message> {
+impl<Message> Instance<Message>
+where
+    Message: 'static + Clone,
+{
     fn new(ui: impl Application<Message = Message> + 'static) -> Self {
         Self {
-            ui: RefCell::new(Box::new(ui)),
+            title: ui.title(),
+            ui: Rc::new(RefCell::new(Box::new(ui))),
         }
     }
 
     fn update(&mut self, message: Message) {
-        self.ui.borrow_mut().update(message);
+        let command = self.ui.borrow_mut().update(message);
+        let title = self.ui.borrow().title();
+
+        self.spawn(command);
+
+        let window = web_sys::window().unwrap();
+        let document = window.document().unwrap();
+
+        if self.title != title {
+            document.set_title(&title);
+
+            self.title = title;
+        }
+    }
+
+    fn spawn(&mut self, command: Command<Message>) {
+        use futures::FutureExt;
+
+        for future in command.futures() {
+            let mut instance = self.clone();
+            let future = future.map(move |message| instance.update(message));
+
+            wasm_bindgen_futures::spawn_local(future);
+        }
     }
 }
 
 impl<Message> dodrio::Render for Instance<Message>
 where
-    Message: 'static,
+    Message: 'static + Clone,
 {
     fn render<'a, 'bump>(
         &'a self,
@@ -150,9 +210,17 @@ where
     where
         'a: 'bump,
     {
+        use dodrio::builder::*;
+
         let mut ui = self.ui.borrow_mut();
         let element = ui.view();
+        let mut style_sheet = style::Sheet::new();
 
-        element.widget.node(bump, &Bus::new())
+        let node = element.widget.node(bump, &Bus::new(), &mut style_sheet);
+
+        div(bump)
+            .attr("style", "width: 100%; height: 100%")
+            .children(vec![style_sheet.node(bump), node])
+            .finish()
     }
 }

web/src/style.rs

@@ -0,0 +1,162 @@
+//! Style your widgets.
+use crate::{bumpalo, Align, Color, Length};
+
+use std::collections::BTreeMap;
+
+/// The style of a VDOM node.
+#[derive(Debug)]
+pub enum Style {
+    /// Container with vertical distribution
+    Column,
+
+    /// Container with horizonal distribution
+    Row,
+
+    /// Padding of the container
+    Padding(u16),
+
+    /// Spacing between elements
+    Spacing(u16),
+}
+
+impl Style {
+    /// Returns the class name of the [`Style`].
+    ///
+    /// [`Style`]: enum.Style.html
+    pub fn class<'a>(&self) -> String {
+        match self {
+            Style::Column => String::from("c"),
+            Style::Row => String::from("r"),
+            Style::Padding(padding) => format!("p-{}", padding),
+            Style::Spacing(spacing) => format!("s-{}", spacing),
+        }
+    }
+
+    /// Returns the declaration of the [`Style`].
+    ///
+    /// [`Style`]: enum.Style.html
+    pub fn declaration<'a>(&self, bump: &'a bumpalo::Bump) -> &'a str {
+        let class = self.class();
+
+        match self {
+            Style::Column => {
+                let body = "{ display: flex; flex-direction: column; }";
+
+                bumpalo::format!(in bump, ".{} {}", class, body).into_bump_str()
+            }
+            Style::Row => {
+                let body = "{ display: flex; flex-direction: row; }";
+
+                bumpalo::format!(in bump, ".{} {}", class, body).into_bump_str()
+            }
+            Style::Padding(padding) => bumpalo::format!(
+                in bump,
+                ".{} {{ box-sizing: border-box; padding: {}px }}",
+                class,
+                padding
+            )
+            .into_bump_str(),
+            Style::Spacing(spacing) => bumpalo::format!(
+                in bump,
+                ".c.{} > * {{ margin-bottom: {}px }} \
+                 .r.{} > * {{ margin-right: {}px }} \
+                 .c.{} > *:last-child {{ margin-bottom: 0 }} \
+                 .r.{} > *:last-child {{ margin-right: 0 }}",
+                class,
+                spacing,
+                class,
+                spacing,
+                class,
+                class
+            )
+            .into_bump_str(),
+        }
+    }
+}
+
+/// A sheet of styles.
+#[derive(Debug)]
+pub struct Sheet<'a> {
+    styles: BTreeMap<String, &'a str>,
+}
+
+impl<'a> Sheet<'a> {
+    /// Creates an empty style [`Sheet`].
+    ///
+    /// [`Sheet`]: struct.Sheet.html
+    pub fn new() -> Self {
+        Self {
+            styles: BTreeMap::new(),
+        }
+    }
+
+    /// Inserts the [`Style`] in the [`Sheet`], if it was not previously
+    /// inserted.
+    ///
+    /// It returns the class name of the provided [`Style`].
+    ///
+    /// [`Sheet`]: struct.Sheet.html
+    /// [`Style`]: enum.Style.html
+    pub fn insert(&mut self, bump: &'a bumpalo::Bump, style: Style) -> String {
+        let class = style.class();
+
+        if !self.styles.contains_key(&class) {
+            let _ = self.styles.insert(class.clone(), style.declaration(bump));
+        }
+
+        class
+    }
+
+    /// Produces the VDOM node of the style [`Sheet`].
+    ///
+    /// [`Sheet`]: struct.Sheet.html
+    pub fn node(self, bump: &'a bumpalo::Bump) -> dodrio::Node<'a> {
+        use dodrio::builder::*;
+
+        let mut declarations = bumpalo::collections::Vec::new_in(bump);
+
+        declarations.push(text("html { height: 100% }"));
+        declarations.push(text(
+            "body { height: 100%; margin: 0; padding: 0; font-family: sans-serif }",
+        ));
+        declarations.push(text("p { margin: 0 }"));
+        declarations.push(text(
+            "button { border: none; cursor: pointer; outline: none }",
+        ));
+
+        for declaration in self.styles.values() {
+            declarations.push(text(*declaration));
+        }
+
+        style(bump).children(declarations).finish()
+    }
+}
+
+/// Returns the style value for the given [`Length`].
+///
+/// [`Length`]: ../enum.Length.html
+pub fn length(length: Length) -> String {
+    match length {
+        Length::Shrink => String::from("auto"),
+        Length::Units(px) => format!("{}px", px),
+        Length::Fill => String::from("100%"),
+    }
+}
+
+/// Returns the style value for the given [`Color`].
+///
+/// [`Color`]: ../struct.Color.html
+pub fn color(Color { r, g, b, a }: Color) -> String {
+    format!("rgba({}, {}, {}, {})", 255.0 * r, 255.0 * g, 255.0 * b, a)
+}
+
+/// Returns the style value for the given [`Align`].
+///
+/// [`Align`]: ../enum.Align.html
+pub fn align(align: Align) -> &'static str {
+    match align {
+        Align::Start => "flex-start",
+        Align::Center => "center",
+        Align::End => "flex-end",
+    }
+}

web/src/widget.rs

@@ -14,14 +14,17 @@
 //! ```
 //!
 //! [`Widget`]: trait.Widget.html
-use crate::Bus;
+use crate::{style, Bus};
 use dodrio::bumpalo;
 
 pub mod button;
+pub mod scrollable;
 pub mod slider;
+pub mod text_input;
 
 mod checkbox;
 mod column;
+mod container;
 mod image;
 mod radio;
 mod row;
@@ -29,15 +32,18 @@ mod text;
 
 #[doc(no_inline)]
 pub use button::Button;
-
+#[doc(no_inline)]
+pub use scrollable::Scrollable;
 #[doc(no_inline)]
 pub use slider::Slider;
-
 #[doc(no_inline)]
 pub use text::Text;
+#[doc(no_inline)]
+pub use text_input::TextInput;
 
 pub use checkbox::Checkbox;
 pub use column::Column;
+pub use container::Container;
 pub use image::Image;
 pub use radio::Radio;
 pub use row::Row;
@@ -56,5 +62,6 @@ pub trait Widget<Message> {
         &self,
         bump: &'b bumpalo::Bump,
         _bus: &Bus<Message>,
+        style_sheet: &mut style::Sheet<'b>,
     ) -> dodrio::Node<'b>;
 }

web/src/widget/button.rs

@@ -4,7 +4,7 @@
 //!
 //! [`Button`]: struct.Button.html
 //! [`State`]: struct.State.html
-use crate::{Background, Bus, Element, Length, Widget};
+use crate::{style, Background, Bus, Element, Length, Style, Widget};
 
 use dodrio::bumpalo;
 
@@ -120,23 +120,49 @@ impl State {
 
 impl<'a, Message> Widget<Message> for Button<'a, Message>
 where
-    Message: 'static + Copy,
+    Message: 'static + Clone,
 {
     fn node<'b>(
         &self,
         bump: &'b bumpalo::Bump,
         bus: &Bus<Message>,
+        style_sheet: &mut style::Sheet<'b>,
     ) -> dodrio::Node<'b> {
         use dodrio::builder::*;
 
-        let mut node =
+        let padding_class =
-            button(bump).children(vec![self.content.node(bump, bus)]);
+            style_sheet.insert(bump, Style::Padding(self.padding));
 
-        if let Some(on_press) = self.on_press {
+        let background = match self.background {
+            None => String::from("none"),
+            Some(background) => match background {
+                Background::Color(color) => style::color(color),
+            },
+        };
+
+        let mut node = button(bump)
+            .attr(
+                "class",
+                bumpalo::format!(in bump, "{}", padding_class).into_bump_str(),
+            )
+            .attr(
+                "style",
+                bumpalo::format!(
+                    in bump,
+                    "background: {}; border-radius: {}px; min-width: {}px",
+                    background,
+                    self.border_radius,
+                    self.min_width
+                )
+                .into_bump_str(),
+            )
+            .children(vec![self.content.node(bump, bus, style_sheet)]);
+
+        if let Some(on_press) = self.on_press.clone() {
             let event_bus = bus.clone();
 
             node = node.on("click", move |root, vdom, _event| {
-                event_bus.publish(on_press, root);
+                event_bus.publish(on_press.clone(), root);
 
                 vdom.schedule_render();
             });
@@ -150,7 +176,7 @@ where
 
 impl<'a, Message> From<Button<'a, Message>> for Element<'a, Message>
 where
-    Message: 'static + Copy,
+    Message: 'static + Clone,
 {
     fn from(button: Button<'a, Message>) -> Element<'a, Message> {
         Element::new(button)

web/src/widget/checkbox.rs

@@ -1,4 +1,4 @@
-use crate::{Bus, Color, Element, Widget};
+use crate::{style, Bus, Color, Element, Widget};
 
 use dodrio::bumpalo;
 
@@ -61,12 +61,13 @@ impl<Message> Checkbox<Message> {
 
 impl<Message> Widget<Message> for Checkbox<Message>
 where
-    Message: 'static + Copy,
+    Message: 'static + Clone,
 {
     fn node<'b>(
         &self,
         bump: &'b bumpalo::Bump,
         bus: &Bus<Message>,
+        _style_sheet: &mut style::Sheet<'b>,
     ) -> dodrio::Node<'b> {
         use dodrio::builder::*;
 
@@ -82,7 +83,7 @@ where
                     .attr("type", "checkbox")
                     .bool_attr("checked", self.is_checked)
                     .on("click", move |root, vdom, _event| {
-                        event_bus.publish(msg, root);
+                        event_bus.publish(msg.clone(), root);
 
                         vdom.schedule_render();
                     })
@@ -95,7 +96,7 @@ where
 
 impl<'a, Message> From<Checkbox<Message>> for Element<'a, Message>
 where
-    Message: 'static + Copy,
+    Message: 'static + Clone,
 {
     fn from(checkbox: Checkbox<Message>) -> Element<'a, Message> {
         Element::new(checkbox)

web/src/widget/column.rs

@@ -1,4 +1,4 @@
-use crate::{Align, Bus, Element, Length, Widget};
+use crate::{style, Align, Bus, Element, Length, Style, Widget};
 
 use dodrio::bumpalo;
 use std::u32;
@@ -112,18 +112,42 @@ impl<'a, Message> Widget<Message> for Column<'a, Message> {
         &self,
         bump: &'b bumpalo::Bump,
         publish: &Bus<Message>,
+        style_sheet: &mut style::Sheet<'b>,
     ) -> dodrio::Node<'b> {
         use dodrio::builder::*;
 
         let children: Vec<_> = self
             .children
             .iter()
-            .map(|element| element.widget.node(bump, publish))
+            .map(|element| element.widget.node(bump, publish, style_sheet))
             .collect();
 
+        let column_class = style_sheet.insert(bump, Style::Column);
+
+        let spacing_class =
+            style_sheet.insert(bump, Style::Spacing(self.spacing));
+
+        let padding_class =
+            style_sheet.insert(bump, Style::Padding(self.padding));
+
+        let width = style::length(self.width);
+        let height = style::length(self.height);
+
         // TODO: Complete styling
         div(bump)
-            .attr("style", "display: flex; flex-direction: column")
+            .attr(
+                "class",
+                bumpalo::format!(in bump, "{} {} {}", column_class, spacing_class, padding_class)
+                    .into_bump_str(),
+            )
+            .attr("style", bumpalo::format!(
+                    in bump,
+                    "width: {}; height: {}; max-width: {}px",
+                    width,
+                    height,
+                    self.max_width
+                ).into_bump_str()
+            )
             .children(children)
             .finish()
     }

web/src/widget/container.rs

@@ -0,0 +1,142 @@
+use crate::{bumpalo, style, Align, Bus, Element, Length, Style, Widget};
+
+/// An element decorating some content.
+///
+/// It is normally used for alignment purposes.
+#[allow(missing_debug_implementations)]
+pub struct Container<'a, Message> {
+    width: Length,
+    height: Length,
+    max_width: u32,
+    max_height: u32,
+    horizontal_alignment: Align,
+    vertical_alignment: Align,
+    content: Element<'a, Message>,
+}
+
+impl<'a, Message> Container<'a, Message> {
+    /// Creates an empty [`Container`].
+    ///
+    /// [`Container`]: struct.Container.html
+    pub fn new<T>(content: T) -> Self
+    where
+        T: Into<Element<'a, Message>>,
+    {
+        use std::u32;
+
+        Container {
+            width: Length::Shrink,
+            height: Length::Shrink,
+            max_width: u32::MAX,
+            max_height: u32::MAX,
+            horizontal_alignment: Align::Start,
+            vertical_alignment: Align::Start,
+            content: content.into(),
+        }
+    }
+
+    /// Sets the width of the [`Container`].
+    ///
+    /// [`Container`]: struct.Container.html
+    pub fn width(mut self, width: Length) -> Self {
+        self.width = width;
+        self
+    }
+
+    /// Sets the height of the [`Container`].
+    ///
+    /// [`Container`]: struct.Container.html
+    pub fn height(mut self, height: Length) -> Self {
+        self.height = height;
+        self
+    }
+
+    /// Sets the maximum width of the [`Container`].
+    ///
+    /// [`Container`]: struct.Container.html
+    pub fn max_width(mut self, max_width: u32) -> Self {
+        self.max_width = max_width;
+        self
+    }
+
+    /// Sets the maximum height of the [`Container`] in pixels.
+    ///
+    /// [`Container`]: struct.Container.html
+    pub fn max_height(mut self, max_height: u32) -> Self {
+        self.max_height = max_height;
+        self
+    }
+
+    /// Centers the contents in the horizontal axis of the [`Container`].
+    ///
+    /// [`Container`]: struct.Container.html
+    pub fn center_x(mut self) -> Self {
+        self.horizontal_alignment = Align::Center;
+
+        self
+    }
+
+    /// Centers the contents in the vertical axis of the [`Container`].
+    ///
+    /// [`Container`]: struct.Container.html
+    pub fn center_y(mut self) -> Self {
+        self.vertical_alignment = Align::Center;
+
+        self
+    }
+}
+
+impl<'a, Message> Widget<Message> for Container<'a, Message>
+where
+    Message: 'static,
+{
+    fn node<'b>(
+        &self,
+        bump: &'b bumpalo::Bump,
+        bus: &Bus<Message>,
+        style_sheet: &mut style::Sheet<'b>,
+    ) -> dodrio::Node<'b> {
+        use dodrio::builder::*;
+
+        let column_class = style_sheet.insert(bump, Style::Column);
+
+        let width = style::length(self.width);
+        let height = style::length(self.height);
+
+        let align_items = style::align(self.horizontal_alignment);
+        let justify_content = style::align(self.vertical_alignment);
+
+        let node = div(bump)
+            .attr(
+                "class",
+                bumpalo::format!(in bump, "{}", column_class).into_bump_str(),
+            )
+            .attr(
+                "style",
+                bumpalo::format!(
+                    in bump,
+                    "width: {}; height: {}; max-width: {}px; align-items: {}; justify-content: {}",
+                    width,
+                    height,
+                    self.max_width,
+                    align_items,
+                    justify_content
+                )
+                .into_bump_str(),
+            )
+            .children(vec![self.content.node(bump, bus, style_sheet)]);
+
+        // TODO: Complete styling
+
+        node.finish()
+    }
+}
+
+impl<'a, Message> From<Container<'a, Message>> for Element<'a, Message>
+where
+    Message: 'static + Clone,
+{
+    fn from(container: Container<'a, Message>) -> Element<'a, Message> {
+        Element::new(container)
+    }
+}

web/src/widget/image.rs

@@ -1,4 +1,4 @@
-use crate::{Bus, Element, Length, Widget};
+use crate::{style, Bus, Element, Length, Widget};
 
 use dodrio::bumpalo;
 
@@ -57,6 +57,7 @@ impl<Message> Widget<Message> for Image {
         &self,
         bump: &'b bumpalo::Bump,
         _bus: &Bus<Message>,
+        _style_sheet: &mut style::Sheet<'b>,
     ) -> dodrio::Node<'b> {
         use dodrio::builder::*;
 

web/src/widget/radio.rs

@@ -1,4 +1,4 @@
-use crate::{Bus, Color, Element, Widget};
+use crate::{style, Bus, Color, Element, Widget};
 
 use dodrio::bumpalo;
 
@@ -70,29 +70,31 @@ impl<Message> Radio<Message> {
 
 impl<Message> Widget<Message> for Radio<Message>
 where
-    Message: 'static + Copy,
+    Message: 'static + Clone,
 {
     fn node<'b>(
         &self,
         bump: &'b bumpalo::Bump,
         bus: &Bus<Message>,
+        _style_sheet: &mut style::Sheet<'b>,
     ) -> dodrio::Node<'b> {
         use dodrio::builder::*;
 
         let radio_label = bumpalo::format!(in bump, "{}", self.label);
 
         let event_bus = bus.clone();
-        let on_click = self.on_click;
+        let on_click = self.on_click.clone();
 
         // TODO: Complete styling
         label(bump)
-            .attr("style", "display: block")
+            .attr("style", "display: block; font-size: 20px")
             .children(vec![
                 input(bump)
                     .attr("type", "radio")
+                    .attr("style", "margin-right: 10px")
                     .bool_attr("checked", self.is_selected)
                     .on("click", move |root, vdom, _event| {
-                        event_bus.publish(on_click, root);
+                        event_bus.publish(on_click.clone(), root);
 
                         vdom.schedule_render();
                     })
@@ -105,7 +107,7 @@ where
 
 impl<'a, Message> From<Radio<Message>> for Element<'a, Message>
 where
-    Message: 'static + Copy,
+    Message: 'static + Clone,
 {
     fn from(radio: Radio<Message>) -> Element<'a, Message> {
         Element::new(radio)

web/src/widget/row.rs

@@ -1,4 +1,4 @@
-use crate::{Align, Bus, Element, Length, Widget};
+use crate::{style, Align, Bus, Element, Length, Style, Widget};
 
 use dodrio::bumpalo;
 use std::u32;
@@ -113,18 +113,42 @@ impl<'a, Message> Widget<Message> for Row<'a, Message> {
         &self,
         bump: &'b bumpalo::Bump,
         publish: &Bus<Message>,
+        style_sheet: &mut style::Sheet<'b>,
     ) -> dodrio::Node<'b> {
         use dodrio::builder::*;
 
         let children: Vec<_> = self
             .children
             .iter()
-            .map(|element| element.widget.node(bump, publish))
+            .map(|element| element.widget.node(bump, publish, style_sheet))
             .collect();
 
+        let row_class = style_sheet.insert(bump, Style::Row);
+
+        let spacing_class =
+            style_sheet.insert(bump, Style::Spacing(self.spacing));
+
+        let padding_class =
+            style_sheet.insert(bump, Style::Padding(self.padding));
+
+        let width = style::length(self.width);
+        let height = style::length(self.height);
+
         // TODO: Complete styling
         div(bump)
-            .attr("style", "display: flex; flex-direction: row")
+            .attr(
+                "class",
+                bumpalo::format!(in bump, "{} {} {}", row_class, spacing_class, padding_class)
+                    .into_bump_str(),
+            )
+            .attr("style", bumpalo::format!(
+                    in bump,
+                    "width: {}; height: {}; max-width: {}px",
+                    width,
+                    height,
+                    self.max_width
+                ).into_bump_str()
+            )
             .children(children)
             .finish()
     }

web/src/widget/scrollable.rs

@@ -0,0 +1,157 @@
+//! Navigate an endless amount of content with a scrollbar.
+use crate::{bumpalo, style, Align, Bus, Column, Element, Length, Widget};
+
+/// A widget that can vertically display an infinite amount of content with a
+/// scrollbar.
+#[allow(missing_debug_implementations)]
+pub struct Scrollable<'a, Message> {
+    width: Length,
+    height: Length,
+    max_height: u32,
+    content: Column<'a, Message>,
+}
+
+impl<'a, Message> Scrollable<'a, Message> {
+    /// Creates a new [`Scrollable`] with the given [`State`].
+    ///
+    /// [`Scrollable`]: struct.Scrollable.html
+    /// [`State`]: struct.State.html
+    pub fn new(_state: &'a mut State) -> Self {
+        use std::u32;
+
+        Scrollable {
+            width: Length::Fill,
+            height: Length::Shrink,
+            max_height: u32::MAX,
+            content: Column::new(),
+        }
+    }
+
+    /// Sets the vertical spacing _between_ elements.
+    ///
+    /// Custom margins per element do not exist in Iced. You should use this
+    /// method instead! While less flexible, it helps you keep spacing between
+    /// elements consistent.
+    pub fn spacing(mut self, units: u16) -> Self {
+        self.content = self.content.spacing(units);
+        self
+    }
+
+    /// Sets the padding of the [`Scrollable`].
+    ///
+    /// [`Scrollable`]: struct.Scrollable.html
+    pub fn padding(mut self, units: u16) -> Self {
+        self.content = self.content.padding(units);
+        self
+    }
+
+    /// Sets the width of the [`Scrollable`].
+    ///
+    /// [`Scrollable`]: struct.Scrollable.html
+    pub fn width(mut self, width: Length) -> Self {
+        self.width = width;
+        self
+    }
+
+    /// Sets the height of the [`Scrollable`].
+    ///
+    /// [`Scrollable`]: struct.Scrollable.html
+    pub fn height(mut self, height: Length) -> Self {
+        self.height = height;
+        self
+    }
+
+    /// Sets the maximum width of the [`Scrollable`].
+    ///
+    /// [`Scrollable`]: struct.Scrollable.html
+    pub fn max_width(mut self, max_width: u32) -> Self {
+        self.content = self.content.max_width(max_width);
+        self
+    }
+
+    /// Sets the maximum height of the [`Scrollable`] in pixels.
+    ///
+    /// [`Scrollable`]: struct.Scrollable.html
+    pub fn max_height(mut self, max_height: u32) -> Self {
+        self.max_height = max_height;
+        self
+    }
+
+    /// Sets the horizontal alignment of the contents of the [`Scrollable`] .
+    ///
+    /// [`Scrollable`]: struct.Scrollable.html
+    pub fn align_items(mut self, align_items: Align) -> Self {
+        self.content = self.content.align_items(align_items);
+        self
+    }
+
+    /// Adds an element to the [`Scrollable`].
+    ///
+    /// [`Scrollable`]: struct.Scrollable.html
+    pub fn push<E>(mut self, child: E) -> Self
+    where
+        E: Into<Element<'a, Message>>,
+    {
+        self.content = self.content.push(child);
+        self
+    }
+}
+
+impl<'a, Message> Widget<Message> for Scrollable<'a, Message>
+where
+    Message: 'static,
+{
+    fn node<'b>(
+        &self,
+        bump: &'b bumpalo::Bump,
+        bus: &Bus<Message>,
+        style_sheet: &mut style::Sheet<'b>,
+    ) -> dodrio::Node<'b> {
+        use dodrio::builder::*;
+
+        let width = style::length(self.width);
+        let height = style::length(self.height);
+
+        let node = div(bump)
+            .attr(
+                "style",
+                bumpalo::format!(
+                    in bump,
+                    "width: {}; height: {}; max-height: {}px; overflow: auto",
+                    width,
+                    height,
+                    self.max_height
+                )
+                .into_bump_str(),
+            )
+            .children(vec![self.content.node(bump, bus, style_sheet)]);
+
+        // TODO: Complete styling
+
+        node.finish()
+    }
+}
+
+impl<'a, Message> From<Scrollable<'a, Message>> for Element<'a, Message>
+where
+    Message: 'static + Clone,
+{
+    fn from(scrollable: Scrollable<'a, Message>) -> Element<'a, Message> {
+        Element::new(scrollable)
+    }
+}
+
+/// The local state of a [`Scrollable`].
+///
+/// [`Scrollable`]: struct.Scrollable.html
+#[derive(Debug, Clone, Copy, Default)]
+pub struct State;
+
+impl State {
+    /// Creates a new [`State`] with the scrollbar located at the top.
+    ///
+    /// [`State`]: struct.State.html
+    pub fn new() -> Self {
+        State::default()
+    }
+}

web/src/widget/slider.rs

@@ -4,7 +4,7 @@
 //!
 //! [`Slider`]: struct.Slider.html
 //! [`State`]: struct.State.html
-use crate::{Bus, Element, Length, Widget};
+use crate::{style, Bus, Element, Length, Widget};
 
 use dodrio::bumpalo;
 use std::{ops::RangeInclusive, rc::Rc};
@@ -82,12 +82,13 @@ impl<'a, Message> Slider<'a, Message> {
 
 impl<'a, Message> Widget<Message> for Slider<'a, Message>
 where
-    Message: 'static + Copy,
+    Message: 'static + Clone,
 {
     fn node<'b>(
         &self,
         bump: &'b bumpalo::Bump,
         bus: &Bus<Message>,
+        _style_sheet: &mut style::Sheet<'b>,
     ) -> dodrio::Node<'b> {
         use dodrio::builder::*;
         use wasm_bindgen::JsCast;
@@ -103,34 +104,33 @@ where
 
         // TODO: Make `step` configurable
         // TODO: Complete styling
-        label(bump)
+        input(bump)
-            .children(vec![input(bump)
+            .attr("type", "range")
-                .attr("type", "range")
+            .attr("step", "0.01")
-                .attr("step", "0.01")
+            .attr("min", min.into_bump_str())
-                .attr("min", min.into_bump_str())
+            .attr("max", max.into_bump_str())
-                .attr("max", max.into_bump_str())
+            .attr("value", value.into_bump_str())
-                .attr("value", value.into_bump_str())
+            .attr("style", "width: 100%")
-                .on("input", move |root, vdom, event| {
+            .on("input", move |root, vdom, event| {
-                    let slider = match event.target().and_then(|t| {
+                let slider = match event.target().and_then(|t| {
-                        t.dyn_into::<web_sys::HtmlInputElement>().ok()
+                    t.dyn_into::<web_sys::HtmlInputElement>().ok()
-                    }) {
+                }) {
-                        None => return,
+                    None => return,
-                        Some(slider) => slider,
+                    Some(slider) => slider,
-                    };
+                };
 
-                    if let Ok(value) = slider.value().parse::<f32>() {
+                if let Ok(value) = slider.value().parse::<f32>() {
-                        event_bus.publish(on_change(value), root);
+                    event_bus.publish(on_change(value), root);
-                        vdom.schedule_render();
+                    vdom.schedule_render();
-                    }
+                }
-                })
+            })
-                .finish()])
             .finish()
     }
 }
 
 impl<'a, Message> From<Slider<'a, Message>> for Element<'a, Message>
 where
-    Message: 'static + Copy,
+    Message: 'static + Clone,
 {
     fn from(slider: Slider<'a, Message>) -> Element<'a, Message> {
         Element::new(slider)

web/src/widget/text.rs

@@ -1,6 +1,6 @@
 use crate::{
-    Bus, Color, Element, Font, HorizontalAlignment, Length, VerticalAlignment,
+    style, Bus, Color, Element, Font, HorizontalAlignment, Length,
-    Widget,
+    VerticalAlignment, Widget,
 };
 use dodrio::bumpalo;
 
@@ -112,15 +112,30 @@ impl<'a, Message> Widget<Message> for Text {
         &self,
         bump: &'b bumpalo::Bump,
         _publish: &Bus<Message>,
+        _style_sheet: &mut style::Sheet<'b>,
     ) -> dodrio::Node<'b> {
         use dodrio::builder::*;
 
         let content = bumpalo::format!(in bump, "{}", self.content);
-        let size = bumpalo::format!(in bump, "font-size: {}px", self.size.unwrap_or(20));
+        let color = style::color(self.color.unwrap_or(Color::BLACK));
+
+        let text_align = match self.horizontal_alignment {
+            HorizontalAlignment::Left => "left",
+            HorizontalAlignment::Center => "center",
+            HorizontalAlignment::Right => "right",
+        };
+
+        let style = bumpalo::format!(
+            in bump,
+            "font-size: {}px; color: {}; text-align: {}",
+            self.size.unwrap_or(20),
+            color,
+            text_align
+        );
 
         // TODO: Complete styling
         p(bump)
-            .attr("style", size.into_bump_str())
+            .attr("style", style.into_bump_str())
             .children(vec![text(content.into_bump_str())])
             .finish()
     }

web/src/widget/text_input.rs

@@ -0,0 +1,197 @@
+//! Display fields that can be filled with text.
+//!
+//! A [`TextInput`] has some local [`State`].
+//!
+//! [`TextInput`]: struct.TextInput.html
+//! [`State`]: struct.State.html
+use crate::{bumpalo, style, Bus, Element, Length, Style, Widget};
+use std::rc::Rc;
+
+/// A field that can be filled with text.
+///
+/// # Example
+/// ```
+/// # use iced_web::{text_input, TextInput};
+/// #
+/// enum Message {
+///     TextInputChanged(String),
+/// }
+///
+/// let mut state = text_input::State::new();
+/// let value = "Some text";
+///
+/// let input = TextInput::new(
+///     &mut state,
+///     "This is the placeholder...",
+///     value,
+///     Message::TextInputChanged,
+/// );
+/// ```
+#[allow(missing_debug_implementations)]
+pub struct TextInput<'a, Message> {
+    _state: &'a mut State,
+    placeholder: String,
+    value: String,
+    width: Length,
+    max_width: Length,
+    padding: u16,
+    size: Option<u16>,
+    on_change: Rc<Box<dyn Fn(String) -> Message>>,
+    on_submit: Option<Message>,
+}
+
+impl<'a, Message> TextInput<'a, Message> {
+    /// Creates a new [`TextInput`].
+    ///
+    /// It expects:
+    /// - some [`State`]
+    /// - a placeholder
+    /// - the current value
+    /// - a function that produces a message when the [`TextInput`] changes
+    ///
+    /// [`TextInput`]: struct.TextInput.html
+    /// [`State`]: struct.State.html
+    pub fn new<F>(
+        state: &'a mut State,
+        placeholder: &str,
+        value: &str,
+        on_change: F,
+    ) -> Self
+    where
+        F: 'static + Fn(String) -> Message,
+    {
+        Self {
+            _state: state,
+            placeholder: String::from(placeholder),
+            value: String::from(value),
+            width: Length::Fill,
+            max_width: Length::Shrink,
+            padding: 0,
+            size: None,
+            on_change: Rc::new(Box::new(on_change)),
+            on_submit: None,
+        }
+    }
+
+    /// Sets the width of the [`TextInput`].
+    ///
+    /// [`TextInput`]: struct.TextInput.html
+    pub fn width(mut self, width: Length) -> Self {
+        self.width = width;
+        self
+    }
+
+    /// Sets the maximum width of the [`TextInput`].
+    ///
+    /// [`TextInput`]: struct.TextInput.html
+    pub fn max_width(mut self, max_width: Length) -> Self {
+        self.max_width = max_width;
+        self
+    }
+
+    /// Sets the padding of the [`TextInput`].
+    ///
+    /// [`TextInput`]: struct.TextInput.html
+    pub fn padding(mut self, units: u16) -> Self {
+        self.padding = units;
+        self
+    }
+
+    /// Sets the text size of the [`TextInput`].
+    ///
+    /// [`TextInput`]: struct.TextInput.html
+    pub fn size(mut self, size: u16) -> Self {
+        self.size = Some(size);
+        self
+    }
+
+    /// Sets the message that should be produced when the [`TextInput`] is
+    /// focused and the enter key is pressed.
+    ///
+    /// [`TextInput`]: struct.TextInput.html
+    pub fn on_submit(mut self, message: Message) -> Self {
+        self.on_submit = Some(message);
+        self
+    }
+}
+
+impl<'a, Message> Widget<Message> for TextInput<'a, Message>
+where
+    Message: 'static + Clone,
+{
+    fn node<'b>(
+        &self,
+        bump: &'b bumpalo::Bump,
+        bus: &Bus<Message>,
+        style_sheet: &mut style::Sheet<'b>,
+    ) -> dodrio::Node<'b> {
+        use dodrio::builder::*;
+        use wasm_bindgen::JsCast;
+
+        let padding_class =
+            style_sheet.insert(bump, Style::Padding(self.padding));
+
+        let on_change = self.on_change.clone();
+        let event_bus = bus.clone();
+
+        input(bump)
+            .attr(
+                "class",
+                bumpalo::format!(in bump, "{}", padding_class).into_bump_str(),
+            )
+            .attr(
+                "style",
+                bumpalo::format!(
+                    in bump,
+                    "font-size: {}px",
+                    self.size.unwrap_or(20)
+                )
+                .into_bump_str(),
+            )
+            .attr(
+                "placeholder",
+                bumpalo::format!(in bump, "{}", self.placeholder)
+                    .into_bump_str(),
+            )
+            .attr(
+                "value",
+                bumpalo::format!(in bump, "{}", self.value).into_bump_str(),
+            )
+            .on("input", move |root, vdom, event| {
+                let text_input = match event.target().and_then(|t| {
+                    t.dyn_into::<web_sys::HtmlInputElement>().ok()
+                }) {
+                    None => return,
+                    Some(text_input) => text_input,
+                };
+
+                event_bus.publish(on_change(text_input.value()), root);
+                vdom.schedule_render();
+            })
+            .finish()
+    }
+}
+
+impl<'a, Message> From<TextInput<'a, Message>> for Element<'a, Message>
+where
+    Message: 'static + Clone,
+{
+    fn from(text_input: TextInput<'a, Message>) -> Element<'a, Message> {
+        Element::new(text_input)
+    }
+}
+
+/// The state of a [`TextInput`].
+///
+/// [`TextInput`]: struct.TextInput.html
+#[derive(Debug, Clone, Copy, Default)]
+pub struct State;
+
+impl State {
+    /// Creates a new [`State`], representing an unfocused [`TextInput`].
+    ///
+    /// [`State`]: struct.State.html
+    pub fn new() -> Self {
+        Self::default()
+    }
+}