chore: remove unnecessary brackets from examples (#552)
This commit is contained in:
1 parent
e4466fee0a
commit
41b450eedf
11 files changed
+44
-52
No files matched your search
@@ -57,12 +57,12 @@ fn app(cx: Scope) -> Element {
|
||||
};
|
||||
|
||||
cx.render(rsx!(
|
||||
style { [include_str!("./assets/calculator.css")] }
|
||||
style { include_str!("./assets/calculator.css") }
|
||||
div { id: "wrapper",
|
||||
div { class: "app",
|
||||
div { class: "calculator",
|
||||
onkeydown: handle_key_down_event,
|
||||
div { class: "calculator-display", [val.to_string()] }
|
||||
div { class: "calculator-display", val.to_string() }
|
||||
div { class: "calculator-keypad",
|
||||
div { class: "input-keys",
|
||||
div { class: "function-keys",
|
||||
@@ -74,7 +74,7 @@ fn app(cx: Scope) -> Element {
|
||||
val.set("0".into());
|
||||
}
|
||||
},
|
||||
[if val.is_empty() { "C" } else { "AC" }]
|
||||
if val.is_empty() { "C" } else { "AC" }
|
||||
}
|
||||
button {
|
||||
class: "calculator-key key-sign",
|
||||
|
||||
@@ -12,7 +12,7 @@ fn app(cx: Scope) -> Element {
|
||||
button {
|
||||
onclick: move |_| disabled.set(!disabled),
|
||||
"click to "
|
||||
[if disabled == true {"enable"} else {"disable"}]
|
||||
if disabled == true { "enable" } else { "disable" }
|
||||
" the lower button"
|
||||
}
|
||||
|
||||
|
||||
@@ -19,10 +19,10 @@ fn app(cx: Scope) -> Element {
|
||||
|
||||
rsx!(cx, div {
|
||||
link { href:"https://fonts.googleapis.com/icon?family=Material+Icons", rel:"stylesheet", }
|
||||
style { [include_str!("./assets/fileexplorer.css")] }
|
||||
style { include_str!("./assets/fileexplorer.css") }
|
||||
header {
|
||||
i { class: "material-icons icon-menu", "menu" }
|
||||
h1 { "Files: " [files.read().current()] }
|
||||
h1 { "Files: ", files.read().current() }
|
||||
span { }
|
||||
i { class: "material-icons", onclick: move |_| files.write().go_up(), "logout" }
|
||||
}
|
||||
|
||||
@@ -38,12 +38,6 @@ const FIELDS: &[(&str, &str)] = &[
|
||||
fn app(cx: Scope) -> Element {
|
||||
cx.render(rsx! {
|
||||
div { margin_left: "30px",
|
||||
|
||||
// radio group
|
||||
|
||||
|
||||
|
||||
|
||||
div {
|
||||
// handling inputs on divs will catch all input events below
|
||||
// so the value of our input event will be either huey, dewey, louie, or true/false (because of the checkboxe)
|
||||
@@ -127,7 +121,6 @@ fn app(cx: Scope) -> Element {
|
||||
name: "{field}",
|
||||
r#type: "{field}",
|
||||
value: "{value}",
|
||||
// checked: "false",
|
||||
oninput: move |evt: FormEvent| {
|
||||
println!("{:?}", evt);
|
||||
},
|
||||
|
||||
@@ -15,7 +15,6 @@ fn app(cx: Scope) -> Element {
|
||||
div {
|
||||
onclick: move |_| println!("clicked! top"),
|
||||
"- div"
|
||||
|
||||
button {
|
||||
onclick: move |_| println!("clicked! bottom propoate"),
|
||||
"Propogate"
|
||||
|
||||
@@ -36,18 +36,18 @@ fn app(cx: Scope) -> Element {
|
||||
let state = use_ref(&cx, Calculator::new);
|
||||
|
||||
cx.render(rsx! {
|
||||
style { [include_str!("./assets/calculator.css")] }
|
||||
style { include_str!("./assets/calculator.css") }
|
||||
div { id: "wrapper",
|
||||
div { class: "app",
|
||||
div { class: "calculator", onkeypress: move |evt| state.write().handle_keydown(evt),
|
||||
div { class: "calculator-display", [state.read().formatted_display()]}
|
||||
div { class: "calculator-display", state.read().formatted_display() }
|
||||
div { class: "calculator-keypad",
|
||||
div { class: "input-keys",
|
||||
div { class: "function-keys",
|
||||
CalculatorKey {
|
||||
name: "key-clear",
|
||||
onclick: move |_| state.write().clear_display(),
|
||||
[if state.read().display_value == "0" { "C" } else { "AC" }]
|
||||
if state.read().display_value == "0" { "C" } else { "AC" }
|
||||
}
|
||||
CalculatorKey {
|
||||
name: "key-sign",
|
||||
|
||||
@@ -20,7 +20,7 @@ fn app(cx: Scope) -> Element {
|
||||
cx.render(rsx!(
|
||||
div {
|
||||
h1 {"Select an option"}
|
||||
h3 { "The radio is... " [state.is_playing()] "!" }
|
||||
h3 { "The radio is... ", state.is_playing(), "!" }
|
||||
button { onclick: move |_| state.make_mut().reduce(PlayerAction::Pause),
|
||||
"Pause"
|
||||
}
|
||||
|
||||
@@ -32,27 +32,19 @@ fn example(cx: Scope) -> Element {
|
||||
|
||||
cx.render(rsx!(
|
||||
div {
|
||||
div {
|
||||
id: "asd",
|
||||
div { id: "asd",
|
||||
"your neighborhood spiderman"
|
||||
|
||||
items.iter().cycle().take(5).map(|f| rsx!{
|
||||
div {
|
||||
"{f.a}"
|
||||
}
|
||||
div { "{f.a}" }
|
||||
})
|
||||
|
||||
things_list.iter().map(|f| rsx!{
|
||||
div {
|
||||
"{f.a}"
|
||||
"{f.b}"
|
||||
}
|
||||
div { "{f.a}" "{f.b}" }
|
||||
})
|
||||
|
||||
mything_read.as_ref().map(|f| rsx!{
|
||||
div {
|
||||
"{f}"
|
||||
}
|
||||
mything_read.as_ref().map(|f| rsx! {
|
||||
div { "{f}" }
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
+22
-13
@@ -1,3 +1,5 @@
|
||||
#![allow(non_snake_case)]
|
||||
|
||||
//! A tour of the rsx! macro
|
||||
//! ------------------------
|
||||
//!
|
||||
@@ -42,10 +44,6 @@ fn main() {
|
||||
dioxus_desktop::launch(app);
|
||||
}
|
||||
|
||||
/// When trying to return "nothing" to Dioxus, you'll need to specify the type parameter or Rust will be sad.
|
||||
/// This type alias specifies the type for you so you don't need to write "None as Option<()>"
|
||||
const NONE_ELEMENT: Option<()> = None;
|
||||
|
||||
use core::{fmt, str::FromStr};
|
||||
use std::fmt::Display;
|
||||
|
||||
@@ -63,7 +61,7 @@ fn app(cx: Scope) -> Element {
|
||||
h1 {"Some text"}
|
||||
h1 {"Some text with {formatting}"}
|
||||
h1 {"Formatting basic expressions {formatting_tuple.0} and {formatting_tuple.1}"}
|
||||
h1 {"Formatting without interpolation " [formatting_tuple.0] "and" [formatting_tuple.1] }
|
||||
h1 {"Formatting without interpolation " formatting_tuple.0 "and" formatting_tuple.1 }
|
||||
h2 {
|
||||
"Multiple"
|
||||
"Text"
|
||||
@@ -131,13 +129,9 @@ fn app(cx: Scope) -> Element {
|
||||
None
|
||||
}
|
||||
|
||||
|
||||
// returning "None" without a diverging branch is a bit noisy... but rare in practice
|
||||
None as Option<()>,
|
||||
|
||||
// Use the Dioxus type-alias for less noise
|
||||
NONE_ELEMENT,
|
||||
|
||||
// can also just use empty fragments
|
||||
Fragment {}
|
||||
|
||||
@@ -160,7 +154,7 @@ fn app(cx: Scope) -> Element {
|
||||
// Can accept any paths
|
||||
// Notice how you still get syntax highlighting and IDE support :)
|
||||
Baller {}
|
||||
baller::Baller { }
|
||||
baller::Baller {}
|
||||
crate::baller::Baller {}
|
||||
|
||||
// Can take properties
|
||||
@@ -187,11 +181,13 @@ fn app(cx: Scope) -> Element {
|
||||
// This component's props are defined *inline* with the `inline_props` macro
|
||||
WithInline { text: "using functionc all syntax" }
|
||||
|
||||
// Components can be geneirc too
|
||||
// Components can be generic too
|
||||
// This component takes i32 type to give you typed input
|
||||
TypedInput::<TypedInputProps<i32>> {}
|
||||
|
||||
// Type inference can be used too
|
||||
TypedInput { initial: 10.0 }
|
||||
|
||||
// geneircs with the `inline_props` macro
|
||||
Label { text: "hello geneirc world!" }
|
||||
Label { text: 99.9 }
|
||||
@@ -205,10 +201,23 @@ fn app(cx: Scope) -> Element {
|
||||
// helper functions
|
||||
// Anything that implements IntoVnode can be dropped directly into Rsx
|
||||
helper(&cx, "hello world!")
|
||||
|
||||
// Strings can be supplied directly
|
||||
String::from("Hello world!")
|
||||
|
||||
// So can format_args
|
||||
format_args!("Hello {}!", "world")
|
||||
|
||||
// Or we can shell out to a helper function
|
||||
format_dollars(10, 50)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
fn format_dollars(dollars: u32, cents: u32) -> String {
|
||||
format!("${}.{:02}", dollars, cents)
|
||||
}
|
||||
|
||||
fn helper<'a>(cx: &'a ScopeState, text: &str) -> Element<'a> {
|
||||
cx.render(rsx! {
|
||||
p { "{text}" }
|
||||
@@ -223,7 +232,7 @@ fn lowercase_helper(cx: Scope) -> Element {
|
||||
|
||||
mod baller {
|
||||
use super::*;
|
||||
#[derive(Props, PartialEq)]
|
||||
#[derive(Props, PartialEq, Eq)]
|
||||
pub struct BallerProps {}
|
||||
|
||||
#[allow(non_snake_case)]
|
||||
@@ -252,7 +261,7 @@ pub fn Taller<'a>(cx: Scope<'a, TallerProps<'a>>) -> Element {
|
||||
})
|
||||
}
|
||||
|
||||
#[derive(Props, PartialEq)]
|
||||
#[derive(Props, PartialEq, Eq)]
|
||||
pub struct TypedInputProps<T> {
|
||||
#[props(optional, default)]
|
||||
initial: Option<T>,
|
||||
|
||||
+6
-5
@@ -1,3 +1,5 @@
|
||||
#![allow(non_snake_case)]
|
||||
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_elements::input_data::keyboard_types::Key;
|
||||
|
||||
@@ -5,14 +7,14 @@ fn main() {
|
||||
dioxus_desktop::launch(app);
|
||||
}
|
||||
|
||||
#[derive(PartialEq)]
|
||||
#[derive(Eq, PartialEq)]
|
||||
pub enum FilterState {
|
||||
All,
|
||||
Active,
|
||||
Completed,
|
||||
}
|
||||
|
||||
#[derive(Debug, PartialEq, Clone)]
|
||||
#[derive(Debug, Eq, PartialEq, Clone)]
|
||||
pub struct TodoItem {
|
||||
pub id: u32,
|
||||
pub checked: bool,
|
||||
@@ -46,7 +48,7 @@ pub fn app(cx: Scope<()>) -> Element {
|
||||
|
||||
cx.render(rsx!{
|
||||
section { class: "todoapp",
|
||||
style { [include_str!("./assets/todomvc.css")] }
|
||||
style { include_str!("./assets/todomvc.css") }
|
||||
div {
|
||||
header { class: "header",
|
||||
h1 {"todos"}
|
||||
@@ -86,7 +88,7 @@ pub fn app(cx: Scope<()>) -> Element {
|
||||
li { class: "Active", a { onclick: move |_| filter.set(FilterState::Active), "Active" }}
|
||||
li { class: "Completed", a { onclick: move |_| filter.set(FilterState::Completed), "Completed" }}
|
||||
}
|
||||
(show_clear_completed).then(|| rsx!(
|
||||
show_clear_completed.then(|| rsx!(
|
||||
button {
|
||||
class: "clear-completed",
|
||||
onclick: move |_| todos.make_mut().retain(|_, todo| !todo.checked),
|
||||
@@ -123,7 +125,6 @@ pub fn TodoEntry<'a>(cx: Scope<'a, TodoEntryProps<'a>>) -> Element {
|
||||
li {
|
||||
class: "{completed} {editing}",
|
||||
div { class: "view",
|
||||
|
||||
input {
|
||||
class: "toggle",
|
||||
r#type: "checkbox",
|
||||
|
||||
@@ -84,9 +84,7 @@ fn app(cx: Scope) -> Element {
|
||||
button {
|
||||
class: "inline-flex items-center text-white bg-blue-500 border-0 py-1 px-3 hover:bg-green-700 rounded",
|
||||
onmousedown: |evt| evt.cancel_bubble(),
|
||||
onclick: move |_| {
|
||||
window.set_title("Dioxus Application");
|
||||
},
|
||||
onclick: move |_| window.set_title("Dioxus Application"),
|
||||
"Change Title"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user