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

feat: add new component Skeleton #136

Merged
merged 12 commits into from
Aug 10, 2023
Merged

feat: add new component Skeleton #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
6567e31
feat: add new component `Skeleton`
ziqisia Jun 29, 2023
0d8c3f0
feat: support rtl
ziqisia Jul 2, 2023
6a36969
fix: offset calculation
ziqisia Jul 4, 2023
689231a
feat: optimize
ziqisia Jul 5, 2023
0ec4bc5
chore: update test
ziqisia Jul 6, 2023
e50e30d
feat: optimize
ziqisia Jul 9, 2023
25d594c
feat: fixed gradient width
ziqisia Jul 16, 2023
b15183a
feat: animation duration token
ziqisia Jul 16, 2023
45df05c
feat: update token
ziqisia Jul 17, 2023
960a993
chore: demo update
TinaPeach Aug 2, 2023
8c74d25
chore: merge main
TinaPeach Aug 8, 2023
505017a
fix: tokens adjust
TinaPeach Aug 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/arcodesign/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export { default as PullRefresh } from './pull-refresh';
export { default as Radio } from './radio';
export { default as Rate } from './rate';
export { default as SearchBar } from './search-bar';
export { default as Skeleton } from './skeleton';
export { default as ShowMonitor } from './show-monitor';
export { default as Slider } from './slider';
export { default as Stepper } from './stepper';
Expand Down
101 changes: 101 additions & 0 deletions packages/arcodesign/components/skeleton/README.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
### Data Display

# Skeleton

Display a set of placeholder graphics during content loading

======

> Props

|Property|Description|Type|DefaultValue|
|----------|-------------|------|------|
|title|Show title placeholder|boolean \| SkeletonTitleProps|true|
|paragraph|Show paragraph placeholder|boolean \| SkeletonParagraphProps|true|
|avatar|Show Avatar placeholder|boolean \| SkeletonAvatarProps|false|
|grid|Show Grid placeholder\. When it's value is present, the paragraph, avatar or title placeholder will not be displayed, and four columns will be displayed by default|boolean \| SkeletonGridProps|false|
|showAnimation|Show loading effect|boolean|true|
|animation|Animation of loading effect, 'gradient' and 'breath' effects are optional|"gradient" \| "breath"|"gradient"|
|animationGradientColor|Highlight color of gradient animation|string|"rgba(0, 0, 0, 0.04)"|
|backgroundColor|Background color of skeleton item|string|"#F7F8FA"|
|children|Children element|ReactNode|null|
|className|Custom classname|string|""|
|style|Custom stylesheet|CSSProperties|{}|

> Refs

|Property|Description|Type|
|----------|-------------|------|
|dom|The outer DOM element of the component|HTMLDivElement|

> Skeleton.Node

|Property|Description|Type|DefaultValue|
|----------|-------------|------|------|
|children|Custom component content|ReactNode|null|
|className|Custom classname|string|""|
|style|Custom stylesheet|CSSProperties|{}|

> Skeleton.Title

|Property|Description|Type|DefaultValue|
|----------|-------------|------|------|
|width|The width of title|ReactText|"40%"|
|className|Custom classname|string|""|
|style|Custom stylesheet|CSSProperties|{}|

> Skeleton.Paragraph

|Property|Description|Type|DefaultValue|
|----------|-------------|------|------|
|rows|Number of lines for paragraph|number|3|
|width|The width of paragraph\. If width is an Array, it corresponds to the width of each line, otherwise it indicates the width of the last line|string \| number \| ReactText\[\]|"60%"|
|className|Custom classname|string|""|
|style|Custom stylesheet|CSSProperties|{}|

> Skeleton.Avatar

|Property|Description|Type|DefaultValue|
|----------|-------------|------|------|
|className|Custom classname|string|""|
|style|Custom stylesheet|CSSProperties|{}|

> Skeleton.Grid

|Property|Description|Type|DefaultValue|
|----------|-------------|------|------|
|columns|columns of grid|number|4|
|className|Custom classname|string|""|
|style|Custom stylesheet|CSSProperties|{}|

> SkeletonTitleProps

|Property|Description|Type|DefaultValue|
|----------|-------------|------|------|
|width|The width of title|ReactText|"40%"|
|className|Custom classname|string|""|
|style|Custom stylesheet|CSSProperties|{}|

> SkeletonParagraphProps

|Property|Description|Type|DefaultValue|
|----------|-------------|------|------|
|rows|Number of lines for paragraph|number|3|
|width|The width of paragraph\. If width is an Array, it corresponds to the width of each line, otherwise it indicates the width of the last line|string \| number \| ReactText\[\]|"60%"|
|className|Custom classname|string|""|
|style|Custom stylesheet|CSSProperties|{}|

> SkeletonAvatarProps

|Property|Description|Type|DefaultValue|
|----------|-------------|------|------|
|className|Custom classname|string|""|
|style|Custom stylesheet|CSSProperties|{}|

> SkeletonGridProps

|Property|Description|Type|DefaultValue|
|----------|-------------|------|------|
|columns|columns of grid|number|4|
|className|Custom classname|string|""|
|style|Custom stylesheet|CSSProperties|{}|
101 changes: 101 additions & 0 deletions packages/arcodesign/components/skeleton/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
### 信息展示

# 骨架屏 Skeleton

在内容加载过程中展示一组占位图形。

======

> 属性/Props

|参数|描述|类型|默认值|
|----------|-------------|------|------|
|title|是否显示标题占位图|boolean \| SkeletonTitleProps|true|
|paragraph|是否显示段落占位图|boolean \| SkeletonParagraphProps|true|
|avatar|是否显示头像占位图|boolean \| SkeletonAvatarProps|false|
|grid|是否显示金刚位占位图（如该参数非空时，默认展示四列金刚位，且不展示标题/段落/头像占位符）|boolean \| SkeletonGridProps|false|
|showAnimation|是否展示动画效果|boolean|true|
|animation|加载动画效果，可选“扫光”、“呼吸”两种效果|"gradient" \| "breath"|"gradient"|
|animationGradientColor|扫光动效高光颜色|string|"rgba(0, 0, 0, 0.04)"|
|backgroundColor|占位块背景色|string|"#F7F8FA"|
|children|子元素|ReactNode|null|
|className|自定义类名|string|""|
|style|自定义样式|CSSProperties|{}|

> 引用/Refs

|参数|描述|类型|
|----------|-------------|------|
|dom|最外层 DOM 元素|HTMLDivElement|

> Skeleton.Node

|参数|描述|类型|默认值|
|----------|-------------|------|------|
|children|自定义组件内容|ReactNode|null|
|className|自定义类名|string|""|
|style|自定义样式|CSSProperties|{}|

> Skeleton.Title

|参数|描述|类型|默认值|
|----------|-------------|------|------|
|width|标题占位图宽度|ReactText|"40%"|
|className|自定义类名|string|""|
|style|自定义样式|CSSProperties|{}|

> Skeleton.Paragraph

|参数|描述|类型|默认值|
|----------|-------------|------|------|
|rows|段落占位图的行数|number|3|
|width|段落占位图宽度，若为数组格式对应每行宽度，否则表示最后一行的宽度|string \| number \| ReactText\[\]|"60%"|
|className|自定义类名|string|""|
|style|自定义样式|CSSProperties|{}|

> Skeleton.Avatar

|参数|描述|类型|默认值|
|----------|-------------|------|------|
|className|自定义类名|string|""|
|style|自定义样式|CSSProperties|{}|

> Skeleton.Grid

|参数|描述|类型|默认值|
|----------|-------------|------|------|
|columns|金刚位列数|number|4|
|className|自定义类名|string|""|
|style|自定义样式|CSSProperties|{}|

> SkeletonTitleProps

|参数|描述|类型|默认值|
|----------|-------------|------|------|
|width|标题占位图宽度|ReactText|"40%"|
|className|自定义类名|string|""|
|style|自定义样式|CSSProperties|{}|

> SkeletonParagraphProps

|参数|描述|类型|默认值|
|----------|-------------|------|------|
|rows|段落占位图的行数|number|3|
|width|段落占位图宽度，若为数组格式对应每行宽度，否则表示最后一行的宽度|string \| number \| ReactText\[\]|"60%"|
|className|自定义类名|string|""|
|style|自定义样式|CSSProperties|{}|

> SkeletonAvatarProps

|参数|描述|类型|默认值|
|----------|-------------|------|------|
|className|自定义类名|string|""|
|style|自定义样式|CSSProperties|{}|

> SkeletonGridProps

|参数|描述|类型|默认值|
|----------|-------------|------|------|
|columns|金刚位列数|number|4|
|className|自定义类名|string|""|
|style|自定义样式|CSSProperties|{}|
Loading
Loading