fix menu disabled, add toast actions to demo page (#220)

This commit is contained in:
kandrelczyk 2024-07-29 01:13:04 +00:00 committed by GitHub
parent f15f74168e
commit a9e524a1ec
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 26 additions and 24 deletions

View file

@ -1,17 +1,19 @@
# Menu # Menu
```rust demo ```rust demo
//let message = use_message();
//let on_select = move |key: String| {
// match key.as_str() {
// "facebook" => message.create( "Facebook".into(), MessageVariant::Success, Default::default(),),
// "twitter" => message.create( "Twitter".into(), MessageVariant::Warning, Default::default(),),
// _ => ()
// }
//};
let on_select = move |value| println!("{}", value); let on_select = |key: String| {
leptos::logging::warn!("{}", key);
let toaster = ToasterInjection::expect_context();
toaster.dispatch_toast(view! {
<Toast>
<ToastBody>
"key"
</ToastBody>
</Toast>
}.into_any(), Default::default());
};
view! { view! {
<Space> <Space>
@ -40,7 +42,7 @@ view! {
```rust demo ```rust demo
use leptos_meta::Style; use leptos_meta::Style;
let on_select = move |value| println!("{}", value); let on_select = move |value| leptos::logging::warn!("{}", value);
view! { view! {
<Style> <Style>
@ -52,7 +54,7 @@ view! {
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Top Start"</Button> <Button>"Top Start"</Button>
</MenuTrigger> </MenuTrigger>
"Content" <MenuItem value="content">"Content"</MenuItem>
</Menu> </Menu>
</GridItem> </GridItem>
<GridItem> <GridItem>
@ -60,7 +62,7 @@ view! {
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Top"</Button> <Button>"Top"</Button>
</MenuTrigger> </MenuTrigger>
"Content" <MenuItem value="content">"Content"</MenuItem>
</Menu> </Menu>
</GridItem> </GridItem>
<GridItem> <GridItem>
@ -68,7 +70,7 @@ view! {
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Top End"</Button> <Button>"Top End"</Button>
</MenuTrigger> </MenuTrigger>
"Content" <MenuItem value="content">"Content"</MenuItem>
</Menu> </Menu>
</GridItem> </GridItem>
<GridItem> <GridItem>
@ -76,7 +78,7 @@ view! {
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Left Start"</Button> <Button>"Left Start"</Button>
</MenuTrigger> </MenuTrigger>
"Content" <MenuItem value="content">"Content"</MenuItem>
</Menu> </Menu>
</GridItem> </GridItem>
<GridItem offset=1> <GridItem offset=1>
@ -84,7 +86,7 @@ view! {
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Right Start"</Button> <Button>"Right Start"</Button>
</MenuTrigger> </MenuTrigger>
"Content" <MenuItem value="content">"Content"</MenuItem>
</Menu> </Menu>
</GridItem> </GridItem>
<GridItem> <GridItem>
@ -92,7 +94,7 @@ view! {
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Left"</Button> <Button>"Left"</Button>
</MenuTrigger> </MenuTrigger>
"Content" <MenuItem value="content">"Content"</MenuItem>
</Menu> </Menu>
</GridItem> </GridItem>
<GridItem offset=1> <GridItem offset=1>
@ -100,7 +102,7 @@ view! {
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Right"</Button> <Button>"Right"</Button>
</MenuTrigger> </MenuTrigger>
"Content" <MenuItem value="content">"Content"</MenuItem>
</Menu> </Menu>
</GridItem> </GridItem>
<GridItem> <GridItem>
@ -108,7 +110,7 @@ view! {
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Left End"</Button> <Button>"Left End"</Button>
</MenuTrigger> </MenuTrigger>
"Content" <MenuItem value="content">"Content"</MenuItem>
</Menu> </Menu>
</GridItem> </GridItem>
<GridItem offset=1> <GridItem offset=1>
@ -116,7 +118,7 @@ view! {
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Right End"</Button> <Button>"Right End"</Button>
</MenuTrigger> </MenuTrigger>
"Content" <MenuItem value="content">"Content"</MenuItem>
</Menu> </Menu>
</GridItem> </GridItem>
<GridItem> <GridItem>
@ -124,7 +126,7 @@ view! {
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Bottom Start"</Button> <Button>"Bottom Start"</Button>
</MenuTrigger> </MenuTrigger>
"Content" <MenuItem value="content">"Content"</MenuItem>
</Menu> </Menu>
</GridItem> </GridItem>
<GridItem> <GridItem>
@ -132,7 +134,7 @@ view! {
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Bottom"</Button> <Button>"Bottom"</Button>
</MenuTrigger> </MenuTrigger>
"Content" <MenuItem value="content">"Content"</MenuItem>
</Menu> </Menu>
</GridItem> </GridItem>
<GridItem> <GridItem>
@ -140,7 +142,7 @@ view! {
<MenuTrigger slot> <MenuTrigger slot>
<Button>"Bottom End"</Button> <Button>"Bottom End"</Button>
</MenuTrigger> </MenuTrigger>
"Content" <MenuItem value="content">"Content"</MenuItem>
</Menu> </Menu>
</GridItem> </GridItem>
</Grid> </Grid>

View file

@ -6,11 +6,11 @@
align-items: center; align-items: center;
} }
.thaw-menu-item:hover:not(.thaw-dropdown-item--disabled) { .thaw-menu-item:hover:not(.thaw-menu-item--disabled) {
background-color: var(--colorNeutralBackground1Hover); background-color: var(--colorNeutralBackground1Hover);
} }
.thaw-menu-item.thaw-dropdown-item--disabled { .thaw-menu-item.thaw-menu-item--disabled {
color: var(--colorNeutralForegroundDisabled); color: var(--colorNeutralForegroundDisabled);
cursor: not-allowed; cursor: not-allowed;
} }