Merge pull request #44 from FriedRiceNoodles/docs/markdown

Updated documentations.

docs/example/Checkbox/index.md

@@ -4,7 +4,7 @@ demo:
   cols: 2
 ---
 
-# Checkbox 复选框
+# Checkbox 复选框 <Badge>表单组件</Badge>
 
 ```
 <b-checkbox> | Checkbox

docs/example/Input/index.md

@@ -4,7 +4,7 @@ demo:
   cols: 2
 ---
 
-# Input 输入框
+# Input 输入框 <Badge>表单组件</Badge>
 
 ```
 <b-input> | Input

docs/example/Radio/index.md

@@ -4,7 +4,7 @@ demo:
   cols: 2
 ---
 
-# Radio 单选框
+# Radio 单选框 <Badge>表单组件</Badge>
 
 ```
 <b-radio> | Radio

docs/example/Rating/index.md

@@ -4,7 +4,7 @@ demo:
   cols: 2
 ---
 
-# Rating 评分
+# Rating 评分 <Badge>表单组件</Badge>
 
 ```
 <b-rating> | Rating

docs/example/Select/index.md

@@ -4,7 +4,7 @@ demo:
   cols: 2
 ---
 
-# Select 选择器
+# Select 选择器 <Badge>表单组件</Badge>
 
 ```
 <b-select> | Select

docs/example/Stepper/index.md

@@ -4,7 +4,7 @@ demo:
   cols: 2
 ---
 
-# Stepper 数量选择器
+# Stepper 数量选择器 <Badge>表单组件</Badge>
 
 ```
 <b-stepper> | Stepper

docs/guide/SSR.md

@@ -1,6 +1,6 @@
 ---
 group: 指南
-order: 3
+order: 5
 ---
 
 # SSR（服务端渲染）支持

docs/guide/advanced.md

@@ -0,0 +1,6 @@
+---
+group: 指南
+order: 3
+---
+
+# 进阶

docs/guide/introduction.md

@@ -42,6 +42,10 @@ Banana 最大的特点是它是一个基于 Web Components 的组件库，这意
 
 可以。Banana UI 已经在一些项目中使用。但是请注意，它仍然处于早期阶段，可能会有一些问题。如果你在使用过程中遇到了问题，欢迎在 [Issues 区](https://github.com/FriedRiceNoodles/banana-ui/issues) 上提出问题或寻求帮助。
 
+### Banana UI 使用了什么技术？
+
+Banana UI 底层基于 [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)，并使用 [Lit](https://lit.dev/)进行开发。
+
 > 作者注：我目前在一个跨境电商公司工作，公司最大的 C 端项目以及它的一些内部系统都在使用 Banana UI。
 
 <br />

docs/guide/quick-start.md

@@ -56,6 +56,70 @@ export default function App() {
 }
 ```
 
+## Attribute 和 Property
+
+如果你使用 Google 翻译，你会发现 [Attribute](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes) 和 Property 都被翻译成了属性，但实际上它们并不是等价的。
+
+简单来说，Attribute 是 HTML 标签上的属性，而 Property 是 DOM 对象上的属性。
+
+对于 Banana UI 而言，我们会把 Attribute 和 Property 以一定的规则互相转换。转换的规则取决于具体组件属性的类型。
+
+- 如果属性是字符串类型，那么 Attribute 和 Property 是等价的。
+- \*如果属性是数字类型，那么 Attribute 在被转换成 Property 时会被自动转换成数字类型（如果可以的话）。
+- 如果属性是布尔类型，那么 Attribute 出现在标签上就表示为 true，不出现就表示为 false。
+- 如果属性是对象或者数组类型，那么 Attribute 和 Property 的转换相当于 JSON.stringify 和 JSON.parse。
+
+举个例子：
+
+```html
+/* disabled 为 true */
+<b-button disabled>按钮</b-button>
+/* disabled 仍然为 true */
+<b-button disabled="false">按钮</b-button>
+```
+
+:::info
+这样的规则是基于 html 标签只能写入字符串这一限制，如果你是 React 用户，使用`@banana-ui/react`，则可以无视这些规则。
+具体规则请查看[这里](https://lit.dev/docs/v2/components/properties/#conversion-type)，并以组件文档为准。
+:::
+
+在 html 标签中传入对象或数组类型的属性时，需要使用`JSON.stringify`，如：
+
+```html
+<b-button data='{"name": "banana"}'>按钮</b-button>
+```
+
+这种场景我们推荐直接修改 Property，如：
+
+```javascript
+const button = document.querySelector('b-button');
+button.data = { name: 'banana' };
+```
+
+## 监听事件
+
+你可以像监听普通的 DOM 事件一样监听 Banana 组件的事件。
+
+```javascript
+const button = document.querySelector('b-button');
+button.addEventListener('click', () => {
+  console.log('Hello Banana');
+});
+```
+
+:::info
+对于 React 用户，使用`@banana-ui/react`，事件的名称会被转换为符合 [React 事件命名规范](https://react.dev/learn/responding-to-events#naming-event-handler-props)的形式。如`afterHide`会被转换为`onAfterHide`。
+:::
+
+## 方法调用
+
+有些组件会暴露一些方法，你可以通过调用这些方法来实现一些功能。
+
+```javascript
+const collapse = document.querySelector('b-collapse');
+collapse.show();
+```
+
 ## 服务端渲染（SSR）支持
 
 详情请查看 [服务端渲染（SSR）支持](/guide/SSR)。

docs/guide/react.md

@@ -0,0 +1,6 @@
+---
+group: 指南
+order: 4
+---
+
+# React