From fe5ac5d7fbd9a8a2bf7298d8395f96405a4aa937 Mon Sep 17 00:00:00 2001
From: sologeek <liyoushan3@gmail.com>
Date: Tue, 9 Jan 2024 17:02:53 +0800
Subject: [PATCH] =?UTF-8?q?chore(ribir):=20=F0=9F=A4=96=20docs=20upgrade?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/en/builtin_widget/_category_.json        |   8 +
 .../builtin_widget/declare_builtin_fields.md  | 220 ++++++++++++++++++
 docs/en/get_started/quick_start.md            |   6 +-
 docs/en/get_started/widget_in_depth.md        |   7 +
 .../practice_todos_app/develop_a_todos_app.md |   2 +-
 .../improving_styles_and_animations.md        |   8 +-
 .../zh/Introduction.md                        |   4 +
 docs/zh/builtin_widget/_category_.json        |   8 +
 .../builtin_widget/declare_builtin_fields.md  | 220 ++++++++++++++++++
 .../zh/get_started/creating_an_application.md |   0
 .../zh/get_started/quick_start.md             |  12 +-
 docs/zh/get_started/widget_in_depth.md        |   7 +
 .../practice_todos_app/develop_a_todos_app.md |   4 +-
 .../improving_styles_and_animations.md        |   7 +
 ...17\345\222\214\345\212\250\347\224\273.md" |   1 -
 15 files changed, 500 insertions(+), 14 deletions(-)
 create mode 100644 docs/en/builtin_widget/_category_.json
 create mode 100644 docs/en/builtin_widget/declare_builtin_fields.md
 create mode 100644 docs/en/get_started/widget_in_depth.md
 rename "docs/zh/\347\256\200\344\273\213.md" => docs/zh/Introduction.md (99%)
 create mode 100644 docs/zh/builtin_widget/_category_.json
 create mode 100644 docs/zh/builtin_widget/declare_builtin_fields.md
 rename "docs/zh/\345\277\253\351\200\237\344\270\212\346\211\213/\345\210\233\345\273\272\344\270\200\344\270\252\345\272\224\347\224\250.md" => docs/zh/get_started/creating_an_application.md (100%)
 rename "docs/zh/\345\277\253\351\200\237\344\270\212\346\211\213/\345\277\253\351\200\237\345\205\245\351\227\250.md" => docs/zh/get_started/quick_start.md (97%)
 create mode 100644 docs/zh/get_started/widget_in_depth.md
 rename "docs/zh/\345\256\236\350\267\265\357\274\232Todos \345\272\224\347\224\250/\345\256\214\346\225\264\345\274\200\344\270\200\344\270\252Todos\345\272\224\347\224\250.md" => docs/zh/practice_todos_app/develop_a_todos_app.md (99%)
 create mode 100644 docs/zh/practice_todos_app/improving_styles_and_animations.md
 delete mode 100644 "docs/zh/\345\256\236\350\267\265\357\274\232Todos \345\272\224\347\224\250/\345\256\214\345\226\204\346\240\267\345\274\217\345\222\214\345\212\250\347\224\273.md"

