added alpha channel

examples/border.rs

@@ -16,9 +16,6 @@ fn app(cx: Scope) -> Element {
             background_color: "hsl(248, 53%, 58%)",
             onwheel: move |w| set_radius((radius + w.delta_y as i8).abs()),
 
-            // the border can either be solid, double, thick, OR rounded
-            // if multable are set only the last style is appiled
-            // to skip a side set the style to none
             border_style: "solid none solid double",
             border_width: "thick",
             border_radius: "{radius}px",

examples/color_test.rs

@@ -0,0 +1,48 @@
+use dioxus::prelude::*;
+
+fn main() {
+    // rink::launch(app);
+    rink::launch_cfg(
+        app,
+        rink::Config {
+            rendering_mode: rink::RenderingMode::Ansi,
+        },
+    );
+}
+
+fn app(cx: Scope) -> Element {
+    let steps = 50;
+    cx.render(rsx! {
+        div{
+            width: "100%",
+            height: "100%",
+            flex_direction: "column",
+            (0..=steps).map(|x|
+                {
+                    let hue = x as f32*360.0/steps as f32;
+                    cx.render(rsx! {
+                        div{
+                            width: "100%",
+                            height: "100%",
+                            flex_direction: "row",
+                            (0..=steps).map(|y|
+                                {
+                                    let alpha = y as f32*100.0/steps as f32;
+                                    cx.render(rsx! {
+                                        div {
+                                            left: "{x}px",
+                                            top: "{y}px",
+                                            width: "10%",
+                                            height: "100%",
+                                            background_color: "hsl({hue}, 100%, 50%, {alpha}%)",
+                                        }
+                                    })
+                                }
+                            )
+                        }
+                    })
+                }
+            )
+        }
+    })
+}

examples/text.rs

@@ -2,9 +2,17 @@ use dioxus::prelude::*;
 
 fn main() {
     rink::launch(app);
+    // rink::launch_cfg(
+    //     app,
+    //     rink::Config {
+    //         rendering_mode: rink::RenderingMode::Ansi,
+    //     },
+    // )
 }
 
 fn app(cx: Scope) -> Element {
+    let (alpha, set_alpha) = use_state(&cx, || 100);
+
     cx.render(rsx! {
         div {
             width: "100%",
@@ -13,7 +21,9 @@ fn app(cx: Scope) -> Element {
             // justify_content: "center",
             // align_items: "center",
             // flex_direction: "row",
-            // background_color: "red",
+            onwheel: move |evt| {
+                set_alpha((alpha + evt.data.delta_y as i64).min(100).max(0));
+            },
 
             p {
                 background_color: "black",
@@ -21,6 +31,7 @@ fn app(cx: Scope) -> Element {
                 justify_content: "center",
                 align_items: "center",
                 // height: "10%",
+                color: "green",
                 "hi"
                 "hi"
                 "hi"
@@ -73,7 +84,7 @@ fn app(cx: Scope) -> Element {
             div {
                 font_weight: "bold",
                 color: "#666666",
-                p{
+                p {
                     "bold"
                 }
                 p {
@@ -88,14 +99,29 @@ fn app(cx: Scope) -> Element {
             }
             p {
                 text_decoration: "underline",
-                color: "rgb(50, 100, 255)",
+                color: "rgba(255, 255, 255)",
                 "underline"
             }
             p {
                 text_decoration: "line-through",
-                color: "hsl(10, 100%, 70%)",
+                color: "hsla(10, 100%, 70%)",
                 "line-through"
             }
+            div{
+                position: "absolute",
+                top: "1px",
+                background_color: "rgba(255, 0, 0, 50%)",
+                width: "100%",
+                p {
+                    color: "rgba(255, 255, 255, {alpha}%)",
+                    background_color: "rgba(100, 100, 100, {alpha}%)",
+                    "rgba(255, 255, 255, {alpha}%)"
+                }
+                p {
+                    color: "rgba(255, 255, 255, 100%)",
+                    "rgba(255, 255, 255, 100%)"
+                }
+            }
         }
     })
 }