| #![feature(track_caller)] | |
| use seed::{*, prelude::*}; | |
| use seed_hooks::*; | |
| use seed_hooks::style::*; | |
| use seed_hooks::style::measures::px; | |
| // Model, Msg, Update, init(), and start() | |
| // --------------------------------------- | |
| struct Model {} |
| fn view(_model: &Model) -> Node<Msg> { | |
| let theme = Theme::new_with_styles( | |
| &[ | |
| ("primary_color", "orange"), | |
| ("secondary_color", "gray"), | |
| ] | |
| ); | |
| use_theme(theme, || |
Seed hook - any of the Seed functions that facilitate storing and updating of component state. For example, functions such as use_state, new_state and bind. The term hook refers to React Hooks which have similar functionality.
Component state - the collection of state variables that are used and stored by a component.
State variable - a variable that is stored locally in a component by use_state or new_state. i.e. the integer value in:
let counter = use_state(||0);
Seed hook - any of the Seed functions that facilitate storing and updating of component state. For example, functions such as use_state, new_state and bind.
Component state - the collection of state variables that are used and stored by a component.
State variable a variable that is stored locally in a component by use_state or new_state. i.e. the integer value in:
let counter = use_state(||0);
| #![feature(track_caller)] | |
| use comp_state::topo; | |
| // ------ ------ | |
| // Before Mount | |
| // ------ ------ | |
| fn before_mount(_: Url) -> BeforeMount { | |
| BeforeMount::new().mount_type(MountType::Takeover) | |
| } |
| use comp_state::{topo, use_state}; | |
| use enclose::enclose as e; | |
| use seed::{prelude::*, *}; | |
| use std::str::FromStr; | |
| pub mod color; | |
| use color::{Color, ColorValue}; | |
| // ------ ------ | |
| // Usage |
| use crate::{generated::css_classes::C, twisk::*, Msg}; | |
| use comp_state::{topo, use_state}; | |
| use seed::{prelude::*, *}; | |
| use seed_comp_helpers::on_click; | |
| #[topo::nested] | |
| pub fn view() -> Node<Msg> { | |
| div![ | |
| menus::pink_menu( | |
| "Tailwind Starter Kit in Seed", |
| #[derive(Clone, Debug, Deserialize)] | |
| pub struct Country { | |
| name: String, | |
| currency: String, | |
| emoji: String, | |
| } | |
| pub fn view() -> Node<Msg> { | |
| // These could be arguments to view(...) for instance. | |
| let graphql_query = "{countries {name currency emoji}}"; |
| fn reacts_example() -> Node<Msg> { | |
| let (name, mut name_access) = use_istate(|| "bob".to_string()); | |
| let (person, person_access) = use_istate(Person::default); | |
| name_access.react_with(&person_access, |name, mut person| { | |
| person.name = name; | |
| person | |
| }); | |
| div![ |
| fn view(&mut self) -> Element<Message> { | |
| let (count, count_access) = use_istate(||0); | |
| Column::new() | |
| .padding(20) | |
| .push( | |
| Button::new(Text::new("Increment")) | |
| .on_press_callback(||count_accesss.set(count + 1)), |