Merge branch 'main' into feature/slider

DEVELOP_GUIDE.md

@@ -105,7 +105,7 @@ npm run start
 
 ### 组件页路由配置
 
-每一个组件页，都是一个 md 文件，参考 `/site/sidebar.config.js` 已有定义，直接按照模板添加即可
+每一个组件页，都是一个 md 文件，参考 `/site/sidebar.config.ts` 已有定义，直接按照模板添加即可
 
 ```javascript
 {

site/sidebar.config.ts

@@ -130,12 +130,24 @@ export default [
  name: 'Data',
  type: 'component', // 组件文档
  children: [
+ {
+ title: 'Avatar 头像',
+ name: 'avatar',
+ path: '/components/avatar',
+ component: () => import('tdesign-web-components/avatar/README.md'),
+ },
  {
  title: 'Calendar 日历',
  name: 'calendar',
  path: '/components/calendar',
  // component: () => import('tdesign-web-components/calendar/README.md'),
  },
+ {
+ title: 'Collapse 折叠面板',
+ name: 'Collapse',
+ path: '/components/collapse',
+ component: () => import('tdesign-web-components/collapse/README.md'),
+ },
  {
  title: 'Table 表格',
  name: 'table',

src/avatar/README.md

@@ -0,0 +1,73 @@
+---
+title: Avatar 头像
+description: 用图标、图片、字符的形式展示用户或事物信息
+isComponent: true
+usage: { title: '', description: '' }
+spline: base
+---
+
+### 头像类型
+
+头像提供了 3 种不同类型的头像：图标头像、图片头像、字符头像
+{{ base }}
+
+### 头像形状
+
+头像默认支持两种形状：round、circle，用户也可自定义设置头像形状
+{{ shape }}
+
+### 头像大小
+
+头像默认支持三种大小：small、medium、large，用户可自定义设置大小
+{{ size }}
+
+### 字符头像大小自适应
+
+头像支持字符自适应，即字符长度过长时，头像可自动调整字符以便呈现完整内容
+{{ adjust }}
+
+### 组合头像
+
+组合头像展现
+{{ group }}
+
+### 组合头像偏移方向
+
+组合头像可控制层叠方向
+{{ group-cascading }}
+
+### 组合头像个数
+
+组合头像可设置最大展示个数，超过则隐藏显示
+{{ group-max }}
+
+## API
+
+### Avatar Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+alt | String | - | 头像替换文本，仅当图片加载失败时有效 | N
+children | TNode | - | 子元素内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+content | TNode | - | 子元素内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+hideOnLoadFailed | Boolean | false | 加载失败时隐藏图片 | N
+icon | TElement | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+image | String | - | 图片地址 | N
+imageProps | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/avatar/type.ts) | N
+shape | String | circle | 形状。可选项：circle/round。TS 类型：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[详细类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/avatar/type.ts) | N
+size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件存在 AvatarGroup，默认值便由 AvatarGroup.size 决定 | N
+onError | Function | | TS 类型：`(context: { e: ImageEvent }) => void`<br/>图片加载失败时触发 | N
+
+### AvatarGroup Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+cascading | String | 'right-up' | 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上。可选项：left-up/right-up。TS 类型：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/avatar/type.ts) | N
+collapseAvatar | TNode | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+max | Number | - | 能够同时显示的最多头像数量 | N
+popupProps | Object | - | 头像右上角提示信息。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/avatar/type.ts) | N
+size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N

src/avatar/_example/adjust.tsx

@@ -0,0 +1,18 @@
+import 'tdesign-web-components/avatar';
+import 'tdesign-web-components/space';
+
+import { Component } from 'omi';
+
+export default class Avatar extends Component {
+ static css = 't-avatar{}';
+
+ render() {
+ return (
+ <t-space>
+ <t-avatar style={{ marginRight: '40px' }}>王</t-avatar>
+ <t-avatar style={{ marginRight: '40px' }}>王亿</t-avatar>
+ <t-avatar style={{ marginRight: '40px' }}>王亿亿</t-avatar>
+ </t-space>
+ );
+ }
+}

src/avatar/_example/base.tsx

@@ -0,0 +1,25 @@
+import 'tdesign-web-components/image';
+import 'tdesign-web-components/avatar';
+import 'tdesign-web-components/space';
+import 'tdesign-web-components/icon';
+
+// import 'tdesign-icons-omi/user'
+import { Component } from 'omi';
+
+export default class Avatar extends Component {
+ static css = 't-avatar{}';
+
+ render() {
+ return (
+ <t-space>
+ <t-avatar icon={<t-icon name="user-1"></t-icon>} style={{ marginRight: '40px' }} />
+ <t-avatar
+ image="https://tdesign.gtimg.com/site/avatar.jpg"
+ hideOnLoadFailed={false}
+ style={{ marginRight: '40px' }}
+ />
+ <t-avatar style={{ marginRight: '40px' }}>W</t-avatar>
+ </t-space>
+ );
+ }
+}

src/avatar/_example/group-cascading.tsx

@@ -0,0 +1,28 @@
+import 'tdesign-web-components/avatar';
+import 'tdesign-web-components/space';
+import 'tdesign-web-components/avatar/avatar-group';
+import 'tdesign-web-components/icon';
+
+import { Component } from 'omi';
+
+export default class AvatarGroupCascading extends Component {
+ static css = 't-avatar{}';
+
+ render() {
+ return (
+ <t-space direction="vertical">
+ <t-avatar-group>
+ <t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
+ <t-avatar>W</t-avatar>
+ <t-avatar icon={<t-icon name="user-1"></t-icon>}></t-avatar>
+ </t-avatar-group>
+
+ <t-avatar-group cascading="left-up">
+ <t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
+ <t-avatar>W</t-avatar>
+ <t-avatar icon={<t-icon name="user-1"></t-icon>}></t-avatar>
+ </t-avatar-group>
+ </t-space>
+ );
+ }
+}

src/avatar/_example/group-max.tsx

@@ -0,0 +1,35 @@
+import 'tdesign-web-components/avatar';
+import 'tdesign-web-components/space';
+import 'tdesign-web-components/avatar/avatar-group';
+import 'tdesign-web-components/icon';
+import 'tdesign-web-components/image';
+
+import { Component } from 'omi';
+
+export default class AvatarGroupMax extends Component {
+ static css = 't-avatar{}';
+
+ render() {
+ return (
+ <t-space direction="vertical">
+ <t-avatar-group size="large" max={2}>
+ <t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
+ <t-avatar>Avatar</t-avatar>
+ <t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
+ </t-avatar-group>
+
+ <t-avatar-group size="large" max={2} collapseAvatar={<t-icon name="ellipsis" />}>
+ <t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
+ <t-avatar>Avatar</t-avatar>
+ <t-avatar icon={<t-icon name="user-1"></t-icon>}></t-avatar>
+ </t-avatar-group>
+
+ <t-avatar-group size="large" max={2} collapseAvatar="more">
+ <t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
+ <t-avatar>Avatar</t-avatar>
+ <t-avatar icon={<t-icon name="user-1"></t-icon>}></t-avatar>
+ </t-avatar-group>
+ </t-space>
+ );
+ }
+}

src/avatar/_example/group.tsx

@@ -0,0 +1,29 @@
+import 'tdesign-web-components/avatar';
+import 'tdesign-web-components/space';
+import 'tdesign-web-components/avatar/avatar-group';
+import 'tdesign-web-components/icon';
+
+// import 'tdesign-icons-omi/user'
+import { Component } from 'omi';
+
+export default class AvatarGroup extends Component {
+ static css = 't-avatar{}';
+
+ render() {
+ return (
+ <t-space direction="vertical">
+ <t-avatar-group>
+ <t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
+ <t-avatar>W</t-avatar>
+ <t-avatar icon={<t-icon name="user-1"></t-icon>}></t-avatar>
+ </t-avatar-group>
+
+ <t-avatar-group size="large">
+ <t-avatar image="https://tdesign.gtimg.com/site/avatar.jpg"></t-avatar>
+ <t-avatar>W</t-avatar>
+ <t-avatar icon={<t-icon name="user-1"></t-icon>}></t-avatar>
+ </t-avatar-group>
+ </t-space>
+ );
+ }
+}

src/avatar/_example/shape.tsx

@@ -0,0 +1,17 @@
+import 'tdesign-web-components/avatar';
+import 'tdesign-web-components/space';
+
+import { Component } from 'omi';
+
+export default class AvatarShape extends Component {
+ render() {
+ return (
+ <t-space>
+ <t-avatar style={{ marginRight: '40px' }}>W</t-avatar>
+ <t-avatar shape="round" style={{ marginRight: '40px' }}>
+ W
+ </t-avatar>
+ </t-space>
+ );
+ }
+}

src/avatar/_example/size.tsx

@@ -0,0 +1,68 @@
+import 'tdesign-web-components/avatar';
+import 'tdesign-web-components/space';
+
+import { Component } from 'omi';
+
+export default class AvatarSize extends Component {
+ render() {
+ return (
+ <t-space direction="vertical" size="large">
+ <t-space align="center">
+ <t-avatar size="small" style={{ marginRight: '40px' }}>
+ W
+ </t-avatar>
+ <t-avatar size="medium" style={{ marginRight: '40px' }}>
+ W
+ </t-avatar>
+ <t-avatar size="large" style={{ marginRight: '40px' }}>
+ W
+ </t-avatar>
+ <t-avatar size="100px" style={{ marginRight: '40px' }}>
+ W
+ </t-avatar>
+ </t-space>
+ <t-space align="center">
+ <t-avatar shape="round" size="small" style={{ marginRight: '40px' }}>
+ W
+ </t-avatar>
+ <t-avatar shape="round" size="medium" style={{ marginRight: '40px' }}>
+ W
+ </t-avatar>
+ <t-avatar shape="round" size="large" style={{ marginRight: '40px' }}>
+ W
+ </t-avatar>
+ <t-avatar shape="round" size="100px" style={{ marginRight: '40px' }}>
+ W
+ </t-avatar>
+ </t-space>
+ <t-space align="center">
+ <t-avatar
+ alt="test"
+ image="https://tdesign.gtimg.com/site/avatar.jpg"
+ shape="round"
+ size="small"
+ style={{ marginRight: '40px' }}
+ ></t-avatar>
+ <t-avatar
+ image="https://tdesign.gtimg.com/site/avatar.jpg"
+ shape="round"
+ size="medium"
+ style={{ marginRight: '40px' }}
+ ></t-avatar>
+ <t-avatar
+ image="https://tdesign.gtimg.com/site/avatar.jpg"
+ shape="round"
+ size="large"
+ style={{ marginRight: '40px' }}
+ ></t-avatar>
+ <t-avatar
+ image="https://tdesign.gtimg.com/site/avatar.jpg"
+ shape="round"
+ size="100px"
+ style={{ marginRight: '40px' }}
+ ></t-avatar>
+ </t-space>
+ </t-space>
+ );
+ }
+}