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: spin] add spin component #72

Closed
1 task
liuzaijiang opened this issue Dec 25, 2020 · 5 comments
Closed
1 task

[comp: spin] add spin component #72

liuzaijiang opened this issue Dec 25, 2020 · 5 comments
Assignees
Labels
enhancement New feature or request
Milestone

Comments

@liuzaijiang
Copy link
Contributor

liuzaijiang commented Dec 25, 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?

CONFIGS

参数 说明 类型 默认值 是否支持全局配置
spinning 是否显示加载遮罩层 boolean true false
icon 加载图标名称 string loading true
tip 加载提示文字描述 string false true
tipAlign 文字描述与加载图标的排列方式 string vertical(vertical:文字排列在图标下方;horizontal: 文字排列在图标同水平方向的后方) true
size icon 和 tip大小控制 string(small | medium | large) small true

SLOTS

名称 说明
defalut 需要遮罩的内容区域

@danranVm @Usualminds

@liuzaijiang liuzaijiang added the enhancement New feature or request label Dec 25, 2020
@danranVm danranVm mentioned this issue Dec 25, 2020
95 tasks
@danranVm danranVm added this to the v1.0.0 milestone Dec 25, 2020
@danranVm
Copy link
Member

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

@Usualminds
Copy link
Member

@liuzaijiang 针对 API 设计,有如下建议:

  • tip 的类型 string | boolean 建议直接使用 string ,组件内部根据是否存在该配置项来决定展示该文字描述与否
  • tipAlign 选项是否有 horizontal 场景,水平的展示效果个人感觉有点奇怪,这个看下是否需要交互把关下,另,该配置如果需要, tipStyle 中是否可以集成该配置?

@danranVm 看下,是否有其他建议

@liuzaijiang
Copy link
Contributor Author

@liuzaijiang 针对 API 设计,有如下建议:

  • tip 的类型 string | boolean 建议直接使用 string ,组件内部根据是否存在该配置项来决定展示该文字描述与否
  • tipAlign 选项是否有 horizontal 场景,水平的展示效果个人感觉有点奇怪,这个看下是否需要交互把关下,另,该配置如果需要, tipStyle 中是否可以集成该配置?

@danranVm 看下,是否有其他建议

@Usualminds
第一点采纳
第二点中tipAlign还是需要提供horizontal的配置,方便交互的设计,我们默认还是vertical就行;另外,tipStyle和iconStyle是原生DOM的 style属性,配置说明已经加上,不能把tipAlign集成

@danranVm
Copy link
Member

有以下几点建议:

  • iconStyletipStyle 移除,新增一个 wrapperClassName 的API,支持全局配置。
  • iconName => icon 即可
  • 建议添加 delay 用于防止闪烁
  • tipAlign 确实需要和视觉确认下,看有无必要。

@liuzaijiang
Copy link
Contributor Author

有以下几点建议:

  • iconStyletipStyle 移除,新增一个 wrapperClassName 的API,支持全局配置。
  • iconName => icon 即可
  • 建议添加 delay 用于防止闪烁
  • tipAlign 确实需要和视觉确认下,看有无必要。

1,2点采纳,3点目前没有发现其价值,先不实现,4点我们是提供多个选择给用户,没有影响
另外再增加size属性,控制icon和tip的大小

CruellyJoHn pushed a commit to CruellyJoHn/components that referenced this issue Jan 22, 2021
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
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants