-
-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
geoffreygarrett
committed
Jan 8, 2025
1 parent
0b05c84
commit b0598d9
Showing
5 changed files
with
65 additions
and
43 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,59 +1,79 @@ | ||
| use leptos::ev; | ||
| use leptos::prelude::*; | ||
| use radix_leptos_label::*; | ||
| use tailwind_fuse::*; | ||
|
|
||
| /// Styled example with a basic label | ||
| #[component] | ||
| pub fn Styled() -> impl IntoView { | ||
| let root_class = Memo::new(move |_| RootClass::default().to_class()); | ||
|
|
||
| pub fn Basic() -> impl IntoView { | ||
| view! { | ||
| <Label attr:class=root_class>Label</Label> | ||
| <Label attr:class="inline-block align-middle cursor-default border border-solid border-gray-200 p-2"> | ||
| "Basic Label" | ||
| </Label> | ||
| } | ||
| } | ||
|
|
||
| /// Shows both wrapping and referencing controls | ||
| #[component] | ||
| pub fn WithControl() -> impl IntoView { | ||
| let control_class = Memo::new(move |_| ControlClass::default().to_class()); | ||
| view! { | ||
| <div class="space-y-4"> | ||
| <h2>"Wrapping control"</h2> | ||
| <Label attr:class="inline-flex gap-2"> | ||
| <Control /> " Label with wrapped control" | ||
| </Label> | ||
|
|
||
| <h2>"Referencing control"</h2> | ||
| <Control attr:id="control" /> | ||
| <Label attr:r#for="control" attr:class="ml-2">"Label referencing control"</Label> | ||
| </div> | ||
| } | ||
| } | ||
|
|
||
| /// Demonstrates using Label with various form inputs | ||
| #[component] | ||
| pub fn WithInputs() -> impl IntoView { | ||
| view! { | ||
| <h1>Wrapping control</h1> | ||
| <Label> | ||
| <Control attr:class=control_class /> Label | ||
| </Label> | ||
| <div class="space-y-4"> | ||
| <Label attr:class="flex items-center gap-2"> | ||
| <span>"Name:"</span> | ||
| <input r#type="text" class="border p-1" /> | ||
| </Label> | ||
|
|
||
| <h1>Referencing control</h1> | ||
| <Control attr:id="control" attr:class=control_class /> | ||
| <Label attr:r#for="control">Label</Label> | ||
| <Label attr:class="flex items-center gap-2"> | ||
| <span>"Quantity:"</span> | ||
| <input r#type="number" class="border p-1" /> | ||
| </Label> | ||
| </div> | ||
| } | ||
| } | ||
|
|
||
| /// Shows label with custom event handling | ||
| #[component] | ||
| pub fn WithInputNumber() -> impl IntoView { | ||
| pub fn WithEvents() -> impl IntoView { | ||
| let (count, set_count) = signal(0); | ||
|
|
||
| view! { | ||
| <Label> | ||
| <span>Name:</span> | ||
| <input type="number" /> | ||
| </Label> | ||
| <div class="space-y-4"> | ||
| <Label | ||
| attr:class="inline-block p-2 border" | ||
| on_mouse_down=move |_: ev::MouseEvent| set_count.update(|mut c| *c = *c + 1) | ||
| > | ||
| <span>"Click counter: "</span> | ||
| <span>{count}</span> | ||
| </Label> | ||
| </div> | ||
| } | ||
| } | ||
|
|
||
| /// Helper component for the control examples | ||
| #[component] | ||
| fn Control() -> impl IntoView { | ||
| view! { | ||
| <button on:click=move |_| window().alert_with_message("clicked").expect("Alert should be successful.")> | ||
| Control | ||
| <button | ||
| class="inline-flex border border-solid border-gray-200 p-2 hover:bg-red-100" | ||
| on:click=move |_| window().alert_with_message("clicked").expect("Alert should work") | ||
| > | ||
| "Control" | ||
| </button> | ||
| } | ||
| } | ||
|
|
||
| #[derive(TwClass, Default, Clone, Copy)] | ||
| #[tw( | ||
| class = "inline-block align-middle cursor-default border-[1px] border-solid border-[gainsboro] p-[10px]" | ||
| )] | ||
| struct RootClass {} | ||
|
|
||
| #[derive(TwClass, Default, Clone, Copy)] | ||
| #[tw( | ||
| class = "inline-flex border-[1px] border-solid border-[gainsboro] p-[10px] align-middle m-[0px_10px] hover:bg-[red]" | ||
| )] | ||
| struct ControlClass {} | ||
| } |