feat(components): [auto-scroll-text] Add auto scroll text component

[eveningwater]

Implement auto scroll text component with horizontal and vertical scrolling support Add manual control methods for start, pause, resume, reset and stop scrolling Include status tracking and display for better user experience Support auto-start configuration and hover pause functionality Integrate with Element Plus Alert component for consistent UI design

Please make sure these boxes are checked before submitting your PR, thank you!

• [ ✅ ] Make sure you follow contributing guide English | (中文 | Español | Français).
• [ ✅ ] Make sure you are merging your commits to dev branch.
• [ ✅ ] Add some descriptions and refer to relative issues for your PR.

[pull-request-triage[bot]]

👋 @eveningwater, seems like this is your first time contribution to element-plus. Please make sure that you have read our guidelines and code of conduct before making a contribution.

[github-actions[bot]]

[btea]

It seems that you have not made any changes to the dependent packages, and the pnpm-lock.yaml file does not need to be committed.

[btea]

Sorry, I may not have made it clear. You don't need to delete the pnpm-lock.yaml file, you just need to not commit your local changes to it to the remote repository.

[eveningwater]

Sorry, I may not have made it clear. You don't need to delete the pnpm-lock.yaml file, you just need to not commit your local changes to it to the remote repository.

Update done.

[pkg-pr-new[bot]]

Open in StackBlitz

npm i https://pkg.pr.new/element-plus/element-plus@21755

commit: 495c82b

[pkg-pr-new[bot]]

Open in StackBlitz

npm i https://pkg.pr.new/element-plus/element-plus@21755

commit: 0c2ab92

[github-actions[bot]]

🧪 Playground Preview: https://element-plus.run/?pr=21755 Please comment the example via this playground if needed.

[btea]

cc @element-plus/backers

[kooriookami]

It seems scroll can be a part of el-alert, no need to add a new component.

[eveningwater]

It seems scroll can be a part of el-alert, no need to add a new component.

I recommend keeping the current independent component design for the following reasons:

Design Principles: It adheres to the Single Responsibility Principle, where each component focuses on its core functionality.

Practical Requirements: Auto-scrolling text is a universal need that extends beyond just alert scenarios.

User Experience: Independent components provide richer control options and better user experience.

Maintainability: The code structure is clearer and easier to maintain and extend.

This approach ensures better separation of concerns, enhanced reusability, and improved overall code quality while meeting diverse user needs across different use cases.

[zhixiaotong]

Personally, I think this component is good, but whether the name marquee is more appropriate, and it should not be bound to alert, but should be independent. There are still quite a few scenarios for seamless scrolling text applications, which can be simple text, but can also be a list with separators. ^^

[eveningwater]

Personally, I think this component is good, but whether the name marquee is more appropriate, and it should not be bound to alert, but should be independent. There are still quite a few scenarios for seamless scrolling text applications, which can be simple text, but can also be a list with separators. ^^

Is it used like the carousel and carousel-item component?marquee name is a good name indeed. I will adjust it.

[zhixiaotong]

Just like this. (This is just my idea, it is best to ask the team members of the ep for their opinions, and it is best not to make changes before being confirmed, so as not to waste energy and time.) @kooriookami @btea

• https://marquee.joyco.studio/
• https://www.react-fast-marquee.com/demo
• ...

[eveningwater]

Just like this. (This is just my idea, it is best to ask the team members of the ep for their opinions, and it is best not to make changes before being confirmed, so as not to waste energy and time.)

marquee

It’s okay, I’ve made adjustments, now it’s the marquee and marquee-item components

[eveningwater]

Just like this. (This is just my idea, it is best to ask the team members of the ep for their opinions, and it is best not to make changes before being confirmed, so as not to waste energy and time.) @kooriookami @btea

• https://marquee.joyco.studio/
• https://www.react-fast-marquee.com/demo
• ...

The examples have also been adjusted, As shown below.

<div class="demo-marquee">
  <h3>基础用法</h3>
  <el-marquee>
    <el-marquee-item>这是一个基础的跑马灯组件示例</el-marquee-item>
  </el-marquee>

  <h3>自定义内容</h3>
  <el-marquee>
    <el-marquee-item>
      <el-tag type="success">成功标签</el-tag>
      <el-tag type="warning">警告标签</el-tag>
      <el-tag type="info">信息标签</el-tag>
      <el-tag type="danger">错误标签</el-tag>
    </el-marquee-item>
  </el-marquee>

  <h3>多个项目</h3>
  <el-marquee>
    <el-marquee-item>第一个项目</el-marquee-item>
    <el-marquee-item>第二个项目</el-marquee-item>
    <el-marquee-item>第三个项目</el-marquee-item>
  </el-marquee>
</div>