mirror of
https://github.com/adoyle0/thaw.git
synced 2025-03-12 21:49:49 -04:00
feat: Drawer content scroll
This commit is contained in:
parent
51a509cb5e
commit
b9c6b1ce1e
3 changed files with 21 additions and 3 deletions
|
@ -39,6 +39,19 @@ view! {
|
|||
}
|
||||
```
|
||||
|
||||
### Scroll content
|
||||
|
||||
```rust demo
|
||||
let show = create_rw_signal(false);
|
||||
|
||||
view! {
|
||||
<Button on_click=move |_| show.set(true)>"Open"</Button>
|
||||
<Drawer show width="160px" title="Scroll content">
|
||||
r#"This being said, the world is moving in the direction opposite to Clarke's predictions. In 2001: A Space Odyssey, in the year of 2001, which has already passed, human beings have built magnificent cities in space, and established permanent colonies on the moon, and huge nuclear-powered spacecraft have sailed to Saturn. However, today, in 2018, the walk on the moon has become a distant memory.And the farthest reach of our manned space flights is just as long as the two-hour mileage of a high-speed train passing through my city. At the same time, information technology is developing at an unimaginable speed. With the entire world covered by the Internet, people have gradually lost their interest in space, as they find themselves increasingly comfortable in the space created by IT. Instead of an exploration of the real space, which is full of real difficulties, people now just prefer to experience virtual space through VR. Just like someone said, "You promised me an ocean of stars, but you actually gave me Facebook.""#
|
||||
</Drawer>
|
||||
}
|
||||
```
|
||||
|
||||
### Drawer Props
|
||||
|
||||
| Name | Type | Default | Desciption |
|
||||
|
|
|
@ -37,7 +37,8 @@
|
|||
|
||||
.thaw-drawer > .thaw-card > .thaw-card__content {
|
||||
flex: 1;
|
||||
padding: 20px 28px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.thaw-drawer--placement-top {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
use crate::Card;
|
||||
use crate::{Card, Scrollbar};
|
||||
use leptos::*;
|
||||
use thaw_components::{CSSTransition, FocusTrap, Teleport};
|
||||
use thaw_utils::{class_list, mount_style, use_lock_html_scroll, Model, OptionalProp};
|
||||
|
@ -120,7 +120,11 @@ pub fn Drawer(
|
|||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<Card title>{children()}</Card>
|
||||
<Card title>
|
||||
<Scrollbar content_style="padding: 20px 28px;">
|
||||
{children()}
|
||||
</Scrollbar>
|
||||
</Card>
|
||||
</div>
|
||||
</CSSTransition>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Reference in a new issue