-
Notifications
You must be signed in to change notification settings - Fork 33
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
base: main
Are you sure you want to change the base?
add timeline #157
Conversation
🦋 Changeset detectedLatest commit: a837026 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
感谢贡献~🎉🎉🎉 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
是否可以支持横向的展示呢?参考AntD Mobile 的 Steps 组件
font-size: $--font-size-2; | ||
line-height: 1.1; | ||
text-align: left; | ||
|
||
&--sub { | ||
color: $--desc-timeline-color; | ||
font-size: $--font-size-1; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
默认的 font-size 对移动端来说有点小了
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
这个没问题,可以调大点
<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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
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; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
组件维度的 pending
属性,似乎不是很合理
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
需要有一个属性用来判断节点是否完成,这里你建议用什么方式来做?
There was a problem hiding this comment.
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; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
默认颜色需要和当前组件库的主颜色保持一致
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
颜色这里我刚开始使用默认主题色的,但是考虑到节点的完成/错误/警告等样式会跟默认主题色重复,所以用了蓝色处理,这里你建议怎么优化下?
这个 PR 做了什么? (简要描述所做更改)
add timeline
这个 PR 是什么类型? (至少选择一个)
这个 PR 涉及以下平台: