6 releases
0.2.4 | Dec 3, 2021 |
---|---|
0.2.3 | Nov 2, 2021 |
0.2.2 | May 19, 2021 |
0.1.0 | Nov 25, 2020 |
#2083 in Web programming
23KB
560 lines
Isaribi
You can use unique class name by the component. Class names in the component will be mapped to the format: __[RandomStr]_[class name]. This means that you can write unique style-sheet by the component.
Isaribi can be used not only in Yew, but also in Kagura and so on.
use in Yew
extern crate isaribi;
use isaribi::{
style,
styled::{Style, Styled},
};
use wasm_bindgen::prelude::*;
use yew::prelude::*;
struct Model {}
enum Msg {}
impl Component for Model {
type Message = Msg;
type Properties = ();
fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
Self {}
}
fn update(&mut self, _: Self::Message) -> ShouldRender {
true
}
fn change(&mut self, _: Self::Properties) -> ShouldRender {
false
}
fn view(&self) -> Html {
Self::styled(html! {
<div class=Self::class("base")>
<h1>{"Helllo from Isaribi"}</h1>
</div>
})
}
}
impl Styled for Model {
fn style() -> Style {
style! {
".base" {
"position": "fixed";
"top": "0";
"left": "0";
"width": "100vw";
"height": "100vh";
"color": "#ffffff";
}
".base > h1" {
"width": "max-content";
"margin-left": "auto";
"margin-right": "auto";
}
@media "(orientation: landscape)" {
".base" {
"background-color": "#0366d6";
}
}
@media "(orientation: portrait)" {
".base" {
"background-color": "#d73a49";
}
}
}
}
}
#[wasm_bindgen(start)]
pub fn run_app() {
App::<Model>::new().mount_to_body();
}
Dependencies
~8–12MB
~221K SLoC