From 5c86e996f9a315c3bee1a8d4999f3fc3d2ec5b2b Mon Sep 17 00:00:00 2001
From: luoxiaozero <48741584+luoxiaozero@users.noreply.github.com>
Date: Mon, 26 Feb 2024 21:56:29 +0800
Subject: [PATCH] docs: Modal Binder CSSTransition (#122)

---
 demo_markdown/docs/modal/mod.md           | 13 +++++++-----
 thaw/src/components/binder/mod.rs         | 25 +++++++++++++++++++++++
 thaw/src/components/css_transition/mod.rs |  3 +++
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/demo_markdown/docs/modal/mod.md b/demo_markdown/docs/modal/mod.md
index 4f7434b..ad9fcf6 100644
--- a/demo_markdown/docs/modal/mod.md
+++ b/demo_markdown/docs/modal/mod.md
@@ -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
 
diff --git a/thaw/src/components/binder/mod.rs b/thaw/src/components/binder/mod.rs
index e6809e8..020f15c 100644
--- a/thaw/src/components/binder/mod.rs
+++ b/thaw/src/components/binder/mod.rs
@@ -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 {
diff --git a/thaw/src/components/css_transition/mod.rs b/thaw/src/components/css_transition/mod.rs
index 508cd77..3951ea4 100644
--- a/thaw/src/components/css_transition/mod.rs
+++ b/thaw/src/components/css_transition/mod.rs
@@ -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>,