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

[comp: divider]: feature divider component #32

Closed
1 task done
LaamGinghong opened this issue Dec 18, 2020 · 21 comments
Closed
1 task done

[comp: divider]: feature divider component #32

LaamGinghong opened this issue Dec 18, 2020 · 21 comments
Assignees
Labels
enhancement New feature or request
Milestone

Comments

@LaamGinghong
Copy link
Contributor

LaamGinghong commented Dec 18, 2020

  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

  • 支持水平、垂直两种分割线(默认为水平分割线);
  • 支持分割线中显示文字(垂直分割线不支持显示文字);
  • 支持分割线文字显示在左、中、右(默认为中间)三种位置;
  • 支持分割线文字显示为正常文本格式(默认为粗体);
  • 支持分割线样式为虚线;

What does the proposed API look like?

ix-divider

参数 说明 类型 默认值 备注
dashed 是否虚线 boolean false -
plain 文字是否显示为普通正文样式 boolean false -
position 文字显示位置 left | center | right center 文字显示的位置有三种默认位置;垂直分割线文字不作样式处理。
type 水平分割线还是垂直分割线 horizontal| vertical horizontal -
text 分割线显示的文字 slot - -
@danranVm
Copy link
Member

@huangtenghui @danranVm 负责此组件的 review, API 设计完成后请 @ 他们

@LaamGinghong
Copy link
Contributor Author

@danranVm @huangtenghui please review this API

@danranVm
Copy link
Member

很棒,不过有两点可能需要调整一下:

  • classNamestyle 的 API 不需要,因为我们本身是基于 template 的,用户可以直接在我们的的组件上使用 classstyle
  • 这几个默认值都可以放入到全局配置 useGlobalConfig 中,方便用户自定义

另外,关于 垂直分割线不支持修改为虚线, 是出于什么理由呢? And Design 中是支持的。

@LaamGinghong
Copy link
Contributor Author

很棒,不过有两点可能需要调整一下:

  • classNamestyle 的 API 不需要,因为我们本身是基于 template 的,用户可以直接在我们的的组件上使用 classstyle
  • 这几个默认值都可以放入到全局配置 useGlobalConfig 中,方便用户自定义

另外,关于 垂直分割线不支持修改为虚线, 是出于什么理由呢? And Design 中是支持的。

@danranVm className 和 style 是之前写 React 的习惯了,至于 垂直分割线不支持修改为虚线 的原因在于我看 ant 给出的 demo 中明确表示了垂直分割线是作为 行内 的分割线,因此分割线通常会比较短,如果设置为虚线的话可能会比较不好看。

当然如果是我本身理解错了 ant 的的意思,我觉得可以修改为与他们的特性保持着一直。

@danranVm
Copy link
Member

Ok, 垂直分割线还是支持虚线吧,这里没必要限制用户的使用。

我的建议就这些了。

@huangtenghui
Copy link

position希望能支持具体的位置,百分比这种,单单左中右满足不了使用场景,如图:
CE2EF27B-3EEC-4B71-8B3D-D8BAE4C51023

@LaamGinghong
Copy link
Contributor Author

position希望能支持具体的位置,百分比这种,单单左中右满足不了使用场景,如图:
CE2EF27B-3EEC-4B71-8B3D-D8BAE4C51023

@huangtenghui 那可以做成既支持左中右三种默认位置,也支持输入字符串来自控制文字距离左端的位置

@LaamGinghong
Copy link
Contributor Author

@huangtenghui @danranVm 已经修改了 API

@huangtenghui
Copy link

huangtenghui commented Dec 19, 2020

线是否应该支持粗细设置,颜色跟渐变?因为分割线在我们项目中更多的不是文本的隔离,而是模块间的隔离。有时候为了更直观可能会使用粗点的线,渐变色等等。这些靠style是否能满足?如果可以则无问题,不行的话,则需要考虑下

@danranVm
Copy link
Member

线是否应该支持粗细设置,颜色跟渐变?因为分割线在我们项目中更多的不是文本的隔离,而是模块间的隔离。有时候为了更直观可能会使用粗点的线,渐变色等等。这些靠style是否能满足?如果可以则无问题,不行的话,则需要考虑下

这个我认为暂时不需要支持吧,这会让组件变得复杂。
用户可以通过设置 class 来实现这类需求。

@LaamGinghong
Copy link
Contributor Author

线是否应该支持粗细设置,颜色跟渐变?因为分割线在我们项目中更多的不是文本的隔离,而是模块间的隔离。有时候为了更直观可能会使用粗点的线,渐变色等等。这些靠style是否能满足?如果可以则无问题,不行的话,则需要考虑下

这个似乎有点过度设计了,依照2b的场景,大部分情况下都不存在需要个性化的分割线,渐变和颜色我觉得依照设计稿来说应该是固定的,至于粗细这一点我觉得应该需要和设计进行讨论

@IDuxFE IDuxFE deleted a comment from huangtenghui Dec 19, 2020
@IDuxFE IDuxFE deleted a comment from huangtenghui Dec 19, 2020
@danranVm danranVm reopened this Dec 19, 2020
@danranVm
Copy link
Member

哈哈 他操作错了。 😆

@danranVm
Copy link
Member

danranVm commented Dec 19, 2020

@LaamGinghong API 暂时就这么定吧,期待你的实现 🥇

@huangtenghui
Copy link

哈哈 他操作错了。 😆

哈哈,手机网页操作不太习惯

@huangtenghui
Copy link

线是否应该支持粗细设置,颜色跟渐变?因为分割线在我们项目中更多的不是文本的隔离,而是模块间的隔离。有时候为了更直观可能会使用粗点的线,渐变色等等。这些靠style是否能满足?如果可以则无问题,不行的话,则需要考虑下

这个似乎有点过度设计了,依照2b的场景,大部分情况下都不存在需要个性化的分割线,渐变和颜色我觉得依照设计稿来说应该是固定的,至于粗细这一点我觉得应该需要和设计进行讨论

可以。

@coolyuantao
Copy link
Member

plain 这个配置是否有必要?如果只是加粗跟字体的变化,建议换个名字?另外这个本身已经支持插槽的方式了,感觉意义比较小

@LaamGinghong
Copy link
Contributor Author

plain 这个配置是否有必要?如果只是加粗跟字体的变化,建议换个名字?另外这个本身已经支持插槽的方式了,感觉意义比较小

这个 API 是为了和 ant 保持一致的。divider 的文字默认是加粗,加了 plain 是变回原来的普通字体

@LaamGinghong
Copy link
Contributor Author

@huangtenghui @danranVm 忘了说,分割线显示的文字以slot的形式注入,我修改了API,请review一下。🥲

@LaamGinghong
Copy link
Contributor Author

LaamGinghong commented Dec 22, 2020

image
同时我看了一下,antd确实是没有处理垂直分割线的文本样式,我们是否需要也支持 @huangtenghui @danranVm
这个是demo https://stackblitz.com/edit/react-lz95rj?file=App.jsx

@danranVm
Copy link
Member

  • text 也支持 props 传入一个 string?
  • 我们之前讨论的不是垂直分割线支不支持虚线么? 垂直分割线的时候,我们不对 text 做处理。

@danranVm danranVm added this to the v1.0.0 milestone Dec 25, 2020
@danranVm
Copy link
Member

fix with #62

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants