mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-09-20 06:11:57 +00:00
cut out a number of changes from the hr PR (#2580)
This commit is contained in:
parent
9bf46968cd
commit
b30810e486
12 changed files with 89 additions and 18 deletions
|
@ -28,7 +28,7 @@ fn app() -> Element {
|
|||
link { href:"https://fonts.googleapis.com/icon?family=Material+Icons", rel:"stylesheet" }
|
||||
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" }
|
||||
}
|
||||
|
|
|
@ -54,7 +54,7 @@ fn app() -> Element {
|
|||
id: "directory-upload",
|
||||
checked: enable_directory_upload,
|
||||
oninput: move |evt| enable_directory_upload.set(evt.checked()),
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
|
|
|
@ -41,8 +41,8 @@ fn Decrement() -> Element {
|
|||
#[component]
|
||||
fn Display() -> Element {
|
||||
rsx! {
|
||||
p { "Count: ", "{COUNT}" }
|
||||
p { "Doubled: ", "{DOUBLED_COUNT}" }
|
||||
p { "Count: {COUNT}" }
|
||||
p { "Doubled: {DOUBLED_COUNT}" }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -20,7 +20,7 @@ fn app() -> Element {
|
|||
|
||||
// Add some cute animations if the radio is playing!
|
||||
div { class: if state.read().is_playing { "bounce" },
|
||||
"The radio is... ", {state.read().is_playing()}, "!"
|
||||
"The radio is... " {state.read().is_playing()} "!"
|
||||
}
|
||||
|
||||
button { id: "play", onclick: move |_| state.write().reduce(PlayerAction::Pause), "Pause" }
|
||||
|
|
|
@ -79,7 +79,7 @@ fn app() -> Element {
|
|||
}
|
||||
div {
|
||||
// pass simple rust expressions in
|
||||
class: lazy_fmt,
|
||||
class: "{lazy_fmt}",
|
||||
id: format_args!("attributes can be passed lazily with std::fmt::Arguments"),
|
||||
class: "asd",
|
||||
class: "{asd}",
|
||||
|
@ -97,7 +97,7 @@ fn app() -> Element {
|
|||
{rsx!(p { "More templating!" })},
|
||||
|
||||
// Iterators
|
||||
{(0..10).map(|i| rsx!(li { "{i}" }))},
|
||||
{(0..10).map(|i| rsx!(li { "{i}" }))}
|
||||
|
||||
// Iterators within expressions
|
||||
{
|
||||
|
@ -117,7 +117,7 @@ fn app() -> Element {
|
|||
// Conditional rendering
|
||||
// Dioxus conditional rendering is based around None/Some. We have no special syntax for conditionals.
|
||||
// You can convert a bool condition to rsx! with .then and .or
|
||||
{true.then(|| rsx!(div {}))},
|
||||
{true.then(|| rsx!(div {}))}
|
||||
|
||||
// Alternatively, you can use the "if" syntax - but both branches must be resolve to Element
|
||||
if false {
|
||||
|
@ -135,7 +135,7 @@ fn app() -> Element {
|
|||
}}
|
||||
|
||||
// returning "None" without a diverging branch is a bit noisy... but rare in practice
|
||||
{None as Option<()>},
|
||||
{None as Option<()>}
|
||||
|
||||
// can also just use empty fragments
|
||||
Fragment {}
|
||||
|
@ -176,8 +176,8 @@ fn app() -> Element {
|
|||
|
||||
// Spreading can also be overridden manually
|
||||
Taller {
|
||||
..TallerProps { a: "ballin!", children: VNode::empty() },
|
||||
a: "not ballin!"
|
||||
a: "not ballin!",
|
||||
..TallerProps { a: "ballin!", children: VNode::empty() }
|
||||
}
|
||||
|
||||
// Can take children too!
|
||||
|
|
|
@ -12,17 +12,17 @@ fn app() -> Element {
|
|||
rsx!(
|
||||
div {
|
||||
// Use Map directly to lazily pull elements
|
||||
{(0..10).map(|f| rsx! { "{f}" })},
|
||||
{(0..10).map(|f| rsx! { "{f}" })}
|
||||
|
||||
// Collect into an intermediate collection if necessary, and call into_iter
|
||||
{["a", "b", "c", "d", "e", "f"]
|
||||
.into_iter()
|
||||
.map(|f| rsx! { "{f}" })
|
||||
.collect::<Vec<_>>()
|
||||
.into_iter()},
|
||||
.into_iter()}
|
||||
|
||||
// Use optionals
|
||||
{Some(rsx! { "Some" })},
|
||||
{Some(rsx! { "Some" })}
|
||||
|
||||
// use a for loop where the body itself is RSX
|
||||
for name in 0..10 {
|
||||
|
|
|
@ -225,7 +225,7 @@ fn ListFooter(
|
|||
match active_todo_count() {
|
||||
1 => "item",
|
||||
_ => "items",
|
||||
},
|
||||
}
|
||||
" left"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,8 +4,8 @@ macro_rules! twoway {
|
|||
|
||||
// doc attrs
|
||||
$( #[doc = $doc:expr] )*
|
||||
$name:ident,
|
||||
)*
|
||||
$name:ident
|
||||
),*
|
||||
) => {
|
||||
$(
|
||||
$( #[doc = $doc] )*
|
||||
|
@ -51,4 +51,6 @@ twoway![
|
|||
letsome,
|
||||
fat_exprs,
|
||||
nested,
|
||||
staged,
|
||||
misplaced
|
||||
];
|
||||
|
|
|
@ -38,5 +38,9 @@ rsx! {
|
|||
// todo some work in here
|
||||
class: "hello world"
|
||||
}
|
||||
|
||||
div {
|
||||
div {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -12,7 +12,11 @@ pub(crate) fn Nav() -> Element {
|
|||
let mut sidebar = SHOW_SIDEBAR.write();
|
||||
*sidebar = !*sidebar;
|
||||
},
|
||||
MaterialIcon { name: "menu", size: 24, color: MaterialIconColor::Dark }
|
||||
MaterialIcon {
|
||||
name: "menu",
|
||||
size: 24,
|
||||
color: MaterialIconColor::Dark
|
||||
}
|
||||
}
|
||||
div { class: "flex z-50 md:flex-1 px-2", LinkList {} }
|
||||
|
||||
|
|
35
packages/autofmt/tests/samples/misplaced.rsx
Normal file
35
packages/autofmt/tests/samples/misplaced.rsx
Normal file
|
@ -0,0 +1,35 @@
|
|||
pub(crate) fn Nav() -> Element {
|
||||
rsx! {
|
||||
SearchModal {}
|
||||
header {
|
||||
class: "sticky top-0 z-30 bg-white dark:text-gray-200 dark:bg-ideblack border-b dark:border-stone-700 h-16 bg-opacity-80 backdrop-blur-sm",
|
||||
class: if HIGHLIGHT_NAV_LAYOUT() { "border border-orange-600 rounded-md" },
|
||||
div { class: "lg:py-2 px-2 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6 h-16",
|
||||
button {
|
||||
class: "bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100]",
|
||||
class: if !SHOW_DOCS_NAV() { "hidden" },
|
||||
onclick: move |_| {
|
||||
let mut sidebar = SHOW_SIDEBAR.write();
|
||||
*sidebar = !*sidebar;
|
||||
},
|
||||
MaterialIcon {
|
||||
name: "menu",
|
||||
size: 24,
|
||||
color: MaterialIconColor::Dark
|
||||
}
|
||||
}
|
||||
div { class: "flex z-50 md:flex-1 px-2", LinkList {} }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn SidebarSection(chapter: &'static SummaryItem<BookRoute>) -> Element {
|
||||
let link = chapter.maybe_link()?;
|
||||
let sections = link.nested_items.iter().map(|chapter| {
|
||||
rsx! {
|
||||
SidebarChapter { chapter }
|
||||
}
|
||||
});
|
||||
}
|
26
packages/autofmt/tests/samples/staged.rsx
Normal file
26
packages/autofmt/tests/samples/staged.rsx
Normal file
|
@ -0,0 +1,26 @@
|
|||
rsx! {
|
||||
div {}
|
||||
|
||||
div { "hi" }
|
||||
|
||||
div { class: "helo", "hi" }
|
||||
|
||||
div { class: "helo", glass: "123", "hi" }
|
||||
|
||||
div { {some_expr} }
|
||||
div {
|
||||
{
|
||||
POSTS.iter().enumerate().map(|(id, post)| rsx! {
|
||||
BlogPostItem { post, id }
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
div { class: "123123123123123123123123123123123123",
|
||||
{some_really_long_expr_some_really_long_expr_some_really_long_expr_some_really_long_expr_}
|
||||
}
|
||||
|
||||
div { class: "-my-8 divide-y-2 divide-gray-100",
|
||||
{POSTS.iter().enumerate().map(|(id, post)| rsx! { BlogPostItem { post: post, id: id } })}
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue