Merge pull request #74 from FriedRiceNoodles/docs/marquee

docs(marquee): added html source code
FriedRiceNoodles · Mar 16, 2024 · 53548f9 · 53548f9
2 parents e72a2fa + 0847a4e
commit 53548f9
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 24 deletions.
diff --git a/docs/example/Marquee/demos/basicUsage.tsx b/docs/example/Marquee/demos/basicUsage.tsx
@@ -3,15 +3,10 @@
  */
 
 import { Marquee } from '@banana-ui/react';
-import React from 'react';
 
 export default function BasicUsage() {
   const content =
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.';
 
-  return (
-    <div>
-      <Marquee content={content} />
-    </div>
-  );
+  return <Marquee content={content} />;
 }
diff --git a/docs/example/Marquee/demos/customColor.tsx b/docs/example/Marquee/demos/customColor.tsx
@@ -4,17 +4,16 @@
  */
 
 import { Marquee } from '@banana-ui/react';
-import React from 'react';
 
 export default function CustomColor() {
   const content =
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.';
 
   return (
-    <div>
+    <>
       <Marquee content={content} color="orange" />
       <Marquee content={content} color="#BB4430" />
       <Marquee content={content} color="rgba(0,0,0,.5)" />
-    </div>
+    </>
   );
 }
diff --git a/docs/example/Marquee/demos/duration.tsx b/docs/example/Marquee/demos/duration.tsx
@@ -4,16 +4,15 @@
  */
 
 import { Marquee } from '@banana-ui/react';
-import React from 'react';
 
 export default function Duration() {
   const content =
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.';
 
   return (
-    <div>
+    <>
       <Marquee content={content} duration={30} />
       <Marquee content={content} duration={10} />
-    </div>
+    </>
   );
 }
diff --git a/docs/example/Marquee/demos/pauseWhenHover.tsx b/docs/example/Marquee/demos/pauseWhenHover.tsx
@@ -4,15 +4,10 @@
  */
 
 import { Marquee } from '@banana-ui/react';
-import React from 'react';
 
 export default function PauseWhenHover() {
   const content =
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.';
 
-  return (
-    <div>
-      <Marquee content={content} pauseWhenHover />
-    </div>
-  );
+  return <Marquee content={content} pauseWhenHover />;
 }
diff --git a/docs/example/Marquee/index.md b/docs/example/Marquee/index.md
@@ -22,12 +22,12 @@ demo:
 
 ## 属性 - Attributes & Properties
 
-| 属性           | 说明                | 类型      | 默认值 |
-| -------------- | ------------------- | --------- | ------ |
-| content        | 跑马灯的文本内容    | `string`  | ''     |
-| color          | 跑马灯的文本颜色    | `string`  | ''     |
-| duration       | 滚动时长（单位：s） | `number`  | 20     |
-| pauseWhenHover | 鼠标悬停时是否暂停  | `boolean` | false  |
+| 属性                                     | 说明                | 类型      | 默认值 |
+| ---------------------------------------- | ------------------- | --------- | ------ |
+| content                                  | 跑马灯的文本内容    | `string`  | ''     |
+| color                                    | 跑马灯的文本颜色    | `string`  | ''     |
+| duration                                 | 滚动时长（单位：s） | `number`  | 20     |
+| pauseWhenHover <br /> (pause-when-hover) | 鼠标悬停时是否暂停  | `boolean` | false  |
 
 ## CSS Parts
 

diff --git a/public/Marquee/basicUsage.html b/public/Marquee/basicUsage.html
@@ -0,0 +1,2 @@
+<b-marquee
+  content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."></b-marquee>
diff --git a/public/Marquee/customColor.html b/public/Marquee/customColor.html
@@ -0,0 +1,6 @@
+<b-marquee color="orange"
+  content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."></b-marquee>
+<b-marquee color="#BB4430"
+  content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."></b-marquee>
+<b-marquee color="rgba(0,0,0,.5)"
+  content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."></b-marquee>
diff --git a/public/Marquee/customStyle.html b/public/Marquee/customStyle.html
@@ -0,0 +1,14 @@
+<style>
+  .foo::part(base) {
+    background-color: rgba(255, 0, 0, 0.8);
+    padding: 10px 0;
+    color: #fff;
+    font-family: "Gill Sans", sans-serif;
+  }
+</style>
+
+<b-marquee
+  style="--banana-marquee-color: orange; --banana-marquee-font-size: 12px; --banana-marquee-line-height: 2; --banana-marquee-background-color: rgba(0,0,0,.5);"
+  content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."></b-marquee>
+<b-marquee class="foo"
+  content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."></b-marquee>
diff --git a/public/Marquee/duration.html b/public/Marquee/duration.html
@@ -0,0 +1,4 @@
+<b-marquee duration="30"
+  content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."></b-marquee>
+<b-marquee duration="10"
+  content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."></b-marquee>
diff --git a/public/Marquee/pauseWhenHover.html b/public/Marquee/pauseWhenHover.html
@@ -0,0 +1,2 @@
+<b-marquee pause-when-hover
+  content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."></b-marquee>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<b-marquee
		content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."></b-marquee>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<b-marquee pause-when-hover
		content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."></b-marquee>