Merge pull request #160 from FriedRiceNoodles/feat/marquee

feat(marquee): added vertical parameter to marquee
FriedRiceNoodles · Oct 14, 2024 · cef5d70 · cef5d70
2 parents 4c2c736 + be364d7
commit cef5d70
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 16 deletions.
diff --git a/.changeset/pretty-apes-check.md b/.changeset/pretty-apes-check.md
@@ -0,0 +1,6 @@
+---
+'@banana-ui/banana': patch
+'@banana-ui/react': patch
+---
+
+Added vertical parameter to marquee.
diff --git a/docs/example/Marquee/demos/fixed.tsx b/docs/example/Marquee/demos/fixed.tsx
@@ -5,7 +5,7 @@
 
 import { Marquee } from '@banana-ui/react';
 
-export default function BasicUsage() {
+export default function Fixed() {
   const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
 
   return <Marquee fixed content={content} />;

diff --git a/docs/example/Marquee/demos/vertical.tsx b/docs/example/Marquee/demos/vertical.tsx
@@ -0,0 +1,24 @@
+/**
+ * title: 垂直滚动
+ * description: 传入 `vertical` 属性后，文案会垂直滚动。
+ */
+
+import { Marquee } from '@banana-ui/react';
+
+export default function Vertical() {
+  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 (
+    <Marquee
+      vertical
+      content={content}
+      duration={10}
+      style={
+        {
+          '--banana-marquee-height': '50px',
+        } as React.CSSProperties
+      }
+    />
+  );
+}
diff --git a/docs/example/Marquee/index.md b/docs/example/Marquee/index.md
@@ -20,6 +20,7 @@ demo:
 <code src="./demos/pauseWhenHover.tsx"></code>
 <code src="./demos/customStyle.tsx"></code>
 <code src="./demos/fixed.tsx"></code>
+<code src="./demos/vertical.tsx"></code>
 
 ## 属性 - Attributes & Properties
 
@@ -30,6 +31,7 @@ demo:
 | duration                                 | 滚动时长（单位：s）                                                         | `number`  | 20     |
 | pauseWhenHover <br /> (pause-when-hover) | 鼠标悬停时是否暂停                                                          | `boolean` | false  |
 | fixed                                    | 短文案固定，传入 `fixed` 属性后，如果文案宽度小于容器宽度，则文案不会滚动。 | `boolean` | false  |
+| vertical                                 | 垂直滚动                                                                    | `boolean` | false  |
 
 ## CSS Parts
 
@@ -40,9 +42,10 @@ demo:
 
 ## 样式变量
 
-| 变量                              | 说明             | 默认值 |
-| --------------------------------- | ---------------- | ------ |
-| --banana-marquee-color            | 跑马灯的文本颜色 | -      |
-| --banana-marquee-font-size        | 跑马灯的字体大小 | -      |
-| --banana-marquee-line-height      | 跑马灯的文字行高 | '1.4'  |
-| --banana-marquee-background-color | 跑马灯的背景色   | -      |
+| 变量                              | 说明             | 默认值                                          |
+| --------------------------------- | ---------------- | ----------------------------------------------- |
+| --banana-marquee-color            | 跑马灯的文本颜色 | -                                               |
+| --banana-marquee-font-size        | 跑马灯的字体大小 | -                                               |
+| --banana-marquee-line-height      | 跑马灯的文字行高 | '1'                                             |
+| --banana-marquee-background-color | 跑马灯的背景色   | -                                               |
+| --banana-marquee-height           | 跑马灯的高度     | `calc(var(--banana-marquee-line-height) * 1em)` |
diff --git a/packages/banana/src/marquee/index.styles.ts b/packages/banana/src/marquee/index.styles.ts
@@ -6,7 +6,7 @@ export default [
   componentStyles,
   css`
     :host {
-      line-height: var(--banana-marquee-line-height, ${unsafeCSS(Var.LineHeightDense)});
+      line-height: var(--banana-marquee-line-height, ${unsafeCSS(Var.LineHeightDenser)});
       color: var(--banana-marquee-color);
       font-size: var(--banana-marquee-font-size);
       overflow: hidden;
@@ -21,18 +21,26 @@ export default [
     }
 
     .content {
-      overflow: hidden;
       display: inline-block;
-      flex: 0 0 auto;
+      flex-shrink: 0;
       white-space: nowrap;
+      height: var(
+        --banana-marquee-height,
+        calc(var(--banana-marquee-line-height, ${unsafeCSS(Var.LineHeightDenser)}) * 1em)
+      );
+    }
+
+    .content:not(.content-fixed) {
+      animation: marquee-horizontal var(--banana-marquee-duration) linear infinite;
     }
 
-    .content-normal {
-      animation: marquee var(--banana-marquee-duration) linear infinite;
+    .content-vertical:not(.content-fixed) {
+      animation: marquee-vertical var(--banana-marquee-duration) linear infinite;
     }
 
-    .content-fixed {
-      transform: translateX(0);
+    .content-vertical {
+      flex-shrink: unset;
+      white-space: normal;
     }
 
     @media (any-hover: hover) {
@@ -41,7 +49,7 @@ export default [
       }
     }
 
-    @keyframes marquee {
+    @keyframes marquee-horizontal {
       0% {
         transform: translateX(var(--banana-marquee-width));
       }
@@ -50,5 +58,15 @@ export default [
         transform: translateX(-100%);
       }
     }
+
+    @keyframes marquee-vertical {
+      0% {
+        transform: translateY(var(--banana-marquee-height));
+      }
+
+      100% {
+        transform: translateY(-100%);
+      }
+    }
   `,
 ];
diff --git a/packages/banana/src/marquee/index.test.ts b/packages/banana/src/marquee/index.test.ts
@@ -20,6 +20,8 @@ describe('b-marquee', () => {
     expect(element.color).to.equal(undefined);
     expect(element.duration).to.equal(20);
     expect(element.pauseWhenHover).to.equal(false);
+    expect(element.fixed).to.equal(false);
+    expect(element.vertical).to.equal(false);
   });
 
   describe('custom content', () => {

diff --git a/packages/banana/src/marquee/index.ts b/packages/banana/src/marquee/index.ts
@@ -33,6 +33,9 @@ export default class BMarquee extends LitElement {
   @property({ type: Boolean, reflect: true })
   fixed = false;
 
+  @property({ type: Boolean, reflect: true })
+  vertical = false;
+
   @query('.marquee')
   _marquee: HTMLDivElement | undefined;
 
@@ -81,8 +84,8 @@ export default class BMarquee extends LitElement {
 
     const contentClass = classMap({
       content: true,
-      'content-normal': !shouldBeFixed,
       'content-fixed': shouldBeFixed,
+      'content-vertical': this.vertical,
     });
 
     return html`