diff --git a/docs/en/builtin_widget/_category_.json b/docs/en/builtin_widget/_category_.json
new file mode 100644
index 000000000..3642e4adb
--- /dev/null
+++ b/docs/en/builtin_widget/_category_.json
@@ -0,0 +1,8 @@
+{
+  "label": "Built-in Widget",
+  "position": 4,
+  "link": {
+    "type": "generated-index",
+    "description": "Built-in Widget"
+  }
+}
\ No newline at end of file
diff --git a/docs/en/builtin_widget/declare_builtin_fields.md b/docs/en/builtin_widget/declare_builtin_fields.md
new file mode 100644
index 000000000..e61991f69
--- /dev/null
+++ b/docs/en/builtin_widget/declare_builtin_fields.md
@@ -0,0 +1,220 @@
+# Full builtin fields list 
+
+- on_pointer_down : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler for the pointer down event in bubble phase.
+- on_pointer_down_capture : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler for the pointer down event in capture phase.
+- on_pointer_up : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler for the pointer up event in bubble phase.
+- on_pointer_up_capture : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler for the pointer up event in capture phase.
+- on_pointer_move : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler for the pointer move event in bubble phase.
+- on_pointer_move_capture : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler for the pointer move event in capture phase.
+- on_pointer_cancel : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler to process pointer cancel event.
+- on_pointer_enter : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler when pointer enter this widget.
+- on_pointer_leave : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler when pointer leave this widget.
+- on_tap : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler for the pointer tap event in bubble phase.
+- on_tap_capture : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler for the pointer tap event in capture phase.
+- on_double_tap : [`Box < dyn for < 'r > FnMut(& 'r mut PointerEvent) >`] 
+ 	 - specify the event handler for the pointer double tap event in bubble phase.
+- on_double_tap_capture : [`Box < dyn for < 'r > FnMut(& 'r mut PointerEvent) >`] 
+ 	 - specify the event handler for the pointer double tap event in capture phase.
+- on_triple_tap : [`Box < dyn for < 'r > FnMut(& 'r mut PointerEvent) >`] 
+ 	 - specify the event handler for the pointer triple tap event in bubble phase.
+- on_triple_tap_capture : [`Box < dyn for < 'r > FnMut(& 'r mut PointerEvent) >`] 
+ 	 - specify the event handler for the pointer triple tap event in capture phase.
+- on_x_times_tap : [`(usize, Box < dyn for < 'r > FnMut(& 'r mut PointerEvent) >)`] 
+ 	 - specify the event handler for the pointer `x` times tap event in bubble phase.
+- on_x_times_tap_capture : [`(usize, Box < dyn for < 'r > FnMut(& 'r mut PointerEvent) >)`] 
+ 	 - specify the event handler for the pointer `x` times tap event in capture phase.
+- auto_focus : [`bool`] 
+ 	 - Indicates whether the widget should automatically get focus when the window loads.
+- tab_index : [`i16`] 
+ 	 - indicates that widget can be focused, and where it participates in sequential keyboard navigation (usually with the Tab key, hence the name.
+- on_focus : [`impl FnMut(& mut FocusEvent)`] 
+ 	 - specify the event handler to process focus event.
+- on_blur : [`impl FnMut(& mut FocusEvent)`] 
+ 	 - specify the event handler to process blur event.
+- on_focus_in : [`impl FnMut(& mut FocusEvent)`] 
+ 	 - specify the event handler to process focusin event in bubble phase.
+- on_focus_in_capture : [`impl FnMut(& mut FocusEvent)`] 
+ 	 - specify the event handler to process focusin event in capture phase.
+- on_focus_out : [`impl FnMut(& mut FocusEvent)`] 
+ 	 - specify the event handler to process focusout event in bubble phase.
+- on_focus_out_capture : [`impl FnMut(& mut FocusEvent)`] 
+ 	 - specify the event handler to process focusout event in capture phase.
+- on_key_down_capture : [`impl FnMut(& mut KeyboardEvent)`] 
+ 	 - specify the event handler when keyboard press down in capture phase.
+- on_key_down : [`impl FnMut(& mut KeyboardEvent)`] 
+ 	 - specify the event handler when keyboard press down in bubble phase.
+- on_key_up : [`impl FnMut(& mut KeyboardEvent)`] 
+ 	 - specify the event handler when a key is released in bubble phase.
+- on_key_up_capture : [`impl FnMut(& mut KeyboardEvent)`] 
+ 	 - specify the event handler when a key is released in capture phase.
+- on_chars : [`impl FnMut(& mut CharsEvent)`] 
+ 	 - specify the event handler when received unicode characters in bubble phase.
+- on_chars_capture : [`impl FnMut(& mut CharsEvent)`] 
+ 	 - specify the event handler when received unicode characters in capture phase.
+- on_ime_pre_edit : [`impl FnMut(& mut ImePreEditEvent)`] 
+ 	 - specify the event handler when received unicode characters in ime pre edit bubble phase.
+- on_ime_pre_edit_capture : [`impl FnMut(& mut ImePreEditEvent)`] 
+ 	 - specify the event handler when received unicode characters in ime pre edit capture phase.
+- on_wheel : [`impl FnMut(& mut WheelEvent)`] 
+ 	 - specify the event handler when user moving a mouse wheel or similar input device in bubble phase.
+- on_wheel_capture : [`impl FnMut(& mut WheelEvent)`] 
+ 	 - specify the event handler when user moving a mouse wheel or similar input device in capture phase.
+- box_fit : [`BoxFit`] 
+ 	 -  set how its child should be resized to its box.
+- background : [`Brush`] 
+ 	 - specify the background of the widget box.
+- border : [`Border`] 
+ 	 - specify the border of the widget which draw above the background
+- border_radius : [`Radius`] 
+ 	 - specify how rounded the corners have of the widget.
+- padding : [`EdgeInsets`] 
+ 	 - set the padding area on all four sides of a widget.
+- global_anchor : [`Anchor`] 
+ 	 - use to anchor child position, and the positioning used is relative to the window
+- cursor : [`CursorIcon`] 
+ 	 - assign cursor to the widget.
+- margin : [`impl EdgeInsets`] 
+ 	 - expand space around widget wrapped.
+- scrollable : [`Scrollable`] 
+ 	 - enumerate to describe which direction allow widget to scroll.
+- scroll_pos : [`Point`] 
+ 	 - specify the scroll position of this widget, also means that the host widget scrollable.
+- transform : [`Transform`] 
+ 	 - A widget that applies a transformation its child. Doesn't change size, only apply painting
+- h_align : [`HAlign`] 
+ 	 - describe how widget align to its box in x-axis.
+- v_align : [`VAlign`] 
+ 	 - describe how widget align to its box in y-axis.
+- anchor : [`Anchor`] 
+ 	 - use to anchor child position, and the positioning used is relative to the parent
+- visible : [`bool`] 
+ 	 - Whether to show or hide a child
+- opacity : [`f32`] 
+ 	 - Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.
+- on_mounted : [`Box < dyn for < 'r > FnMut(LifeCycleCtx < 'r >, MountedType) >`] 
+ 	 - action perform after widget be added to the widget tree.
+- on_disposed : [`Box < dyn for < 'r > FnMut(LifeCycleCtx < 'r >, DisposedType) >`] 
+ 	 - action perform after widget remove from widget tree.
+- on_performed_layout : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler for the pointer down event in bubble phase.
+- lifecycle_stream : [`LifecycleSubject`] 
+ 	 - return the stream of lifecycle.
+- delay_drop_until : [`bool`] 
+ 	 - The widget delay the drop of its child until the field delay_drop_until is false, but not affect its dispose event emit time. It's useful to ensure the disappear-animate display fully.
+
+ - `fn lazy_host_id(& self) -> LazyWidgetId`
+ 	- Return the LazyWidgetId of the host widget, through which you can access the WidgetId after building.
+
+ - `fn lazy_id(& self) -> LazyWidgetId`
+ 	- Return the LazyWidgetId of the external widget (wrapped with the built-in host), through which you can access the WidgetId after building.
+
+ - `fn double_tap_stream(& self,) -> FilterMapOp < MutRefItemSubject < 'static,
+PointerEvent, () >, impl FnMut(& mut PointerEvent) -> Option < & mut
+PointerEvent >, & mut PointerEvent, >`
+ 	-  Return an observable stream of double tap event in bubble phase.
+
+ - `fn triple_tap_stream(& self,) -> FilterMapOp < MutRefItemSubject < 'static,
+PointerEvent, () >, impl FnMut(& mut PointerEvent) -> Option < & mut
+PointerEvent >, & mut PointerEvent, >`
+ 	- Return an observable stream of tripe tap event in bubble phase.
+
+ - `fn x_times_tap_stream(& self, x : usize, dur : Duration,) -> FilterMapOp <
+MutRefItemSubject < 'static, PointerEvent, () >, impl
+FnMut(& mut PointerEvent) -> Option < & mut PointerEvent >, & mut
+PointerEvent, >`
+ 	-  Return an observable stream of x-tap event that user tapped 'x' times in the specify duration `dur` in bubble phase.
+
+ - `fn tap_capture_stream(& self) -> MutRefItemSubject < 'static, PointerEvent, ()
+>`
+ 	- return an observable stream of the pointer tap event in capture phase.
+
+ - `fn double_tap_capture_stream(& self,) -> FilterMapOp < MutRefItemSubject <
+'static, PointerEvent, () >, impl FnMut(& mut PointerEvent) -> Option < & mut
+PointerEvent >, & mut PointerEvent, >`
+ 	- return an observable stream of double tap event in capture phase.
+
+ - `fn triple_tap_capture_stream(& self,) -> FilterMapOp < MutRefItemSubject <
+'static, PointerEvent, () >, impl FnMut(& mut PointerEvent) -> Option < & mut
+PointerEvent >, & mut PointerEvent, >`
+ 	- Return an observable stream of tripe tap event in capture phase.
+
+ - `fn x_times_tap_capture_stream(& self, x : usize, dur : Duration,) ->
+FilterMapOp < MutRefItemSubject < 'static, PointerEvent, () >, impl
+FnMut(& mut PointerEvent) -> Option < & mut PointerEvent >, & mut
+PointerEvent, >`
+ 	-  Return an observable stream of x-tap event that user tapped 'x' times in the specify duration `dur` in capture phase.
+
+ - `fn pointer_stream(& self) -> PointerSubject`
+ 	- return the stream include all pointer events.
+
+ - `fn request_focus(& self)`
+ 	- request the this node to be focused.
+
+ - `fn unfocus(& self)`
+ 	- removes the focus from this node.
+
+ - `fn focus_stream(& self) -> MutRefItemSubject < 'static, FocusEvent, () >`
+ 	- Return the stream include all focus and blur events.
+
+ - `fn focus_bubble_stream(& self) -> MutRefItemSubject < 'static, FocusEvent, ()
+>`
+ 	- Return the stream include all focus in/out related events.
+
+ - `fn has_focus(& self) -> bool`
+ 	- return if the widget has focus.
+
+ - `fn keyboard_stream(& self) -> KeyboardSubject`
+ 	- return the stream include all keyboard events.
+
+ - `fn chars_stream(& self) -> CharsSubject`
+ 	- return the stream include all chars events.
+
+ - `fn wheel_stream(& self) -> MutRefItemSubject < 'static, WheelEvent, () >`
+ 	- return the stream include all wheel events.
+
+ - `fn mouse_hover(& self) -> bool`
+ 	- return if the pointer is hover on the widget
+
+ - `fn pointer_pressed(& self) -> bool`
+ 	- return if the widget is pressed
+
+ - `fn layout_rect(& self) -> Rect`
+ 	- return the rect after layout of the widget
+
+ - `fn layout_pos(& self) -> Point`
+ 	- return the position relative to parent after layout of the widget
+
+ - `fn layout_size(& self) -> Size`
+ 	- return the size after layout of the widget
+
+ - `fn layout_left(& self) -> f32`
+ 	- return the left position relative parent after layout of the widget
+
+ - `fn layout_top(& self) -> f32`
+ 	- return the top position relative parent after layout of the widget
+
+ - `fn layout_width(& self) -> f32`
+ 	- return the width after layout of the widget
+
+ - `fn layout_height(& self) -> f32`
+ 	- return the height after layout of the widget
+
+ - `fn scroll_view_size(& self) -> Size`
+ 	- return the scroll view of the scrollable widget
+
+ - `fn scroll_content_size(& self) -> Size`
+ 	- return the content widget size of the scrollable widget.
+
+ - `fn jump_to(& mut self, left_top : Point)`
+ 	- jump to the special position.
diff --git a/docs/en/get_started/quick_start.md b/docs/en/get_started/quick_start.md
index 1c44ae707..3d08ec7a4 100644
--- a/docs/en/get_started/quick_start.md
+++ b/docs/en/get_started/quick_start.md
@@ -27,7 +27,7 @@ If you don't understand the above words very well, don't worry, because you don'
 - `Render` widget
 - `ComposeChild` widget
 
-This chapter will only introduce function widget and `Compose` widget. Because in most scenarios, these two widgets are enough to meet our needs. As advanced content, we will cover `Render` widgets and `ComposeChild` widgets in [Widget In-depth](./widget-in-depth.md).
+This chapter will only introduce function widget and `Compose` widget. Because in most scenarios, these two widgets are enough to meet our needs. As advanced content, we will cover `Render` widgets and `ComposeChild` widgets in [Widget In-depth](./widget_in_depth.md).
 
 ## Function widget
 
@@ -196,7 +196,7 @@ Do you notice the `rdl! { $row { ... } }`? It is the same as the structure liter
 >
 > In our example above, `Row` accepts any number and any type of widget, `Text` cannot accept any children, and `FilledButton` is a bit more complicated, it allows to accept a `Label` as its text and a `Svg` as the button icon.
 >
-> For how to constrain the child type of the widget, we will introduce it in [Widget In-depth](./widget-in-depth.md).
+> For how to constrain the child type of the widget, we will introduce it in [Widget In-depth](./widget_in_depth.md).
 
 ### Creating objects through expressions
 
@@ -616,7 +616,7 @@ fn main() {
 }
 ```
 
-Refer to [Built-in widget list](../../builtin_widget/declare_builtin_fields.md) for a list of all built-in fields and methods that can be used as extensions.
+Refer to [Built-in widget list](../builtin_widget/declare_builtin_fields.md) for a list of all built-in fields and methods that can be used as extensions.
 
 
 ## Map, Split and trace the original state
diff --git a/docs/en/get_started/widget_in_depth.md b/docs/en/get_started/widget_in_depth.md
new file mode 100644
index 000000000..1c0df609c
--- /dev/null
+++ b/docs/en/get_started/widget_in_depth.md
@@ -0,0 +1,7 @@
+---
+sidebar_position: 3
+---
+
+# Widget in depth
+
+> coming soon
diff --git a/docs/en/practice_todos_app/develop_a_todos_app.md b/docs/en/practice_todos_app/develop_a_todos_app.md
index b70c7d2cd..13e32f61d 100644
--- a/docs/en/practice_todos_app/develop_a_todos_app.md
+++ b/docs/en/practice_todos_app/develop_a_todos_app.md
@@ -239,7 +239,7 @@ Now, let's add the ability to enter data: We'll add an `Input` to the `Column`,
 }
 ```
 
-Fortunately, Ribir interacts seamlessly with Rust. Do you remember how we discussed declaring children through variables in the [Composing Widgets](../QuickStart/GettingStarted.md#Composing-Widgets) section?
+Fortunately, Ribir interacts seamlessly with Rust. Do you remember how we discussed declaring children through variables in the [Composing Widgets](../get_started/quick_start.md#composing-widgets) section?
 
 
 ```rust ignore
diff --git a/docs/en/practice_todos_app/improving_styles_and_animations.md b/docs/en/practice_todos_app/improving_styles_and_animations.md
index 12c3c0415..83cfe4ab1 100644
--- a/docs/en/practice_todos_app/improving_styles_and_animations.md
+++ b/docs/en/practice_todos_app/improving_styles_and_animations.md
@@ -1 +1,7 @@
-# Coming soon
\ No newline at end of file
+---
+sidebar_position: 2
+---
+
+# Improving styles and animations
+
+> coming soon
diff --git "a/docs/zh/\347\256\200\344\273\213.md" b/docs/zh/Introduction.md
similarity index 99%
rename from "docs/zh/\347\256\200\344\273\213.md"
rename to docs/zh/Introduction.md
index 8ef2282cc..52c02ac65 100644
--- "a/docs/zh/\347\256\200\344\273\213.md"
+++ b/docs/zh/Introduction.md
@@ -1,3 +1,7 @@
+---
+sidebar_position: 1
+---
+
 # 简介
 
 > 在本章中，我们会使用 Ribir 语法撰写一些简单例子。你只需要理解大意即可，不必深究。我们会在后面的章节中详细介绍。
diff --git a/docs/zh/builtin_widget/_category_.json b/docs/zh/builtin_widget/_category_.json
new file mode 100644
index 000000000..3642e4adb
--- /dev/null
+++ b/docs/zh/builtin_widget/_category_.json
@@ -0,0 +1,8 @@
+{
+  "label": "Built-in Widget",
+  "position": 4,
+  "link": {
+    "type": "generated-index",
+    "description": "Built-in Widget"
+  }
+}
\ No newline at end of file
diff --git a/docs/zh/builtin_widget/declare_builtin_fields.md b/docs/zh/builtin_widget/declare_builtin_fields.md
new file mode 100644
index 000000000..e61991f69
--- /dev/null
+++ b/docs/zh/builtin_widget/declare_builtin_fields.md
@@ -0,0 +1,220 @@
+# Full builtin fields list 
+
+- on_pointer_down : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler for the pointer down event in bubble phase.
+- on_pointer_down_capture : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler for the pointer down event in capture phase.
+- on_pointer_up : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler for the pointer up event in bubble phase.
+- on_pointer_up_capture : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler for the pointer up event in capture phase.
+- on_pointer_move : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler for the pointer move event in bubble phase.
+- on_pointer_move_capture : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler for the pointer move event in capture phase.
+- on_pointer_cancel : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler to process pointer cancel event.
+- on_pointer_enter : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler when pointer enter this widget.
+- on_pointer_leave : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler when pointer leave this widget.
+- on_tap : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler for the pointer tap event in bubble phase.
+- on_tap_capture : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler for the pointer tap event in capture phase.
+- on_double_tap : [`Box < dyn for < 'r > FnMut(& 'r mut PointerEvent) >`] 
+ 	 - specify the event handler for the pointer double tap event in bubble phase.
+- on_double_tap_capture : [`Box < dyn for < 'r > FnMut(& 'r mut PointerEvent) >`] 
+ 	 - specify the event handler for the pointer double tap event in capture phase.
+- on_triple_tap : [`Box < dyn for < 'r > FnMut(& 'r mut PointerEvent) >`] 
+ 	 - specify the event handler for the pointer triple tap event in bubble phase.
+- on_triple_tap_capture : [`Box < dyn for < 'r > FnMut(& 'r mut PointerEvent) >`] 
+ 	 - specify the event handler for the pointer triple tap event in capture phase.
+- on_x_times_tap : [`(usize, Box < dyn for < 'r > FnMut(& 'r mut PointerEvent) >)`] 
+ 	 - specify the event handler for the pointer `x` times tap event in bubble phase.
+- on_x_times_tap_capture : [`(usize, Box < dyn for < 'r > FnMut(& 'r mut PointerEvent) >)`] 
+ 	 - specify the event handler for the pointer `x` times tap event in capture phase.
+- auto_focus : [`bool`] 
+ 	 - Indicates whether the widget should automatically get focus when the window loads.
+- tab_index : [`i16`] 
+ 	 - indicates that widget can be focused, and where it participates in sequential keyboard navigation (usually with the Tab key, hence the name.
+- on_focus : [`impl FnMut(& mut FocusEvent)`] 
+ 	 - specify the event handler to process focus event.
+- on_blur : [`impl FnMut(& mut FocusEvent)`] 
+ 	 - specify the event handler to process blur event.
+- on_focus_in : [`impl FnMut(& mut FocusEvent)`] 
+ 	 - specify the event handler to process focusin event in bubble phase.
+- on_focus_in_capture : [`impl FnMut(& mut FocusEvent)`] 
+ 	 - specify the event handler to process focusin event in capture phase.
+- on_focus_out : [`impl FnMut(& mut FocusEvent)`] 
+ 	 - specify the event handler to process focusout event in bubble phase.
+- on_focus_out_capture : [`impl FnMut(& mut FocusEvent)`] 
+ 	 - specify the event handler to process focusout event in capture phase.
+- on_key_down_capture : [`impl FnMut(& mut KeyboardEvent)`] 
+ 	 - specify the event handler when keyboard press down in capture phase.
+- on_key_down : [`impl FnMut(& mut KeyboardEvent)`] 
+ 	 - specify the event handler when keyboard press down in bubble phase.
+- on_key_up : [`impl FnMut(& mut KeyboardEvent)`] 
+ 	 - specify the event handler when a key is released in bubble phase.
+- on_key_up_capture : [`impl FnMut(& mut KeyboardEvent)`] 
+ 	 - specify the event handler when a key is released in capture phase.
+- on_chars : [`impl FnMut(& mut CharsEvent)`] 
+ 	 - specify the event handler when received unicode characters in bubble phase.
+- on_chars_capture : [`impl FnMut(& mut CharsEvent)`] 
+ 	 - specify the event handler when received unicode characters in capture phase.
+- on_ime_pre_edit : [`impl FnMut(& mut ImePreEditEvent)`] 
+ 	 - specify the event handler when received unicode characters in ime pre edit bubble phase.
+- on_ime_pre_edit_capture : [`impl FnMut(& mut ImePreEditEvent)`] 
+ 	 - specify the event handler when received unicode characters in ime pre edit capture phase.
+- on_wheel : [`impl FnMut(& mut WheelEvent)`] 
+ 	 - specify the event handler when user moving a mouse wheel or similar input device in bubble phase.
+- on_wheel_capture : [`impl FnMut(& mut WheelEvent)`] 
+ 	 - specify the event handler when user moving a mouse wheel or similar input device in capture phase.
+- box_fit : [`BoxFit`] 
+ 	 -  set how its child should be resized to its box.
+- background : [`Brush`] 
+ 	 - specify the background of the widget box.
+- border : [`Border`] 
+ 	 - specify the border of the widget which draw above the background
+- border_radius : [`Radius`] 
+ 	 - specify how rounded the corners have of the widget.
+- padding : [`EdgeInsets`] 
+ 	 - set the padding area on all four sides of a widget.
+- global_anchor : [`Anchor`] 
+ 	 - use to anchor child position, and the positioning used is relative to the window
+- cursor : [`CursorIcon`] 
+ 	 - assign cursor to the widget.
+- margin : [`impl EdgeInsets`] 
+ 	 - expand space around widget wrapped.
+- scrollable : [`Scrollable`] 
+ 	 - enumerate to describe which direction allow widget to scroll.
+- scroll_pos : [`Point`] 
+ 	 - specify the scroll position of this widget, also means that the host widget scrollable.
+- transform : [`Transform`] 
+ 	 - A widget that applies a transformation its child. Doesn't change size, only apply painting
+- h_align : [`HAlign`] 
+ 	 - describe how widget align to its box in x-axis.
+- v_align : [`VAlign`] 
+ 	 - describe how widget align to its box in y-axis.
+- anchor : [`Anchor`] 
+ 	 - use to anchor child position, and the positioning used is relative to the parent
+- visible : [`bool`] 
+ 	 - Whether to show or hide a child
+- opacity : [`f32`] 
+ 	 - Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.
+- on_mounted : [`Box < dyn for < 'r > FnMut(LifeCycleCtx < 'r >, MountedType) >`] 
+ 	 - action perform after widget be added to the widget tree.
+- on_disposed : [`Box < dyn for < 'r > FnMut(LifeCycleCtx < 'r >, DisposedType) >`] 
+ 	 - action perform after widget remove from widget tree.
+- on_performed_layout : [`impl FnMut(& mut PointerEvent)`] 
+ 	 - specify the event handler for the pointer down event in bubble phase.
+- lifecycle_stream : [`LifecycleSubject`] 
+ 	 - return the stream of lifecycle.
+- delay_drop_until : [`bool`] 
+ 	 - The widget delay the drop of its child until the field delay_drop_until is false, but not affect its dispose event emit time. It's useful to ensure the disappear-animate display fully.
+
+ - `fn lazy_host_id(& self) -> LazyWidgetId`
+ 	- Return the LazyWidgetId of the host widget, through which you can access the WidgetId after building.
+
+ - `fn lazy_id(& self) -> LazyWidgetId`
+ 	- Return the LazyWidgetId of the external widget (wrapped with the built-in host), through which you can access the WidgetId after building.
+
+ - `fn double_tap_stream(& self,) -> FilterMapOp < MutRefItemSubject < 'static,
+PointerEvent, () >, impl FnMut(& mut PointerEvent) -> Option < & mut
+PointerEvent >, & mut PointerEvent, >`
+ 	-  Return an observable stream of double tap event in bubble phase.
+
+ - `fn triple_tap_stream(& self,) -> FilterMapOp < MutRefItemSubject < 'static,
+PointerEvent, () >, impl FnMut(& mut PointerEvent) -> Option < & mut
+PointerEvent >, & mut PointerEvent, >`
+ 	- Return an observable stream of tripe tap event in bubble phase.
+
+ - `fn x_times_tap_stream(& self, x : usize, dur : Duration,) -> FilterMapOp <
+MutRefItemSubject < 'static, PointerEvent, () >, impl
+FnMut(& mut PointerEvent) -> Option < & mut PointerEvent >, & mut
+PointerEvent, >`
+ 	-  Return an observable stream of x-tap event that user tapped 'x' times in the specify duration `dur` in bubble phase.
+
+ - `fn tap_capture_stream(& self) -> MutRefItemSubject < 'static, PointerEvent, ()
+>`
+ 	- return an observable stream of the pointer tap event in capture phase.
+
+ - `fn double_tap_capture_stream(& self,) -> FilterMapOp < MutRefItemSubject <
+'static, PointerEvent, () >, impl FnMut(& mut PointerEvent) -> Option < & mut
+PointerEvent >, & mut PointerEvent, >`
+ 	- return an observable stream of double tap event in capture phase.
+
+ - `fn triple_tap_capture_stream(& self,) -> FilterMapOp < MutRefItemSubject <
+'static, PointerEvent, () >, impl FnMut(& mut PointerEvent) -> Option < & mut
+PointerEvent >, & mut PointerEvent, >`
+ 	- Return an observable stream of tripe tap event in capture phase.
+
+ - `fn x_times_tap_capture_stream(& self, x : usize, dur : Duration,) ->
+FilterMapOp < MutRefItemSubject < 'static, PointerEvent, () >, impl
+FnMut(& mut PointerEvent) -> Option < & mut PointerEvent >, & mut
+PointerEvent, >`
+ 	-  Return an observable stream of x-tap event that user tapped 'x' times in the specify duration `dur` in capture phase.
+
+ - `fn pointer_stream(& self) -> PointerSubject`
+ 	- return the stream include all pointer events.
+
+ - `fn request_focus(& self)`
+ 	- request the this node to be focused.
+
+ - `fn unfocus(& self)`
+ 	- removes the focus from this node.
+
+ - `fn focus_stream(& self) -> MutRefItemSubject < 'static, FocusEvent, () >`
+ 	- Return the stream include all focus and blur events.
+
+ - `fn focus_bubble_stream(& self) -> MutRefItemSubject < 'static, FocusEvent, ()
+>`
+ 	- Return the stream include all focus in/out related events.
+
+ - `fn has_focus(& self) -> bool`
+ 	- return if the widget has focus.
+
+ - `fn keyboard_stream(& self) -> KeyboardSubject`
+ 	- return the stream include all keyboard events.
+
+ - `fn chars_stream(& self) -> CharsSubject`
+ 	- return the stream include all chars events.
+
+ - `fn wheel_stream(& self) -> MutRefItemSubject < 'static, WheelEvent, () >`
+ 	- return the stream include all wheel events.
+
+ - `fn mouse_hover(& self) -> bool`
+ 	- return if the pointer is hover on the widget
+
+ - `fn pointer_pressed(& self) -> bool`
+ 	- return if the widget is pressed
+
+ - `fn layout_rect(& self) -> Rect`
+ 	- return the rect after layout of the widget
+
+ - `fn layout_pos(& self) -> Point`
+ 	- return the position relative to parent after layout of the widget
+
+ - `fn layout_size(& self) -> Size`
+ 	- return the size after layout of the widget
+
+ - `fn layout_left(& self) -> f32`
+ 	- return the left position relative parent after layout of the widget
+
+ - `fn layout_top(& self) -> f32`
+ 	- return the top position relative parent after layout of the widget
+
+ - `fn layout_width(& self) -> f32`
+ 	- return the width after layout of the widget
+
+ - `fn layout_height(& self) -> f32`
+ 	- return the height after layout of the widget
+
+ - `fn scroll_view_size(& self) -> Size`
+ 	- return the scroll view of the scrollable widget
+
+ - `fn scroll_content_size(& self) -> Size`
+ 	- return the content widget size of the scrollable widget.
+
+ - `fn jump_to(& mut self, left_top : Point)`
+ 	- jump to the special position.
diff --git "a/docs/zh/\345\277\253\351\200\237\344\270\212\346\211\213/\345\210\233\345\273\272\344\270\200\344\270\252\345\272\224\347\224\250.md" b/docs/zh/get_started/creating_an_application.md
similarity index 100%
rename from "docs/zh/\345\277\253\351\200\237\344\270\212\346\211\213/\345\210\233\345\273\272\344\270\200\344\270\252\345\272\224\347\224\250.md"
rename to docs/zh/get_started/creating_an_application.md
diff --git "a/docs/zh/\345\277\253\351\200\237\344\270\212\346\211\213/\345\277\253\351\200\237\345\205\245\351\227\250.md" b/docs/zh/get_started/quick_start.md
similarity index 97%
rename from "docs/zh/\345\277\253\351\200\237\344\270\212\346\211\213/\345\277\253\351\200\237\345\205\245\351\227\250.md"
rename to docs/zh/get_started/quick_start.md
index bd44274b8..99e67fbb4 100644
--- "a/docs/zh/\345\277\253\351\200\237\344\270\212\346\211\213/\345\277\253\351\200\237\345\205\245\351\227\250.md"
+++ b/docs/zh/get_started/quick_start.md
@@ -23,14 +23,14 @@
 - `Render` widget
 - `ComposeChild` widget
 
