feat: add background_color field to Label/Column/Row/Grid (#90

)

Makefile

@@ -50,7 +50,7 @@ prepare:
 	@rustup target add wasm32-unknown-unknown
 	@cargo install wasm-bindgen-cli
 
-pre-commit: fmt linter test
+pre-commit: fmt fmt-leptos linter test
 
 serve: examples
 	@cd dist && python3 -m http.server 8000

examples/blur.rs

@@ -1,6 +1,7 @@
 use leptos::*;
 use lerni::*;
 
+/// Blur example.
 #[component]
 pub fn Blur() -> impl IntoView {
     let (blur, set_blur) = create_signal(false);

examples/buttons.rs

@@ -1,6 +1,7 @@
 use leptos::*;
 use lerni::*;
 
+/// Buttons example.
 #[component]
 pub fn Buttons() -> impl IntoView {
     let (counter, set_counter) = create_signal(0);

examples/grid.rs

@@ -1,6 +1,7 @@
 use leptos::*;
 use lerni::*;
 
+/// Grid layout example.
 #[component]
 pub fn GridExample() -> impl IntoView {
     view! {
@@ -31,7 +32,9 @@ pub fn GridExample() -> impl IntoView {
                 <Grid cols=4 rows=2 border_width=4 spacing=20>
                     <Label valign=VAlign::Top>"9"</Label>
                     <Label valign=VAlign::Bottom>"10"</Label>
-                    <Label>11</Label>
+                    <Label color=Color::White background_color=Color::Red>
+                        "11"
+                    </Label>
                     <Button
                         align=Align::Fill
                         valign=VAlign::Fill

examples/hello_world.rs

@@ -2,6 +2,7 @@ use leptos::{ev::keydown, *};
 use leptos_use::use_event_listener;
 use lerni::*;
 
+/// Hello world example.
 #[component]
 pub fn HelloWorld() -> impl IntoView {
     view! {
@@ -17,6 +18,7 @@ pub fn HelloWorld() -> impl IntoView {
     }
 }
 
+/// Counter component.
 #[component]
 pub fn Counter() -> impl IntoView {
     let (counter, set_counter) = create_signal(0);

examples/rows_cols.rs

@@ -1,17 +1,28 @@
 use leptos::*;
 use lerni::*;
 
+/// Rows and columns layout example.
 #[component]
 pub fn RowsCols() -> impl IntoView {
     view! {
         <Slide>
-            <Row border_width=4 stretch=[1, 1, 4, 1, 1] padding=20>
+            <Row
+                border_width=4
+                stretch=[1, 1, 4, 1, 1]
+                padding=20
+                background_color=Color::MistyRose
+            >
                 <Label>"1"</Label>
                 <Button align=Align::Fill valign=VAlign::Fill on_click=|_| ()>
                     "2"
                 </Button>
                 <Label bold=true>"3"</Label>
-                <Column border_width=4 stretch=[1, 2, 3, 4] spacing=20>
+                <Column
+                    border_width=4
+                    stretch=[1, 2, 3, 4]
+                    spacing=20
+                    background_color=Color::Honeydew
+                >
                     <Label>"4"</Label>
                     <Label>"5"</Label>
                     <Button align=Align::Fill valign=VAlign::Fill on_click=|_| ()>

examples/stack.rs

@@ -1,6 +1,7 @@
 use leptos::*;
 use lerni::*;
 
+/// Stack example.
 #[component]
 pub fn StackExample() -> impl IntoView {
     view! {

examples/svg.rs

@@ -1,6 +1,7 @@
 use leptos::*;
 use lerni::*;
 
+/// SVG example.
 #[component]
 pub fn SvgExample() -> impl IntoView {
     view! {

examples/text.rs

@@ -2,6 +2,7 @@ use leptos::{ev::keydown, *};
 use leptos_use::use_event_listener;
 use lerni::*;
 
+/// Text example.
 #[component]
 pub fn TextExample() -> impl IntoView {
     let word_count1 = create_rw_signal(0);