-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* dropdown with icon * dropdown demo page * on_select instaed of on_click * code review fixes
- Loading branch information
1 parent
2f96fec
commit 7685e99
Showing
15 changed files
with
628 additions
and
37 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,182 @@ | ||
| # Dropdown | ||
|
|
||
| ```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(),), | ||
| _ => () | ||
| } | ||
| }; | ||
|
|
||
|
|
||
| view! { | ||
| <Space> | ||
| <Dropdown on_select trigger_type=DropdownTriggerType::Hover> | ||
| <DropdownTrigger slot> | ||
| <Button>"Hover"</Button> | ||
| </DropdownTrigger> | ||
| <DropdownItem key="facebook" icon=icondata::AiFacebookOutlined label="Facebook"></DropdownItem> | ||
| <DropdownItem key="twitter" disabled=true icon=icondata::AiTwitterOutlined label="Twitter"></DropdownItem> | ||
| </Dropdown> | ||
|
|
||
| <Dropdown on_select> | ||
| <DropdownTrigger slot> | ||
| <Button>"Click"</Button> | ||
| </DropdownTrigger> | ||
| <DropdownItem key="facebook" icon=icondata::AiFacebookOutlined label="Facebook"></DropdownItem> | ||
| <DropdownItem key="twitter" icon=icondata::AiTwitterOutlined label="Twitter"></DropdownItem> | ||
| <DropdownItem key="no_icon" disabled=true label="Mastodon"></DropdownItem> | ||
| </Dropdown> | ||
| </Space> | ||
| } | ||
| ``` | ||
|
|
||
| ### Placement | ||
|
|
||
| ```rust demo | ||
| use leptos_meta::Style; | ||
|
|
||
| let on_select = move |key| println!("{}", key); | ||
|
|
||
| view! { | ||
| <Style> | ||
| ".demo-dropdown .thaw-button { width: 100% } .demo-dropdown .thaw-dropdown-trigger { display: block }" | ||
| </Style> | ||
| <Grid x_gap=8 y_gap=8 cols=3 class="demo-dropdown"> | ||
| <GridItem> | ||
| <Dropdown on_select placement=DropdownPlacement::TopStart> | ||
| <DropdownTrigger slot> | ||
| <Button>"Top Start"</Button> | ||
| </DropdownTrigger> | ||
| "Content" | ||
| </Dropdown> | ||
| </GridItem> | ||
| <GridItem> | ||
| <Dropdown on_select placement=DropdownPlacement::Top> | ||
| <DropdownTrigger slot> | ||
| <Button>"Top"</Button> | ||
| </DropdownTrigger> | ||
| "Content" | ||
| </Dropdown> | ||
| </GridItem> | ||
| <GridItem> | ||
| <Dropdown on_select placement=DropdownPlacement::TopEnd> | ||
| <DropdownTrigger slot> | ||
| <Button>"Top End"</Button> | ||
| </DropdownTrigger> | ||
| "Content" | ||
| </Dropdown> | ||
| </GridItem> | ||
| <GridItem> | ||
| <Dropdown on_select placement=DropdownPlacement::LeftStart> | ||
| <DropdownTrigger slot> | ||
| <Button>"Left Start"</Button> | ||
| </DropdownTrigger> | ||
| "Content" | ||
| </Dropdown> | ||
| </GridItem> | ||
| <GridItem offset=1> | ||
| <Dropdown on_select placement=DropdownPlacement::RightStart> | ||
| <DropdownTrigger slot> | ||
| <Button>"Right Start"</Button> | ||
| </DropdownTrigger> | ||
| "Content" | ||
| </Dropdown> | ||
| </GridItem> | ||
| <GridItem> | ||
| <Dropdown on_select placement=DropdownPlacement::Left> | ||
| <DropdownTrigger slot> | ||
| <Button>"Left"</Button> | ||
| </DropdownTrigger> | ||
| "Content" | ||
| </Dropdown> | ||
| </GridItem> | ||
| <GridItem offset=1> | ||
| <Dropdown on_select placement=DropdownPlacement::Right> | ||
| <DropdownTrigger slot> | ||
| <Button>"Right"</Button> | ||
| </DropdownTrigger> | ||
| "Content" | ||
| </Dropdown> | ||
| </GridItem> | ||
| <GridItem> | ||
| <Dropdown on_select placement=DropdownPlacement::LeftEnd> | ||
| <DropdownTrigger slot> | ||
| <Button>"Left End"</Button> | ||
| </DropdownTrigger> | ||
| "Content" | ||
| </Dropdown> | ||
| </GridItem> | ||
| <GridItem offset=1> | ||
| <Dropdown on_select placement=DropdownPlacement::RightEnd> | ||
| <DropdownTrigger slot> | ||
| <Button>"Right End"</Button> | ||
| </DropdownTrigger> | ||
| "Content" | ||
| </Dropdown> | ||
| </GridItem> | ||
| <GridItem> | ||
| <Dropdown on_select placement=DropdownPlacement::BottomStart> | ||
| <DropdownTrigger slot> | ||
| <Button>"Bottom Start"</Button> | ||
| </DropdownTrigger> | ||
| "Content" | ||
| </Dropdown> | ||
| </GridItem> | ||
| <GridItem> | ||
| <Dropdown on_select placement=DropdownPlacement::Bottom> | ||
| <DropdownTrigger slot> | ||
| <Button>"Bottom"</Button> | ||
| </DropdownTrigger> | ||
| "Content" | ||
| </Dropdown> | ||
| </GridItem> | ||
| <GridItem> | ||
| <Dropdown on_select placement=DropdownPlacement::BottomEnd> | ||
| <DropdownTrigger slot> | ||
| <Button>"Bottom End"</Button> | ||
| </DropdownTrigger> | ||
| "Content" | ||
| </Dropdown> | ||
| </GridItem> | ||
| </Grid> | ||
| } | ||
| ``` | ||
|
|
||
| ### Dropdown Props | ||
|
|
||
| | Name | Type | Default | Description | | ||
| | ------------ | ----------------------------------- | ---------------------------- | ------------------------------------------- | | ||
| | class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the dropdown element. | | ||
| | on_select | `Callback<String>` | | Called when item is selected. | | ||
| | trigger_type | `DropdownTriggerType` | `DropdownTriggerType::Click` | Action that displays the dropdown. | | ||
| | placement | `DropdownPlacement` | `DropdownPlacement::Bottom` | Dropdown placement. | | ||
| | children | `Children` | | The content inside dropdown. | | ||
|
|
||
| ### DropdownItem Props | ||
|
|
||
| | Name | Type | Default | Description | | ||
| | -------- | -------------------------------------------- | -------------------- | ------------------------------------------------ | | ||
| | class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the dropdown item element. | | ||
| | key | `MaybeSignal<String>` | `Default::default()` | The key of the dropdown item. | | ||
| | label | `MaybeSignal<String>` | `Default::default()` | The label of the dropdown item. | | ||
| | icon | `OptionalMaybeSignal<icondata_core::Icon>` | `None` | The icon of the dropdown item. | | ||
| | disabled | `MaybeSignal<bool>` | `false` | Whether the dropdown item is disabled. | | ||
|
|
||
|
|
||
| ### Dropdown Slots | ||
|
|
||
| | Name | Default | Description | | ||
| | --------------- | ------- | ------------------------------------------------ | | ||
| | DropdownTrigger | `None` | The element or component that triggers dropdown. | | ||
|
|
||
| ### DropdownTriger Props | ||
|
|
||
| | Name | Type | Default | Description | | ||
| | ------------ | ----------------------------------- | ---------------------------- | -------------------------------------------------- | | ||
| | class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the dropdown trigger element. | | ||
| | children | `Children` | | The content inside dropdown trigger. | | ||
|
|
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 |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| .thaw-dropdown-item{ | ||
| padding: 6px 5px; | ||
| border-radius: 2px; | ||
| cursor: pointer; | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .thaw-dropdown-item:hover:not(.thaw-dropdown-item--disabled) { | ||
| background-color: var(--thaw-background-color-hover); | ||
| } | ||
|
|
||
| .thaw-dropdown-item.thaw-dropdown-item--disabled { | ||
| color: var(--thaw-font-color-disabled); | ||
| cursor: not-allowed; | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| .thaw-dropdown { | ||
| position: relative; | ||
| padding: 5px; | ||
| background-color: var(--thaw-background-color); | ||
| color: var(--thaw-font-color); | ||
| border-radius: 3px; | ||
| transform-origin: inherit; | ||
| } | ||
|
|
||
| [data-thaw-placement="top-start"] > .thaw-dropdown, | ||
| [data-thaw-placement="top-end"] > .thaw-dropdown, | ||
| [data-thaw-placement="top"] > .thaw-dropdown { | ||
| margin-bottom: 4px; | ||
| box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), | ||
| 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); | ||
| } | ||
|
|
||
| [data-thaw-placement="bottom-start"] > .thaw-dropdown, | ||
| [data-thaw-placement="bottom-end"] > .thaw-dropdown, | ||
| [data-thaw-placement="bottom"] > .thaw-dropdown { | ||
| margin-top: 4px; | ||
| box-shadow: 0 -3px 6px -4px rgba(0, 0, 0, 0.12), | ||
| 0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -9px 28px 8px rgba(0, 0, 0, 0.05); | ||
| } | ||
|
|
||
| [data-thaw-placement="left-start"] > .thaw-dropdown, | ||
| [data-thaw-placement="left-end"] > .thaw-dropdown, | ||
| [data-thaw-placement="left"] > .thaw-dropdown { | ||
| margin-right: 4px; | ||
| box-shadow: 3px 0 6px -4px rgba(0, 0, 0, 0.12), | ||
| 6px 0 16px 0 rgba(0, 0, 0, 0.08), 9px 0 28px 8px rgba(0, 0, 0, 0.05); | ||
| } | ||
|
|
||
| [data-thaw-placement="right-start"] > .thaw-dropdown, | ||
| [data-thaw-placement="right-end"] > .thaw-dropdown, | ||
| [data-thaw-placement="right"] > .thaw-dropdown { | ||
| margin-left: 4px; | ||
| box-shadow: -3px 0 6px -4px rgba(0, 0, 0, 0.12), | ||
| -6px 0 16px 0 rgba(0, 0, 0, 0.08), -9px 0 28px 8px rgba(0, 0, 0, 0.05); | ||
| } | ||
|
|
||
| .thaw-dropdown.dropdown-transition-enter-from, | ||
| .thaw-dropdown.dropdown-transition-leave-to { | ||
| opacity: 0; | ||
| transform: scale(0.85); | ||
| } | ||
|
|
||
| .thaw-dropdown.dropdown-transition-enter-to, | ||
| .thaw-dropdown.dropdown-transition-leave-from { | ||
| transform: scale(1); | ||
| opacity: 1; | ||
| } | ||
|
|
||
| .thaw-dropdown.dropdown-transition-enter-active { | ||
| transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), | ||
| background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), | ||
| color 0.3s cubic-bezier(0.4, 0, 0.2, 1), | ||
| opacity 0.15s cubic-bezier(0, 0, 0.2, 1), | ||
| transform 0.15s cubic-bezier(0, 0, 0.2, 1); | ||
| } | ||
|
|
||
| .thaw-dropdown.dropdown-transition-leave-active { | ||
| transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), | ||
| background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), | ||
| color 0.3s cubic-bezier(0.4, 0, 0.2, 1), | ||
| opacity 0.15s cubic-bezier(0.4, 0, 1, 1), | ||
| transform 0.15s cubic-bezier(0.4, 0, 1, 1); | ||
| } |
Oops, something went wrong.