From 228ee4bf7d10bd7153009e07e566d2f181bd44c2 Mon Sep 17 00:00:00 2001
From: ZIA <1025013204@qq.com>
Date: Wed, 20 Mar 2024 14:53:13 +0800
Subject: [PATCH] Docs/complete html source (#78)

* docs(tooltip): added html source code

* docs(stepper): added html source code

* docs(select): added html source code

* docs(rating): added html source code

* docs(radio): added html source code

* docs(progress): added html source code

* fix(progress): change attribute name in html enviroment

* docs(overlay): added html source code

* docs(popup): added html source code

* docs: delete the onload event

* docs(popup): change correct script code

* docs: remove 'div' wrapper

* docs: change docs content follow code review

* docs: change some useless docs code

* docs: change docs content follow code review
---
 packages/banana/src/progress/index.ts  |   2 +-
 public/Overlay/OverlayBaseUse.html     |  15 ++++
 public/Overlay/OverlayWithContent.html |  17 ++++
 public/Popup/BasicUsage.html           | 104 +++++++++++++++++++++++++
 public/Progress/basicUsage.html        |   4 +
 public/Progress/customColor.html       |  13 ++++
 public/Progress/customHeight.html      |  10 +++
 public/Progress/dynamic.html           |  19 +++++
 public/Radio/basicUsage.html           |   4 +
 public/Radio/disabled.html             |  11 +++
 public/Radio/sizes.html                |   5 ++
 public/Radio/vertical.html             |   5 ++
 public/Rating/basicUsage.html          |   1 +
 public/Rating/character.html           |  25 ++++++
 public/Rating/disabled.html            |   1 +
 public/Rating/halfAllowed.html         |   1 +
 public/Rating/precision.html           |   4 +
 public/Rating/readonly.html            |   1 +
 public/Select/Clearable.html           |  18 +++++
 public/Select/Disabled.html            |  18 +++++
 public/Select/Multiple.html            |  22 ++++++
 public/Select/Size.html                |  26 +++++++
 public/Select/basicUsage.html          |  18 +++++
 public/Stepper/basicUsage.html         |   4 +
 public/Stepper/inputRange.html         |   1 +
 public/Stepper/setStepLen.html         |  24 ++++++
 public/Stepper/stepChange.html         |  13 ++++
 public/Tooltip/backgroundColor.html    |  24 ++++++
 public/Tooltip/basicUsage.html         |   3 +
 public/Tooltip/empty.html              |  16 ++++
 public/Tooltip/maxWidth.html           |  13 ++++
 public/Tooltip/noArrow.html            |   3 +
 public/Tooltip/placement.html          |  66 ++++++++++++++++
 public/Tooltip/triggerAction.html      |   6 ++
 34 files changed, 516 insertions(+), 1 deletion(-)
 create mode 100644 public/Overlay/OverlayBaseUse.html
 create mode 100644 public/Overlay/OverlayWithContent.html
 create mode 100644 public/Popup/BasicUsage.html
 create mode 100644 public/Progress/basicUsage.html
 create mode 100644 public/Progress/customColor.html
 create mode 100644 public/Progress/customHeight.html
 create mode 100644 public/Progress/dynamic.html
 create mode 100644 public/Radio/basicUsage.html
 create mode 100644 public/Radio/disabled.html
 create mode 100644 public/Radio/sizes.html
 create mode 100644 public/Radio/vertical.html
 create mode 100644 public/Rating/basicUsage.html
 create mode 100644 public/Rating/character.html
 create mode 100644 public/Rating/disabled.html
 create mode 100644 public/Rating/halfAllowed.html
 create mode 100644 public/Rating/precision.html
 create mode 100644 public/Rating/readonly.html
 create mode 100644 public/Select/Clearable.html
 create mode 100644 public/Select/Disabled.html
 create mode 100644 public/Select/Multiple.html
 create mode 100644 public/Select/Size.html
 create mode 100644 public/Select/basicUsage.html
 create mode 100644 public/Stepper/basicUsage.html
 create mode 100644 public/Stepper/inputRange.html
 create mode 100644 public/Stepper/setStepLen.html
 create mode 100644 public/Stepper/stepChange.html
 create mode 100644 public/Tooltip/backgroundColor.html
 create mode 100644 public/Tooltip/basicUsage.html
 create mode 100644 public/Tooltip/empty.html
 create mode 100644 public/Tooltip/maxWidth.html
 create mode 100644 public/Tooltip/noArrow.html
 create mode 100644 public/Tooltip/placement.html
 create mode 100644 public/Tooltip/triggerAction.html

diff --git a/packages/banana/src/progress/index.ts b/packages/banana/src/progress/index.ts
index a9e19e27..2e3385a4 100644
--- a/packages/banana/src/progress/index.ts
+++ b/packages/banana/src/progress/index.ts
@@ -20,7 +20,7 @@ export default class BProgress extends LitElement {
   @property({ reflect: true })
   color: string | undefined;
 
-  @property({ reflect: true })
+  @property({ reflect: true, attribute: 'background-color' })
   backgroundColor: string | undefined;
 
   @property({ reflect: true, type: Number })
diff --git a/public/Overlay/OverlayBaseUse.html b/public/Overlay/OverlayBaseUse.html
new file mode 100644
index 00000000..3e9de0cb
--- /dev/null
+++ b/public/Overlay/OverlayBaseUse.html
@@ -0,0 +1,15 @@
+<b-button>展开遮罩层</b-button>
+<b-overlay></b-overlay>
+
+<script>
+  const btn = document.querySelector('b-button');
+  const overlay = document.querySelector('b-overlay');
+
+  btn.addEventListener('click', () => {
+    overlay.open = true;
+  });
+
+  overlay.addEventListener('close', () => {
+    overlay.open = false;
+  });
+</script>
diff --git a/public/Overlay/OverlayWithContent.html b/public/Overlay/OverlayWithContent.html
new file mode 100644
index 00000000..d4205747
--- /dev/null
+++ b/public/Overlay/OverlayWithContent.html
@@ -0,0 +1,17 @@
+<b-button>展开遮罩层（带内容）</b-button>
+<b-overlay>
+  <div style="border-radius: 4px; width: 200px; height: 200px; background-color: white"></div>
+</b-overlay>
+
+<script>
+  const btn = document.querySelector('b-button');
+  const overlay = document.querySelector('b-overlay');
+
+  btn.addEventListener('click', () => {
+    overlay.open = true;
+  });
+
+  overlay.addEventListener('close', () => {
+    overlay.open = false;
+  });
+</script>
diff --git a/public/Popup/BasicUsage.html b/public/Popup/BasicUsage.html
new file mode 100644
index 00000000..4333e918
--- /dev/null
+++ b/public/Popup/BasicUsage.html
@@ -0,0 +1,104 @@
+<div style="display: flex; gap: 20px">
+  <b-button class="top">从顶部弹出</b-button>
+  <b-button class="right">从右边弹出</b-button>
+  <b-button class="bottom">从底部弹出</b-button>
+  <b-button class="left">从左边弹出</b-button>
+</div>
+
+<b-popup position="top">
+  <div style="display: flex; align-items: center; flex-direction: column">
+    <div>line 1</div>
+    <div>line 2</div>
+    <div>line 3</div>
+    <div>line 4</div>
+    <div>line 5</div>
+    <div>line 6</div>
+    <div>line 7</div>
+    <div>line 8</div>
+    <div>line 9</div>
+    <div>line 10</div>
+  </div>
+</b-popup>
+
+<b-popup position="right">
+  <div style="display: flex; align-items: center; flex-direction: column">
+    <div>line 1</div>
+    <div>line 2</div>
+    <div>line 3</div>
+    <div>line 4</div>
+    <div>line 5</div>
+    <div>line 6</div>
+    <div>line 7</div>
+    <div>line 8</div>
+    <div>line 9</div>
+    <div>line 10</div>
+  </div>
+</b-popup>
+
+<b-popup position="bottom">
+  <div style="display: flex; align-items: center; flex-direction: column">
+    <div>line 1</div>
+    <div>line 2</div>
+    <div>line 3</div>
+    <div>line 4</div>
+    <div>line 5</div>
+    <div>line 6</div>
+    <div>line 7</div>
+    <div>line 8</div>
+    <div>line 9</div>
+    <div>line 10</div>
+  </div>
+</b-popup>
+
+<b-popup position="left">
+  <div style="display: flex; align-items: center; flex-direction: column">
+    <div>line 1</div>
+    <div>line 2</div>
+    <div>line 3</div>
+    <div>line 4</div>
+    <div>line 5</div>
+    <div>line 6</div>
+    <div>line 7</div>
+    <div>line 8</div>
+    <div>line 9</div>
+    <div>line 10</div>
+  </div>
+</b-popup>
+
+<script>
+  const topBtn = document.querySelector('.top');
+  const topPopup = document.querySelector('b-popup[position="top"]');
+  topBtn.addEventListener('click', () => {
+    topPopup.open = true;
+  });
+  topPopup.addEventListener('close', () => {
+    topPopup.open = false;
+  });
+
+  const rightBtn = document.querySelector('.right');
+  const rightPopup = document.querySelector('b-popup[position="right"]');
+  rightBtn.addEventListener('click', () => {
+    rightPopup.open = true;
+  });
+  rightPopup.addEventListener('close', () => {
+    rightPopup.open = false;
+  });
+
+  const bottomBtn = document.querySelector('.bottom');
+  const bottomPopup = document.querySelector('b-popup[position="bottom"]');
+  bottomBtn.addEventListener('click', () => {
+    bottomPopup.open = true;
+  });
+  bottomPopup.addEventListener('close', () => {
+    bottomPopup.open = false;
+  });
+
+  const leftBtn = document.querySelector('.left');
+  const leftPopup = document.querySelector('b-popup[position="left"]');
+  leftBtn.addEventListener('click', () => {
+    leftPopup.open = true;
+  });
+  leftPopup.addEventListener('close', () => {
+    leftPopup.open = false;
+  });
+</script>
diff --git a/public/Progress/basicUsage.html b/public/Progress/basicUsage.html
new file mode 100644
index 00000000..f6145ea4
--- /dev/null
+++ b/public/Progress/basicUsage.html
@@ -0,0 +1,4 @@
+<b-progress></b-progress>
+<b-progress percent="20"></b-progress>
+<b-progress percent="50"></b-progress>
+<b-progress percent="100"></b-progress>
diff --git a/public/Progress/customColor.html b/public/Progress/customColor.html
new file mode 100644
index 00000000..fd40caf4
--- /dev/null
+++ b/public/Progress/customColor.html
@@ -0,0 +1,13 @@
+你可以使用 <code>color</code> 参数和 <code>background-color</code> 参数来自定义进度条和背景颜色。
+<b-progress percent="50" color="rgb(224, 47, 37)" background-color="rgba(224, 47, 37, 0.3)"></b-progress>
+当然你也可以实现一个渐变的进度条：
+<b-progress
+  percent="50"
+  color="linear-gradient(to right, #FFD700, #FFA500)"
+  background-color="linear-gradient(to right, #FFFACD, #FFD700)"
+></b-progress>
+你还可以使用 <code>css变量</code> 来自定义进度条和背景颜色。
+<b-progress
+  percent="50"
+  style="--banana-progress-color: rgb(224, 47, 37); --banana-progress-background-color: rgba(224, 47, 37, 0.3)"
+></b-progress>
diff --git a/public/Progress/customHeight.html b/public/Progress/customHeight.html
new file mode 100644
index 00000000..55685cf8
--- /dev/null
+++ b/public/Progress/customHeight.html
@@ -0,0 +1,10 @@
+<p>你可以使用 <code>height</code> 参数来自定义进度条的高度。</p>
+<b-progress percent="50" height="16"></b-progress>
+<p>也可以使用 <code>css变量</code> 来自定义进度条的高度。</p>
+<b-progress percent="50" style="--banana-progress-height: 16px"></b-progress>
+<p>
+  默认情况下，进度条的 <code>border-radius </code> 是高度的一半，也就是说进度条是圆角的。
+  一般来说，你很少需要改变这个值，但是如果你需要的话，你可以使用 <code>css变量</code> 来自定义进度条的
+  <code>border-radius </code>。
+</p>
+<b-progress percent="50" style="--banana-progress-border-radius: 3px"></b-progress>
diff --git a/public/Progress/dynamic.html b/public/Progress/dynamic.html
new file mode 100644
index 00000000..00c84c46
--- /dev/null
+++ b/public/Progress/dynamic.html
@@ -0,0 +1,19 @@
+<div style="display: flex; gap: 10px">
+  <b-progress percent="0"></b-progress>
+  <b-button class="b-button b-primary b-small plus"> +10% </b-button>
+  <b-button class="b-button b-warning b-small reset"> Reset </b-button>
+</div>
+
+<script>
+  const resetBtn = document.querySelector('.reset');
+  const plusBtn = document.querySelector('.plus');
+  const progress = document.querySelector('b-progress');
+
+  plusBtn.addEventListener('click', () => {
+    progress.percent += 10;
+  });
+
+  resetBtn.addEventListener('click', () => {
+    progress.percent = 0;
+  });
+</script>
diff --git a/public/Radio/basicUsage.html b/public/Radio/basicUsage.html
new file mode 100644
index 00000000..314d502d
--- /dev/null
+++ b/public/Radio/basicUsage.html
@@ -0,0 +1,4 @@
+<b-radio-group>
+  <b-radio value="banana">Banana 🍌</b-radio>
+  <b-radio value="apple">Apple 🍎</b-radio>
+</b-radio-group>
diff --git a/public/Radio/disabled.html b/public/Radio/disabled.html
new file mode 100644
index 00000000..17ae2301
--- /dev/null
+++ b/public/Radio/disabled.html
@@ -0,0 +1,11 @@
+<b-radio-group>
+  <b-radio value="banana">Banana🍌</b-radio>
+  <b-radio value="apple">Apple🍎</b-radio>
+  <b-radio value="cherry" disabled>Cherry🍒</b-radio>
+</b-radio-group>
+
+<b-radio-group disabled value="banana">
+  <b-radio value="banana">Banana🍌</b-radio>
+  <b-radio value="apple">Apple🍎</b-radio>
+  <b-radio value="cherry">Cherry🍒</b-radio>
+</b-radio-group>
diff --git a/public/Radio/sizes.html b/public/Radio/sizes.html
new file mode 100644
index 00000000..f92405e8
--- /dev/null
+++ b/public/Radio/sizes.html
@@ -0,0 +1,5 @@
+<b-radio-group default-value="medium">
+  <b-radio size="small" value="small">small</b-radio>
+  <b-radio value="medium">medium (default)</b-radio>
+  <b-radio size="large" value="large">large</b-radio>
+</b-radio-group>
diff --git a/public/Radio/vertical.html b/public/Radio/vertical.html
new file mode 100644
index 00000000..cfe7e941
--- /dev/null
+++ b/public/Radio/vertical.html
@@ -0,0 +1,5 @@
+<b-radio-group vertical>
+  <b-radio value="banana">Banana 🍌</b-radio>
+  <b-radio value="apple">Apple 🍎</b-radio>
+  <b-radio value="cherry">Cherry 🍒</b-radio>
+</b-radio-group>
diff --git a/public/Rating/basicUsage.html b/public/Rating/basicUsage.html
new file mode 100644
index 00000000..e82dd7c0
--- /dev/null
+++ b/public/Rating/basicUsage.html
@@ -0,0 +1 @@
+<b-rating default-value="3"></b-rating>
diff --git a/public/Rating/character.html b/public/Rating/character.html
new file mode 100644
index 00000000..79175cbe
--- /dev/null
+++ b/public/Rating/character.html
@@ -0,0 +1,25 @@
+<b-rating default-value="3" character="好"></b-rating>
+<!-- 如果你使用了外部的svg图标，需要把fill属性设置为currentColor，以保证组件能根据状态调整图标颜色。 -->
+<b-rating id="customIcon" default-value="3" style="--banana-rating-symbol-color: #bb4430"></b-rating>
+
+<script>
+  const icon = `<svg
+      t="1693913309010"
+      class="icon"
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      p-id="4054"
+      width="36"
+      height="36"
+    >
+      <path
+        d="M512 901.746939c-13.583673 0-26.122449-4.179592-37.093878-13.061225-8.881633-7.314286-225.697959-175.020408-312.424489-311.379592C133.746939 532.37551 94.040816 471.24898 94.040816 384.522449c0-144.718367 108.146939-262.269388 240.326531-262.269388 67.395918 0 131.657143 30.82449 177.632653 84.636735 45.453061-54.334694 109.191837-84.636735 177.110204-84.636735 132.702041 0 240.326531 117.55102 240.326531 262.269388 0 85.159184-37.093878 143.673469-67.395919 191.216327l-1.044898 1.567346c-86.726531 136.359184-303.542857 304.587755-312.424489 311.379592-10.44898 8.359184-22.987755 13.061224-36.571429 13.061225z"
+        fill="currentColor"
+        p-id="4055"
+      ></path>
+    </svg>`;
+
+  const customRating = document.getElementById('customIcon');
+  customRating.character = icon;
+</script>
diff --git a/public/Rating/disabled.html b/public/Rating/disabled.html
new file mode 100644
index 00000000..cb5c2868
--- /dev/null
+++ b/public/Rating/disabled.html
@@ -0,0 +1 @@
+<b-rating disabled default-value="3"></b-rating>
diff --git a/public/Rating/halfAllowed.html b/public/Rating/halfAllowed.html
new file mode 100644
index 00000000..351e21e1
--- /dev/null
+++ b/public/Rating/halfAllowed.html
@@ -0,0 +1 @@
+<b-rating default-value="2.5" half-allowed></b-rating>
diff --git a/public/Rating/precision.html b/public/Rating/precision.html
new file mode 100644
index 00000000..5096b9f5
--- /dev/null
+++ b/public/Rating/precision.html
@@ -0,0 +1,4 @@
+Precision
+<b-rating default-value="2.75" precision></b-rating>
+Precision & Readonly
+<b-rating default-value="2.75" precision readonly></b-rating>
diff --git a/public/Rating/readonly.html b/public/Rating/readonly.html
new file mode 100644
index 00000000..30aca056
--- /dev/null
+++ b/public/Rating/readonly.html
@@ -0,0 +1 @@
+<b-rating default-value="3" readonly></b-rating>
diff --git a/public/Select/Clearable.html b/public/Select/Clearable.html
new file mode 100644
index 00000000..6bb05ae5
--- /dev/null
+++ b/public/Select/Clearable.html
@@ -0,0 +1,18 @@
+<div style="display: flex; flex-wrap: wrap; gap: 20px">
+  <b-select placeholder="Choose a fruit" style="width: 100%" clearable>
+    <b-select-option value="apple">🍎 Apple</b-select-option>
+    <b-select-option value="banana">🍌 Banana</b-select-option>
+    <b-select-option value="orange">🍊 Orange</b-select-option>
+    <b-select-option value="pear">🍐 Pear</b-select-option>
+    <b-select-option value="grape">🍇 Grape</b-select-option>
+    <b-select-option value="disabled" disabled>🚫 Disabled</b-select-option>
+  </b-select>
+  <b-select placeholder="Choose a fruit" style="width: 100%" multiple clearable>
+    <b-select-option value="apple">🍎 Apple</b-select-option>
+    <b-select-option value="banana">🍌 Banana</b-select-option>
+    <b-select-option value="orange">🍊 Orange</b-select-option>
+    <b-select-option value="pear">🍐 Pear</b-select-option>
+    <b-select-option value="grape">🍇 Grape</b-select-option>
+    <b-select-option value="disabled" disabled>🚫 Disabled</b-select-option>
+  </b-select>
+</div>
diff --git a/public/Select/Disabled.html b/public/Select/Disabled.html
new file mode 100644
index 00000000..ed5a4367
--- /dev/null
+++ b/public/Select/Disabled.html
@@ -0,0 +1,18 @@
+<div style="display: flex; flex-wrap: wrap; gap: 20px">
+  <b-select placeholder="Choose a fruit" style="width: 100%" clearable disabled>
+    <b-select-option value="apple">🍎 Apple</b-select-option>
+    <b-select-option value="banana">🍌 Banana</b-select-option>
+    <b-select-option value="orange">🍊 Orange</b-select-option>
+    <b-select-option value="pear">🍐 Pear</b-select-option>
+    <b-select-option value="grape">🍇 Grape</b-select-option>
+    <b-select-option value="disabled" disabled>🚫 Disabled</b-select-option>
+  </b-select>
+  <b-select placeholder="Choose a fruit" style="width: 100%" multiple clearable default-value="apple banana" disabled>
+    <b-select-option value="apple">🍎 Apple</b-select-option>
+    <b-select-option value="banana">🍌 Banana</b-select-option>
+    <b-select-option value="orange">🍊 Orange</b-select-option>
+    <b-select-option value="pear">🍐 Pear</b-select-option>
+    <b-select-option value="grape">🍇 Grape</b-select-option>
+    <b-select-option value="disabled" disabled>🚫 Disabled</b-select-option>
+  </b-select>
+</div>
diff --git a/public/Select/Multiple.html b/public/Select/Multiple.html
new file mode 100644
index 00000000..ee1ede53
--- /dev/null
+++ b/public/Select/Multiple.html
@@ -0,0 +1,22 @@
+<b-select multiple style="width: 100%" default-value="grape orange">
+  <b-select-option value="apple"
+    >🍎 AppleAppleAppleAppleAppleAppleAppleAppleAppleAppleAppleAppleAppleAppleAppleApple</b-select-option
+  >
+  <b-select-option value="banana">🍌 Banana</b-select-option>
+  <b-select-option value="orange">🍊 Orange</b-select-option>
+  <b-select-option value="pear">🍐 Pear</b-select-option>
+  <b-select-option value="grape">🍇 Grape</b-select-option>
+  <b-select-option value="strawberry">🍓 Strawberry</b-select-option>
+  <b-select-option value="pineapple">🍍 Pineapple</b-select-option>
+  <b-select-option value="cherry">🍒 Cherry</b-select-option>
+  <b-select-option value="disabled" disabled>🚫 Disabled</b-select-option>
+</b-select>
+<script>
+  const select = document.querySelector('b-select');
+
+  function handleChange(event) {
+    console.log(event.detail.value);
+  }
+
+  select.addEventListener('change', handleChange);
+</script>
diff --git a/public/Select/Size.html b/public/Select/Size.html
new file mode 100644
index 00000000..81cd0485
--- /dev/null
+++ b/public/Select/Size.html
@@ -0,0 +1,26 @@
+<div style="display: flex; flex-wrap: wrap; gap: 20px">
+  <b-select placeholder="Small size" size="small" style="width: 100%">
+    <b-select-option value="apple">🍎 Apple</b-select-option>
+    <b-select-option value="banana">🍌 Banana</b-select-option>
+    <b-select-option value="orange">🍊 Orange</b-select-option>
+    <b-select-option value="pear">🍐 Pear</b-select-option>
+    <b-select-option value="grape">🍇 Grape</b-select-option>
+    <b-select-option value="disabled" disabled>🚫 Disabled</b-select-option>
+  </b-select>
+  <b-select placeholder="Medium size(default)" style="width: 100%">
+    <b-select-option value="apple">🍎 Apple</b-select-option>
+    <b-select-option value="banana">🍌 Banana</b-select-option>
+    <b-select-option value="orange">🍊 Orange</b-select-option>
+    <b-select-option value="pear">🍐 Pear</b-select-option>
+    <b-select-option value="grape">🍇 Grape</b-select-option>
+    <b-select-option value="disabled" disabled>🚫 Disabled</b-select-option>
+  </b-select>
+  <b-select placeholder="Large size" size="large" style="width: 100%">
+    <b-select-option value="apple">🍎 Apple</b-select-option>
+    <b-select-option value="banana">🍌 Banana</b-select-option>
+    <b-select-option value="orange">🍊 Orange</b-select-option>
+    <b-select-option value="pear">🍐 Pear</b-select-option>
+    <b-select-option value="grape">🍇 Grape</b-select-option>
+    <b-select-option value="disabled" disabled>🚫 Disabled</b-select-option>
+  </b-select>
+</div>
diff --git a/public/Select/basicUsage.html b/public/Select/basicUsage.html
new file mode 100644
index 00000000..26230512
--- /dev/null
+++ b/public/Select/basicUsage.html
@@ -0,0 +1,18 @@
+<div style="display: flex; flex-wrap: wrap; gap: 20px">
+  <b-select placeholder="Choose a fruit" style="width: 150px">
+    <b-select-option value="apple">🍎 Apple</b-select-option>
+    <b-select-option value="banana">🍌 Banana</b-select-option>
+    <b-select-option value="orange">🍊 Orange</b-select-option>
+    <b-select-option value="pear">🍐 Pear</b-select-option>
+    <b-select-option value="grape">🍇 Grape</b-select-option>
+    <b-select-option value="disabled" disabled>🚫 Disabled</b-select-option>
+  </b-select>
+  <b-select default-value="pear" placeholder="Choose a fruit" style="width: 150px">
+    <b-select-option value="apple">🍎 Apple</b-select-option>
+    <b-select-option value="banana">🍌 Banana</b-select-option>
+    <b-select-option value="orange">🍊 Orange</b-select-option>
+    <b-select-option value="pear">🍐 Pear</b-select-option>
+    <b-select-option value="grape">🍇 Grape</b-select-option>
+    <b-select-option value="disabled" disabled>🚫 Disabled</b-select-option>
+  </b-select>
+</div>
diff --git a/public/Stepper/basicUsage.html b/public/Stepper/basicUsage.html
new file mode 100644
index 00000000..9a0ece53
--- /dev/null
+++ b/public/Stepper/basicUsage.html
@@ -0,0 +1,4 @@
+<div style="display: flex; flex-direction: column; gap: 10px">
+  <b-stepper value="1"></b-stepper>
+  <b-stepper value="1" disabled></b-stepper>
+</div>
diff --git a/public/Stepper/inputRange.html b/public/Stepper/inputRange.html
new file mode 100644
index 00000000..dce93b01
--- /dev/null
+++ b/public/Stepper/inputRange.html
@@ -0,0 +1 @@
+<b-stepper value="-2" min="-1" max="5"></b-stepper>
diff --git a/public/Stepper/setStepLen.html b/public/Stepper/setStepLen.html
new file mode 100644
index 00000000..dd176b87
--- /dev/null
+++ b/public/Stepper/setStepLen.html
@@ -0,0 +1,24 @@
+<div style="display: flex; flex-direction: column; gap: 10px">
+  <div style="display: flex; gap: 5px">
+    <b-button id="plus">增加步长</b-button>
+    <b-button id="minus">减少步长</b-button>
+  </div>
+  <span id="displayStep">当前步长: 1</span>
+  <b-stepper></b-stepper>
+</div>
+
+<script>
+  const displayStepEl = document.getElementById('displayStep');
+  const stepper = document.querySelector('b-stepper');
+  const plusStepBtn = document.getElementById('plus');
+  const minusStepBtn = document.getElementById('minus');
+
+  plusStepBtn.addEventListener('click', () => {
+    stepper.step += 1;
+    displayStepEl.textContent = `当前步长: ${stepper.step}`;
+  });
+  minusStepBtn.addEventListener('click', () => {
+    stepper.step -= 1;
+    displayStepEl.textContent = `当前步长: ${stepper.step}`;
+  });
+</script>
diff --git a/public/Stepper/stepChange.html b/public/Stepper/stepChange.html
new file mode 100644
index 00000000..132061d8
--- /dev/null
+++ b/public/Stepper/stepChange.html
@@ -0,0 +1,13 @@
+<b-stepper value="0"></b-stepper>
+<script>
+  const stepper = document.querySelector('b-stepper');
+
+  function handleChange(event) {
+    if (event.composedPath()[0] === stepper) {
+      const eventDetail = event.detail;
+      window.BMessage.info({ content: 'current stepper value：' + eventDetail.value });
+    }
+  }
+
+  stepper.addEventListener('change', handleChange);
+</script>
diff --git a/public/Tooltip/backgroundColor.html b/public/Tooltip/backgroundColor.html
new file mode 100644
index 00000000..98c4c8c2
--- /dev/null
+++ b/public/Tooltip/backgroundColor.html
@@ -0,0 +1,24 @@
+你可以通过 <code>background-color</code> 参数设置背景色。
+<p style="display: flex; gap: 8px">
+  <b-tooltip content="This is a tooltip." background-color="maroon">
+    <b-button>maroon</b-button>
+  </b-tooltip>
+  <b-tooltip content="This is a tooltip." background-color="#015AE0">
+    <b-button>#015AE0</b-button>
+  </b-tooltip>
+  <b-tooltip content="This is a tooltip." background-color="rgb(16, 145, 11)">
+    <b-button>rgb(16, 145, 11)</b-button>
+  </b-tooltip>
+</p>
+也可以通过<code>css变量</code>来实现这一点
+<p style="display: flex; gap: 8px">
+  <b-tooltip content="This is a tooltip;" style="--banana-tooltip-background-color: maroon">
+    <b-button>marron</b-button>
+  </b-tooltip>
+  <b-tooltip content="This is a tooltip;" style="--banana-tooltip-background-color: #015ae0">
+    <b-button>#015AE0</b-button>
+  </b-tooltip>
+  <b-tooltip content="This is a tooltip;" style="--banana-tooltip-background-color: rgb(16, 145, 11)">
+    <b-button>rgb(16, 145, 11)</b-button>
+  </b-tooltip>
+</p>
diff --git a/public/Tooltip/basicUsage.html b/public/Tooltip/basicUsage.html
new file mode 100644
index 00000000..2c81e97c
--- /dev/null
+++ b/public/Tooltip/basicUsage.html
@@ -0,0 +1,3 @@
+<b-tooltip content="This is a tooltip.">
+  <span>Hover me!</span>
+</b-tooltip>
diff --git a/public/Tooltip/empty.html b/public/Tooltip/empty.html
new file mode 100644
index 00000000..1462cd76
--- /dev/null
+++ b/public/Tooltip/empty.html
@@ -0,0 +1,16 @@
+<b-button>Hide</b-button>
+<b-tooltip>
+  <span>Hover me!</span>
+</b-tooltip>
+
+<script>
+  let visible = false;
+  const btn = document.querySelector('b-button');
+  const tooltip = document.querySelector('b-tooltip');
+
+  btn.addEventListener('click', () => {
+    visible = !visible;
+    tooltip.content = visible ? 'This is a tooltip.' : '';
+    btn.textContent = visible ? 'Hide' : 'Show';
+  });
+</script>
diff --git a/public/Tooltip/maxWidth.html b/public/Tooltip/maxWidth.html
new file mode 100644
index 00000000..bc00ccd9
--- /dev/null
+++ b/public/Tooltip/maxWidth.html
@@ -0,0 +1,13 @@
+你可以通过<code>max-width</code>参数设置最大宽度。
+<p style="display: flex; gap: 8px">
+  <b-tooltip content="This is a long long long long long long tooltip." maxwidth="100">
+    <b-button>Hover me!</b-button>
+  </b-tooltip>
+  <b-tooltip content="This is a long long long long long long tooltip." maxwidth="10em">
+    <b-button>Hover me!</b-button>
+  </b-tooltip>
+</p>
+也可以通过<code>css变量</code>来实现这一点
+<b-tooltip content="This is a long long long long long long tooltip." style="--banana-tooltip-max-width: 100px">
+  <b-button>Hover me!</b-button>
+</b-tooltip>
diff --git a/public/Tooltip/noArrow.html b/public/Tooltip/noArrow.html
new file mode 100644
index 00000000..68b8853a
--- /dev/null
+++ b/public/Tooltip/noArrow.html
@@ -0,0 +1,3 @@
+<b-tooltip content="This is a tooltip." noarrow>
+  <span>No Arrow</span>
+</b-tooltip>
diff --git a/public/Tooltip/placement.html b/public/Tooltip/placement.html
new file mode 100644
index 00000000..206f71b4
--- /dev/null
+++ b/public/Tooltip/placement.html
@@ -0,0 +1,66 @@
+<style>
+  .container {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 8px;
+    --banana-tooltip-max-width: 80px;
+  }
+
+  .placement-row {
+    display: flex;
+    gap: 8px;
+  }
+
+  .placement-row b-button {
+    width: 60px;
+  }
+</style>
+
+<div class="container">
+  <div class="placement-row">
+    <b-tooltip content="This is a tooltip." placement="topleft">
+      <b-button style="margin-left: 68px">TL</b-button>
+    </b-tooltip>
+    <b-tooltip content="This is a tooltip." placement="top">
+      <b-button>Top</b-button>
+    </b-tooltip>
+    <b-tooltip content="This is a tooltip." placement="topright">
+      <b-button style="margin-right: 68px">TR</b-button>
+    </b-tooltip>
+  </div>
+  <div class="placement-row" style="justify-content: space-between">
+    <b-tooltip content="This is a tooltip." placement="lefttop">
+      <b-button>LT</b-button>
+    </b-tooltip>
+    <b-tooltip content="This is a tooltip." placement="righttop">
+      <b-button>RT</b-button>
+    </b-tooltip>
+  </div>
+  <div class="placement-row" style="justify-content: space-between">
+    <b-tooltip content="This is a tooltip." placement="left">
+      <b-button>Left</b-button>
+    </b-tooltip>
+    <b-tooltip content="This is a tooltip." placement="right">
+      <b-button>Right</b-button>
+    </b-tooltip>
+  </div>
+  <div class="placement-row" style="justify-content: space-between">
+    <b-tooltip content="This is a tooltip." placement="leftbottom">
+      <b-button>LB</b-button>
+    </b-tooltip>
+    <b-tooltip content="This is a tooltip." placement="rightbottom">
+      <b-button>RB</b-button>
+    </b-tooltip>
+  </div>
+  <div class="placement-row">
+    <b-tooltip content="This is a tooltip." placement="bottomleft">
+      <b-button style="margin-left: 68px">BL</b-button>
+    </b-tooltip>
+    <b-tooltip content="This is a tooltip." placement="bottom">
+      <b-button>Bottom</b-button>
+    </b-tooltip>
+    <b-tooltip content="This is a tooltip." placement="bottomright">
+      <b-button style="margin-right: 68px">BR</b-button>
+    </b-tooltip>
+  </div>
+</div>
diff --git a/public/Tooltip/triggerAction.html b/public/Tooltip/triggerAction.html
new file mode 100644
index 00000000..d942e9be
--- /dev/null
+++ b/public/Tooltip/triggerAction.html
@@ -0,0 +1,6 @@
+<b-tooltip content="This is a tooltip.">
+  <b-button>Hover</b-button>
+</b-tooltip>
+<b-tooltip content="This is a tooltip." trigger-action="click">
+  <b-button style="margin-left: 16px">Click</b-button>
+</b-tooltip>