-本章将只会介绍函数 widget 和 `Compose` widget。因为在大部分场景中这两种 widget 已经足够满足我们的需求了。作为进阶的内容，我们将在[深入 widget](./深入-widget.md)中覆盖 `Render` widget 和 `ComposeChild` widget。
+本章将只会介绍函数 widget 和 `Compose` widget。因为在大部分场景中这两种 widget 已经足够满足我们的需求了。作为进阶的内容，我们将在[深入 widget](./widget_in_depth.md)中覆盖 `Render` widget 和 `ComposeChild` widget。
 
 
 ## 函数 widget
 
 接收 `&BuildCtx` 作为入参并返回 `Widget` 的函数或闭包被称为函数 widget。
 
-在没有外部状态依赖的情况下，通过函数来定义 widget 是最简单的一种方式。在[创建一个应用](./创建一个应用.md)中，你已经见过一个 `Hello world!` 的函数 widget 了。本节中，我们仍通过 `Hello world!` 的例子来展开介绍。
+在没有外部状态依赖的情况下，通过函数来定义 widget 是最简单的一种方式。在[创建一个应用](./creating_an_application.md)中，你已经见过一个 `Hello world!` 的函数 widget 了。本节中，我们仍通过 `Hello world!` 的例子来展开介绍。
 
 ### 通过函数来定义 widget
 
