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.

Sign up for GitHub

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

Jump to bottom

[comp: space]: feature space component #63

Closed
1 task done
LaamGinghong opened this issue Dec 23, 2020 · 11 comments · Fixed by #97
Closed
1 task done

[comp: space]: feature space component #63

LaamGinghong opened this issue Dec 23, 2020 · 11 comments · Fixed by #97
Assignees
@huangtenghui @danranVm @LaamGinghong
Labels
enhancement New feature or request
Milestone
v1.0.0

Comments

@LaamGinghong
Copy link
Contributor

LaamGinghong commented Dec 23, 2020 •
edited
Loading

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

设置组件之间的间距，避免组件紧贴在一起，拉开统一的空间。

  • 适合行内元素的水平间距
  • 可以设置各种水平对齐方式

What problem does this feature solve?

核心原理是通过 Flex 布局对组件内部的元素进行重新排布：

  • 可以通过设置 align 设置不同的对齐方式：start | center | end | baseline ；
  • 可以通过设置 direction 设置 水平 、垂直 两种间隔方式；
  • 可以设置 size 设置间隔的大小，其中 size 有三种默认大小：'small'|'middle'|'large' ，如遇到无法满足的情况，还可以传入一个 数字 自定义间隔大小。同时 size 允许传入一个数组，用来控制每个间隔的大小，数组的长度必须与传入的 children 长度 - 1 相等，否则会抛出警告；
  • 可以以 slot 的形式传入一个 split 分隔符；
  • 可以设置 wrap 来设置是否自动换行，仅在 horizontal 时有效。

What does the proposed API look like?

props

参数 说明 类型 全局配置 默认值 备注
align 对齐方式 start | center | end | baseline - baseline -
direction 间距方式 vertical | horizontal - horizontal -
size 间距大小 Size | Size[] small - 有三个预设间距大小，除此之外还可以传入一个数字自定义间距大小，还可以传入一个数组来控制每个间距的大小（数组长度需等于间距个数，否则组件会抛出警告）
split 设置拆分 string - - 设置间隔分割符，当传入 split 时，内部间距会被分隔符替代；除了这种方式，你还可以设置 v-slot: split 的方式设置分隔符，优先级高于 prop
wrap 是否换行 boolean - false 仅在 horizontal 时生效 
type Size = 'small' | 'middle' | 'large' | number

slots

属性 说明
default 需要被间隔的内容
split 分隔符
@LaamGinghong LaamGinghong added the enhancement New feature or request label Dec 23, 2020
@LaamGinghong LaamGinghong changed the title [comp: descriptions]: feature descriptions component [comp: space]: feature space component Dec 23, 2020
@LaamGinghong
Copy link
Contributor Author

@danranVm 麻烦安排一下review API

@danranVm
Copy link
Member

@huangtenghui @danranVm 负责 review

@danranVm danranVm mentioned this issue Dec 24, 2020
Closed
95 tasks
@huangtenghui
Copy link

huangtenghui commented Dec 24, 2020 •
edited
Loading

看了文档，然后去ant design的demo，发现跟我想象的不太一样，我想象的是居中是自适应整个父容器宽度，居于中间位置；看看我们是直接把这个组件做成我们想要的还是说先按ant design的搞，我们想要的后面加？目前看ant design的我们业务使用场景不多； @danranVm @coolyuantao

@LaamGinghong
Copy link
Contributor Author

看了文档，然后去ant design的demo，发现跟我想象的不太一样，我想象的是居中是自适应整个父容器宽度，居于中间位置；看看我们是直接把这个组件做成我们想要的还是说先按ant design的搞，我们想要的后面加？目前看ant design的我们业务使用场景不多； @danranVm @coolyuantao

@huangtenghui @danranVm 找个时间讨论一下？我不知道你们的想法是咋样的

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

@LaamGinghong 就先按照你的API 设计来吧。

不过 align 感觉还是用 start、center、end 吧，因为是有水平和垂直两种对齐方式的。

@LaamGinghong
Copy link
Contributor Author

@LaamGinghong 就先按照你的API 设计来吧。

不过 align 感觉还是用 start、center、end 吧，因为是有水平和垂直两种对齐方式的。

有道理，已经修改了

@LaamGinghong
Copy link
Contributor Author

@huangtenghui @danranVm 麻烦请重新review API

@danranVm
Copy link
Member

  • size 是否也应该支持下 全局配置 ? 类型为 'small'|'middle'|'large' ， 数组的情况不考虑。
  • split 的类型 改成 string\|Slot，备注改成： 可以通过 v-solt:split 设置分隔符，插槽的优先级高于 props

@danranVm
Copy link
Member

@LaamGinghong 其他的没什么问题了，期待你的 PR

@LaamGinghong
Copy link
Contributor Author

@danranVm 修改了一点

@LaamGinghong
Copy link
Contributor Author

@danranVm 修改了一点

打算就按照这个来做了

