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: Result] add component Result #112

Closed
1 task done
LaamGinghong opened this issue Jan 5, 2021 · 11 comments · Fixed by #136
Closed
1 task done

[comp: Result] add component Result #112

LaamGinghong opened this issue Jan 5, 2021 · 11 comments · Fixed by #136
Assignees
@huangtenghui @danranVm @LaamGinghong
Labels
enhancement New feature or request

Comments

@LaamGinghong
Copy link
Contributor

LaamGinghong commented Jan 5, 2021 •
edited
Loading

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

用于反馈一系列操作任务的处理结果。

What problem does this feature solve?

当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。

  • 可以传入一个 v-slot: extra 来显示操作区；
  • 可以传入一个 url 来自定义显示的图标，也可以传入一个 v-slot: icon 来显示图标；
  • 可以传入 status 来控制按钮的颜色以及显示的图标；
  • 可以传入 title 和 subtitle 来显示对应的文字，同时也支持 slot 的形式，优先级高于 prop ；
  • 当需要显示复杂的说明时，可以传入一个 slot 来显示。

What does the proposed API look like?

ix-result

Props
名称 说明 类型 默认值 全局配置 备注
icon 自定义图标 string | v-slot: icon - - 传入一个 name，表示 ix-icon 的图标，用来替换默认的图标；也可以使用 slot 的形式传入，优先级高于 prop
status 结果的状态，决定图标和颜色 ResultStatus - ✅ -
subtitle subtitle 文字 string | v-slot: subtitle - - slot 形式优先级高于 prop
title title 文字 string | v-slot: title - - slot 形式优先级高于 prop 
type ResultStatus = 'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500'
Slots
名称 说明 参数类型 备注
default 复杂的情况说明，用于显示更多的信息 - -
extra 操作区 - -
@LaamGinghong LaamGinghong added the enhancement New feature or request label Jan 5, 2021
@LaamGinghong
Copy link
Contributor Author

@danranVm 麻烦review一下 API

@danranVm danranVm mentioned this issue Jan 5, 2021
Closed
95 tasks
@huangtenghui
Copy link

huangtenghui commented Jan 7, 2021 •
edited
Loading

title跟subtitle只支持string是否足够，需不需要支持html，solt，有些场景可能希望高亮subtitle的某些关键字或者悬浮显示详情；这种情况需是否支持，还是说直接用extra去实现？

@LaamGinghong
Copy link
Contributor Author

title跟subtitle只支持string是否足够，需不需要支持html，solt，有些场景可能希望高亮subtitle的某些关键字或者悬浮显示详情；这种情况需是否支持，还是说直接用extra去实现？

可以增加 slot 去支持，尽量不用 html 的方式吧，避免 xss 注入

@LaamGinghong
Copy link
Contributor Author

@huangtenghui @danranVm 已更新

@huangtenghui
Copy link

我这没啥问题了

@danranVm
Copy link
Member

danranVm commented Jan 7, 2021

传入一个地址覆盖默认图标，如果是动态地址请用 require 包裹
没有太理解这句话的意思，内部实现用 ix-icon 的话，不是传个 name 就ok 了么？

另外 403, 404,500 之类的背景图片素材，找一下视觉吧。

@LaamGinghong
Copy link
Contributor Author

传入一个地址覆盖默认图标，如果是动态地址请用 require 包裹
没有太理解这句话的意思，内部实现用 ix-icon 的话，不是传个 name 就ok 了么？

另外 403, 404,500 之类的背景图片素材，找一下视觉吧。

image
只有是这种自定义的图标才需要传地址或者是使用 slot，至于你说的是用 status 来控制。

或者说默认是用 status 来控制当前的状态以及该显示的图标，如果图标你不满意，可以通过传 icon 来覆盖默认的图标。

@danranVm
Copy link
Member

danranVm commented Jan 7, 2021 •
edited
Loading

地址 是指什么？应该就是我说的图标的 name？叫地址有点奇怪，还有 require 包裹又是什么意思？ 能写个用法的示例么？

我有点晕。

@LaamGinghong
Copy link
Contributor Author

地址 是指什么？应该就是我说的图标的 name？叫地址有点奇怪，还有 require 包裹又是什么意思？ 能写个用法的示例么？

我有点晕。

url 😓

@LaamGinghong
Copy link
Contributor Author

还有 require 包裹又是什么意思？

vue的模板里面不能解析变量，所以如果传进来的是一个变量需要 require 包裹

@danranVm
Copy link
Member

danranVm commented Jan 7, 2021

OK. 期待你的 PR

LaamGinghong added a commit to LaamGinghong/idux that referenced this issue Jan 13, 2021
@LaamGinghong
feat(comp: result): add result component
f960e45 
fix IDuxFE#112
@LaamGinghong LaamGinghong mentioned this issue Jan 13, 2021
Merged
13 tasks
LaamGinghong added a commit to LaamGinghong/idux that referenced this issue Jan 14, 2021
@LaamGinghong
feat(comp: result): add result component
f844921 
fix IDuxFE#112
LaamGinghong added a commit to LaamGinghong/idux that referenced this issue Jan 14, 2021
@LaamGinghong
feat(comp: result): add result component
f864651 
fix IDuxFE#112
danranVm pushed a commit that referenced this issue Jan 16, 2021
@LaamGinghong
feat(comp: result): add result component (#136)
a074cfd 
fix #112
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
No milestone
Development

Successfully merging a pull request may close this issue.

feat(comp: result): add result component LaamGinghong/idux
4 participants
@huangtenghui @hele10086 @danranVm @LaamGinghong