@@ -99,7 +99,7 @@ fn main() {
 }
 ```
 
-你有没有发现，除了没有使用 `@` 以为，这个例子和你在[创建一个应用](./创建一个应用.md)中看到的已经一样了。
+你有没有发现，除了没有使用 `@` 以为，这个例子和你在[创建一个应用](./creating_an_application.md)中看到的已经一样了。
 
 ## 使用 `rdl!` 创建对象
 
@@ -191,7 +191,7 @@ fn main() {
 >
 > 在我们上面的例子中，`Row` 接收任意数目，任意类型的 widget,`Text` 不能接收任何孩子, 而 `FilledButton` 则更复杂一点，它允许接收一个 `Label` 作为它的文字和一个 `Svg` 作为按钮图标。
 >
-> 对于如何约束 widget 的孩子类型，我们将在[深入 widget](./深入-widget.md)中展开介绍。
+> 对于如何约束 widget 的孩子类型，我们将在[深入 widget](./widget_in_depth.md)中展开介绍。
 
 ### 表达式创建对象
 
@@ -611,7 +611,7 @@ fn main() {
 }
 ```
 
-参考 [内建 widget 列表](../../builtin_widget/declare_builtin_fields.md)查看所有可以用来作为扩展的内建字段和方法。
+参考 [内建 widget 列表](../builtin_widget/declare_builtin_fields.md)查看所有可以用来作为扩展的内建字段和方法。
 
 
 ## 状态的转换、分离和溯源
