Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add timeline #157

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

add timeline #157

wants to merge 2 commits into from

Conversation

mannix-lei
Copy link

@mannix-lei mannix-lei commented Nov 12, 2024

这个 PR 做了什么? (简要描述所做更改)
add timeline

这个 PR 是什么类型? (至少选择一个)

  • 错误修复(Bugfix) fix #{issue id}
  • 新功能(Feature) resolve #{issue id}
  • 代码重构(Refactor)
  • 文档修改(Docs)
  • 代码风格更新(Code style update)
  • 类型描述更新(TypeScript definition update)
  • 其他,请描述(Other, please describe):

这个 PR 涉及以下平台:

  • 未涉及平台修改
  • 所有小程序
  • 微信小程序
  • 支付宝小程序
  • 百度小程序
  • 字节跳动小程序
  • QQ 轻应用
  • 京东小程序
  • 快应用平台(QuickApp)
  • Web 平台(H5)
  • 移动端(React-Native)

@auto-assign auto-assign bot requested a review from onlychild November 12, 2024 03:10
Copy link

changeset-bot bot commented Nov 12, 2024

🦋 Changeset detected

Latest commit: a837026

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@ossa/loki Major
ossa-demo Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

vercel bot commented Nov 12, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
ossa-demo ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 12, 2024 3:13am
1 Skipped Deployment
Name Status Preview Comments Updated (UTC)
ossa-doc ⬜️ Ignored (Inspect) Visit Preview Nov 12, 2024 3:13am

@CaedmonW
Copy link
Collaborator

感谢贡献~🎉🎉🎉

Copy link
Collaborator

@CaedmonW CaedmonW left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

是否可以支持横向的展示呢?参考AntD Mobile 的 Steps 组件

Comment on lines +12 to +18
font-size: $--font-size-2;
line-height: 1.1;
text-align: left;

&--sub {
color: $--desc-timeline-color;
font-size: $--font-size-1;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

默认的 font-size 对移动端来说有点小了

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个没问题,可以调大点

Comment on lines +49 to +67
<View className={classNames(dotClass)}>
{icon && <OsIcon
className={classNames(`ossa-icon--${icon}`)}
type={icon}
customStyle={{ color: iconColor }}
size={16}
></OsIcon>}
</View>
<View className='ossa-timeline-item__content'>
<View className='ossa-timeline-item__content-item'>{title}</View>
{content.map((sub, subIndex) => (
<View
className='ossa-timeline-item__content-item ossa-timeline-item__content--sub'
key={subIndex}
>
{sub}
</View>
))}
</View>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

icon需要能够和文字对齐

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

样式我再优化下

import { OsTimelineProps } from "../../../types/index";

function getClassObject(props: OsTimelineProps) {
const { pending = false } = props;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

组件维度的 pending 属性,似乎不是很合理

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

需要有一个属性用来判断节点是否完成,这里你建议用什么方式来做?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

感觉timeline单纯控制最后一个的状态有点鸡肋,像steps一样每个节点都有自己的状态实用性会更好些

height: $--dot-timeline-size;
border: 1PX solid transparent;
border-radius: 10px;
border-color: $--timeline-dot-border-color;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

默认颜色需要和当前组件库的主颜色保持一致

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

颜色这里我刚开始使用默认主题色的,但是考虑到节点的完成/错误/警告等样式会跟默认主题色重复,所以用了蓝色处理,这里你建议怎么优化下?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants