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: Skeleton] add Skeleton component #94

Closed
1 task
ssccchh opened this issue Dec 31, 2020 · 10 comments
Closed
1 task

[comp: Skeleton] add Skeleton component #94

ssccchh opened this issue Dec 31, 2020 · 10 comments
Assignees
Labels
enhancement New feature or request
Milestone

Comments

@ssccchh
Copy link

ssccchh commented Dec 31, 2020

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

What problem does this feature solve?

在需要等待加载内容的位置提供一个占位图形组合。

  • 适用于图文列表信息比较多的场景
  • 可以被 Spin 完全代替,但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。
  • 提供预设模板,自由组合

What does the proposed API look like?

API

Ix-skeleton

Props

名称 说明 类型 默认值 全局配置 备注
animation 是否展示动画效果 boolean false - -
width 设置组件宽度 number | string 100% - -
height 设置组件高度 number| string 100% - -
loading 是否开启占位图 boolean false - false的值只有在 default 槽中有内容时才会工作。
type 字符串分隔要创建的骨架组件列表 string undefined - required骨架组件列表,例如 type="text@3"type="card, list-item"。将根据提供的字符串递归生成相应的框架。 还支持多个元素的简写,例如 article@3paragraph@2 ,它们将生成 3 article skeletons and 2 paragraph 骨架。具体的预设列表会根据后续具体业务场景来建立。
types 将与预定义选项结合使用的自定义类型对象。 有关可用的预定义选项的列表 object {} - type搭配使用,建立自定义的骨架模板。
名称 说明
default 默认插槽,放置骨架屏子组件
@ssccchh ssccchh added the enhancement New feature or request label Dec 31, 2020
@danranVm danranVm mentioned this issue Dec 31, 2020
95 tasks
@danranVm danranVm added this to the v1.0.0 milestone Dec 31, 2020
@danranVm
Copy link
Member

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

@ssccchh
Copy link
Author

ssccchh commented Feb 12, 2021

@danranVm @zymoplastic 麻烦大佬review一下

@danranVm
Copy link
Member

danranVm commented Feb 15, 2021

和 antd 的设计差别有点大,能写一两个使用 demo 看看嘛?

@zymoplastic
Copy link
Contributor

zymoplastic commented Feb 15, 2021

type 感觉有点像制造一些小的 DSL 了, 能不能详细说下需求, 如果需求不够的话能不能考虑使用其他办法解决, 因为自建 DSL 可能带来一些学习成本和阅读障碍问题, 需要有合适的场景.

目前来看 type 的字符串的用处目前我看到只有提供 skeleton item 组合和个数两种用途, 而格式简单分析如下:

var: [a-zA-Z\_\$][0-9a-zA-Z\_\$]*
item: 
     `(var)@(\d)`,
     var

itemList:
     item,
     `(item)+(item)...`  // 没看到有说符号, 假设是 +

type: itemList           // type 属性接受的字符串定义

首先, 给 item 传参放到了一个新的属性 types 上面, 这就变成了两张皮了, 好奇怎么知道是给哪一个 item 传值, 难道是指定第 n 个 item?
其次, 目前的功能完全可以只放到 types 里面,增加 name 和 length 的属性即可, 也就是说 JSON/JSON-Schema 的表达能力完全足够了.

@ssccchh
Copy link
Author

ssccchh commented Feb 15, 2021

type 感觉有点像制造一些小的 DSL 了, 能不能详细说下需求, 如果需求不够的话能不能考虑使用其他办法解决, 因为自建 DSL 可能带来一些学习成本和阅读障碍问题, 需要有合适的场景.

目前来看 type 的字符串的用处目前我看到只有提供 skeleton item 组合和个数两种用途, 而格式简单分析如下:

var: [a-zA-Z\_\$][0-9a-zA-Z\_\$]*
item: 
     `(var)@(\d)`,
     var

itemList:
     item,
     `(item)+(item)...`  // 没看到有说符号, 假设是 +

type: itemList           // type 属性接受的字符串定义

首先, 给 item 传参放到了一个新的属性 types 上面, 这就变成了两张皮了, 好奇怎么知道是给哪一个 item 传值, 难道是指定第 n 个 item?
其次, 目前的功能完全可以只放到 types 里面,增加 name 和 length 的属性即可, 也就是说 JSON/JSON-Schema 的表达能力完全足够了.

types可以改为json格式, 降低dsl带来的学习成本,方案的话用这种模板搭积木的方式ok不?@danranVm 你觉着如何

@zymoplastic
Copy link
Contributor

typetypes 能不能单独拆出来作为 pro 提供, 基础组件的还是像 antd 一样提供功能?

@ssccchh
Copy link
Author

ssccchh commented Feb 15, 2021

最终方案:

  1. 采用搭积木的方式,单元组件提供上述 apitypes 外的全部功能。
  2. types额外提供预设模板的功能放到pro中实现。
  3. types采用配置项形式注入模板。

DEMO

<ix-skeleton type="card"></ix-skeleton>
<ix-skeleton-pro type="custom" types="{custom: [name: 'card', length: 2']}"></ix-skeleton-pro>

Type SkeletonType = 'card' | 'avator' | 'list-item';

Interface Types {
  [key: string]: {name: SkeletonType, length: number}[];
}

@danranVm
Copy link
Member

最终方案:

  1. 采用搭积木的方式,单元组件提供上述 apitypes 外的全部功能。
  2. types额外提供预设模板的功能放到pro中实现。
  3. types采用配置项形式注入模板。

DEMO

<ix-skeleton type="card"></ix-skeleton>
<ix-skeleton-pro type="custom" types="{custom: [name: 'card', length: 2']}"></ix-skeleton-pro>

Type SkeletonType = 'card' | 'avator' | 'list-item';

Interface Types {
  [key: string]: {name: SkeletonType, length: number}[];
}

那就按照这个来吧。

@zymoplastic
Copy link
Contributor

我没问题了

@ssccchh
Copy link
Author

ssccchh commented Aug 2, 2021

重新设计Skeleton组件,这个issue关闭

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