@@ -737,4 +737,4 @@ let _: &Writer<AppData> = split_count.origin_writer();
 
 ## 下一步
 
-至此，你已经掌握了开发 Ribir 引用所需的全部语法和基础概念了。是时候到[实践： Todos 应用](../实践：Todos%20应用/完整开一个Todos应用.md)将它们付诸实践了。
\ No newline at end of file
+至此，你已经掌握了开发 Ribir 引用所需的全部语法和基础概念了。是时候到[实践： Todos 应用](../practice_todos_app/develop_a_todos_app.md)将它们付诸实践了。
\ No newline at end of file
diff --git a/docs/zh/get_started/widget_in_depth.md b/docs/zh/get_started/widget_in_depth.md
new file mode 100644
index 000000000..279e3bd71
--- /dev/null
+++ b/docs/zh/get_started/widget_in_depth.md
@@ -0,0 +1,7 @@
+---
+sidebar_position: 3
+---
+
+# 深入理解 Widget
+
+> 即将推出
diff --git "a/docs/zh/\345\256\236\350\267\265\357\274\232Todos \345\272\224\347\224\250/\345\256\214\346\225\264\345\274\200\344\270\200\344\270\252Todos\345\272\224\347\224\250.md" b/docs/zh/practice_todos_app/develop_a_todos_app.md
similarity index 99%
rename from "docs/zh/\345\256\236\350\267\265\357\274\232Todos \345\272\224\347\224\250/\345\256\214\346\225\264\345\274\200\344\270\200\344\270\252Todos\345\272\224\347\224\250.md"
rename to docs/zh/practice_todos_app/develop_a_todos_app.md
index 0cd545802..65adad951 100644
--- "a/docs/zh/\345\256\236\350\267\265\357\274\232Todos \345\272\224\347\224\250/\345\256\214\346\225\264\345\274\200\344\270\200\344\270\252Todos\345\272\224\347\224\250.md"	
+++ b/docs/zh/practice_todos_app/develop_a_todos_app.md
@@ -237,7 +237,7 @@ impl Compose for Todos {
 }
 ```
 
-好在，Ribir 非常易于和 Rust 交互，还记得在[组合 widget](../快速上手/快速入门.md#组合-widget) 中讲到的通过变量声明孩子吗？
+好在，Ribir 非常易于和 Rust 交互，还记得在[组合 widget](../get_started/quick_start.md#compose-widget--描述你的数据结构) 中讲到的通过变量声明孩子吗？
 
 ```rust ignore
 
