adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-23 06:19:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs: Modal Binder CSSTransition (#122)

Browse source
This commit is contained in:
luoxiaozero 2024-02-26 21:56:29 +08:00 • committed by GitHub
parent f035555626
commit 5c86e996f9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 36 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
demo_markdown/docs/modal/mod.md
View file

@ -13,11 +13,14 @@ view! {
### Modal Props
| Name | Type | Default | Description |
| -------- | --------------------- | -------------------- | ---------------------- |
| show | `Model<bool>` | | Whether to show modal. |
| title | `MaybeSignal<String>` | `Default::default()` | Modal title. |
| children | `Children` | | Modal's content. |
| Name | Type | Default | Description |
| -------------- | --------------------- | -------------------- | ------------------------------------------- |
| show | `Model<bool>` | | Whether to show modal. |
| title | `MaybeSignal<String>` | `Default::default()` | Modal title. |
| width | `MaybeSignal<String>` | `600px` | Modal width. |
| z_index | `MaybeSignal<i16>` | `2000` | z-index of the modal. |
| mask_closeable | `MaybeSignal<bool>` | `true` | Whether to emit hide event when click mask. |
| children | `Children` | | Modal's content. |
### Modal Slots

25
thaw/src/components/binder/mod.rs
View file

@ -26,15 +26,40 @@ pub struct Follower {
#[derive(Clone)]
pub enum FollowerWidth {
/// The popup width is the same as the target DOM width.
Target,
/// Customize the popup width.
Px(u32),
}
impl Copy for FollowerWidth {}
/// # Tracking popup
///
/// ```rust
/// use crate::components::{Binder, Follower, FollowerPlacement};
/// use leptos::*;
///
/// let div_ref= NodeRef::new();
/// let show = RwSignal::new(false);
///
/// view! {
/// <Binder target_ref=div_ref>
/// <div ref=div_ref>
/// "content"
/// </div>
/// <Follower slot show placement=FollowerPlacement::BottomStart>
/// "content2"
/// </Follower>
/// </Binder>
/// }
/// ```
#[component]
pub fn Binder<El: ElementDescriptor + Clone + 'static>(
/// Used to track DOM locations
#[prop(into)] target_ref: NodeRef<El>,
/// Content for pop-up display
follower: Follower,
children: Children,
) -> impl IntoView {

3
thaw/src/components/css_transition/mod.rs
View file

@ -1,6 +1,9 @@
use leptos::{html::ElementDescriptor, *};
use std::ops::Deref;
/// # CSS Transition
///
/// Reference to https://vuejs.org/guide/built-ins/transition.html
#[component]
pub fn CSSTransition<T, CF, IV>(
node_ref: NodeRef<T>,