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 |
#2044 in Web programming
95 downloads per month
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
~9–12MB
~224K SLoC