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

@@ -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 })

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

public/Rating/basicUsage.html

@@ -0,0 +1 @@
+<b-rating default-value="3"></b-rating>

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>

public/Rating/disabled.html

@@ -0,0 +1 @@
+<b-rating disabled default-value="3"></b-rating>

public/Rating/halfAllowed.html

@@ -0,0 +1 @@
+<b-rating default-value="2.5" half-allowed></b-rating>

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>

public/Rating/readonly.html

@@ -0,0 +1 @@
+<b-rating default-value="3" readonly></b-rating>

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>

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>

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>

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>

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>

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>

public/Stepper/inputRange.html

@@ -0,0 +1 @@
+<b-stepper value="-2" min="-1" max="5"></b-stepper>