@@ -465,7 +465,7 @@ fn_widget! {
 
 ## 完善样式和动画
 
-在上面的教程中，你已经完成了一个完整的 Todos 应用，但是它的样式和交互还不够漂亮和现代，如果你想进一步完善你的应用，你可以到[完善样式和动画](./完善样式和动画.md)继续 Todos 应用的旅程。
+在上面的教程中，你已经完成了一个完整的 Todos 应用，但是它的样式和交互还不够漂亮和现代，如果你想进一步完善你的应用，你可以到[完善样式和动画](./improving_styles_and_animations.md)继续 Todos 应用的旅程。
 
 ## 完整代码
 
diff --git a/docs/zh/practice_todos_app/improving_styles_and_animations.md b/docs/zh/practice_todos_app/improving_styles_and_animations.md
new file mode 100644
index 000000000..04a047ff9
--- /dev/null
+++ b/docs/zh/practice_todos_app/improving_styles_and_animations.md
@@ -0,0 +1,7 @@
+---
+sidebar_position: 2
+---
+
+# 改进样式和动画
+
+> 即将推出
diff --git "a/docs/zh/\345\256\236\350\267\265\357\274\232Todos \345\272\224\347\224\250/\345\256\214\345\226\204\346\240\267\345\274\217\345\222\214\345\212\250\347\224\273.md" "b/docs/zh/\345\256\236\350\267\265\357\274\232Todos \345\272\224\347\224\250/\345\256\214\345\226\204\346\240\267\345\274\217\345\222\214\345\212\250\347\224\273.md"
deleted file mode 100644
index 8276d9204..000000000
--- "a/docs/zh/\345\256\236\350\267\265\357\274\232Todos \345\272\224\347\224\250/\345\256\214\345\226\204\346\240\267\345\274\217\345\222\214\345\212\250\347\224\273.md"	
+++ /dev/null
@@ -1 +0,0 @@
-# Coming Soon
\ No newline at end of file