@LaamGinghong LaamGinghong mentioned this issue Dec 31, 2020
Merged
13 tasks
LaamGinghong added a commit to LaamGinghong/idux that referenced this issue Jan 4, 2021
@LaamGinghong
feat(comp: space): add component space
2c43db1 
fix IDuxFE#63
LaamGinghong added a commit to LaamGinghong/idux that referenced this issue Jan 4, 2021
@LaamGinghong
feat(comp: space): add component space
220cb3b 
fix IDuxFE#63
LaamGinghong added a commit to LaamGinghong/idux that referenced this issue Jan 4, 2021
@LaamGinghong
feat(comp: space): add component space
ad39de2 
fix IDuxFE#63
LaamGinghong added a commit to LaamGinghong/idux that referenced this issue Jan 4, 2021
@LaamGinghong
feat(comp: space): add component space
7ebdb43 
fix IDuxFE#63
LaamGinghong added a commit to LaamGinghong/idux that referenced this issue Jan 5, 2021
@LaamGinghong
feat(comp: space): add component space
1cceb60 
fix IDuxFE#63
LaamGinghong added a commit to LaamGinghong/idux that referenced this issue Jan 5, 2021
@LaamGinghong
feat(comp: space): add component space
50bbebd 
fix IDuxFE#63
LaamGinghong added a commit to LaamGinghong/idux that referenced this issue Jan 5, 2021
@LaamGinghong
feat(comp: space): add component space
4a9d878 
fix IDuxFE#63
LaamGinghong added a commit to LaamGinghong/idux that referenced this issue Jan 5, 2021
@LaamGinghong
feat(comp: space): add component space
ed38d5e 
fix IDuxFE#63
LaamGinghong added a commit to LaamGinghong/idux that referenced this issue Jan 5, 2021
@LaamGinghong
feat(comp: space): add component space
b8a8251 
fix IDuxFE#63
danranVm pushed a commit that referenced this issue Jan 5, 2021
@LaamGinghong
feat(comp: space): add component space (#97)
a002858 
fix #63
CruellyJoHn pushed a commit to CruellyJoHn/components that referenced this issue Jan 22, 2021
@clfeng @CruellyJoHn
feat(cdk:utils): add type check util function (IDuxFE#100)
7bc31ac 
fix IDuxFE#77

build: upgrade vite (IDuxFE#102)

refactor(comp:all): updalte all components ts definition (IDuxFE#103)

docs: update all components index.zh.md (IDuxFE#105)

* docs: update gen script

fix(comp: divider): dynamic slot (IDuxFE#104)

fix IDuxFE#76

feat(comp: spin): add spin component (IDuxFE#101)

fix IDuxFE#72

refactor(comp:core): useGlobalConfig (IDuxFE#107)

fix: vite traverse filename config (IDuxFE#106)

docs: update spin component demo (IDuxFE#109)

fix(comp: divider): slots rerender (IDuxFE#110)

refactor(comp:i18n): update useI18n to useLocale (IDuxFE#111)

feat(comp: space): add component space (IDuxFE#97)

fix IDuxFE#63

fix(comp:all): solot dynamic load (IDuxFE#114)

fix: add engines to package.json (IDuxFE#117)

yarn start error because of the low version of Node.js

fix IDuxFE#116

refactor: script gen type structure (IDuxFE#118)

refactor: script gen types template (IDuxFE#119)

* Update the template to make it more simpler.

style(scripts): add brace style eslint rule (IDuxFE#123)

fix IDuxFE#122

refactor(comp:all): export type declaration from current component (IDuxFE#124)

docs: contribution (IDuxFE#125)

update contributing.zh and add contributing.en

fix(comp: image): export type to fix vite error (IDuxFE#127)

feat(cdk:forms): add useFormControl and Validtors (IDuxFE#121)

* test(cdk:forms): add test

fix IDuxFE#115

docs(cdk:forms): add validators docs (IDuxFE#128)

re IDuxFE#115

docs: modify components' docs' type (IDuxFE#131)

feat(comp: empty): add component empty (IDuxFE#132)

* feat(comp:empty): update and add test

fix IDuxFE#54

feat(cdk:utils): add hasOwnProperty function (IDuxFE#137)

fix(comp: badge): overflowCount not work (IDuxFE#135)

fix IDuxFE#134

test(comp:badge,icon): fix warning (IDuxFE#140)

feat(comp: result): add result component (IDuxFE#136)

fix IDuxFE#112

feat(cdk:forms): add formGroup and formArray (IDuxFE#139)

* feat(cdk:forms): add test

re IDuxFE#115

feat(cdk:forms): add utils (IDuxFE#141)

re IDuxFE#115

refactor(cdk:forms): `modelRef` renamed to `valueRef` (IDuxFE#142)

re IDuxFE#115

feat(cdk:forms): add watchValue and watchStatus (IDuxFE#143)

re IDuxFE#115

refactor(cdk:forms): add dirty status and marks `valueRef` to readonly (IDuxFE#144)

re IDuxFE#115

feat(cdk:forms): setValue support configuration options (IDuxFE#146)

re IDuxFE#115

feat: add global types (IDuxFE#150)

docs(cdk:forms): add docs and demo (IDuxFE#149)

fix IDuxFE#115

refactor(cdk:forms): update typescript defintions (IDuxFE#151)

* docs(cdk:forms): update docs

feat(cdk: subject): add subject (IDuxFE#155)

fix IDuxFE#154

feat(comp: typography): add directive typography (IDuxFE#148)

* docs(comp: typography): modify docs

* feat(comp: typography): add type check

* feat(comp: typography): style

* test(comp: typography): add test

fix IDuxFE#130

feature(comp:card): 1.修改dom结构 2.补全css样式 3.重跑单测

feat(comp:card): 1.解决合并冲突

feat(comp:card): add card component
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@huangtenghui huangtenghui

@danranVm danranVm

@LaamGinghong LaamGinghong

Labels
enhancement New feature or request
Projects
None yet
Milestone
v1.0.0
Development

Successfully merging a pull request may close this issue.

feat(comp: space): add component space LaamGinghong/idux
3 participants
@huangtenghui @danranVm @LaamGinghong