feat: 新增高级描述组件

llq0802 · Jan 13, 2024 · e5c5f89 · e5c5f89
1 parent c73c25d
commit e5c5f89
Show file tree

Hide file tree

Showing 6 changed files with 398 additions and 0 deletions.
diff --git a/sidebar.ts b/sidebar.ts
@@ -64,6 +64,10 @@ export default {
           title: 'LEditTable-高级编辑表格',
           link: '/components/edit-table',
         },
+        {
+          title: 'LDescriptions-高级描述列表',
+          link: '/components/descriptions',
+        },
         {
           title: 'LList-高级列表',
           link: '/components/list',

diff --git a/src/Descriptions/demos/Demo1.tsx b/src/Descriptions/demos/Demo1.tsx
@@ -0,0 +1,26 @@
+import { LDescriptions } from 'lighting-design';
+
+export default function Demo1() {
+  return (
+    <div>
+      <LDescriptions
+        colon={false}
+        title="大萨达"
+        extra="发送"
+        titleWidth={120}
+        columns={[
+          { title: '姓名', dataIndex: 'name' },
+          { title: 'Age', dataIndex: 'age' },
+          { title: 'Address', dataIndex: 'address' },
+          { title: 'Desc', dataIndex: 'desc' },
+        ]}
+        record={{
+          name: '李岚清',
+          age: 20,
+          address: <div style={{ color: 'red', fontWeight: 700, fontSize: 18 }}>北京</div>,
+          desc: '姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名',
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/Descriptions/index.less b/src/Descriptions/index.less
@@ -0,0 +1,7 @@
+@prefix-cls: ~'lightd-descriptions';
+
+.@{prefix-cls} {
+  .ant-form-item.ligthd-from-item .ant-form-item-label > label::after {
+    color: var(--lightd-descriptions-colon-color, rgba(0, 0, 0, 88%));
+  }
+}
diff --git a/src/Descriptions/index.md b/src/Descriptions/index.md
@@ -0,0 +1,79 @@
+---
+title: LDescriptions
+toc: content
+nav:
+  path: /components
+---
+
+# LDescriptions
+
+用于显示描述信息。
+
+## 代码演示
+
+### 基础用法
+
+<code src='./demos/Demo1.tsx' background='#f5f5f5'></code>
+
+## API
+
+:::warning{title=注意}
+
+- 其中 `LColorChromePicker` `LColorSketchPicker` 在颜色模式为 `rgb` 时，支持设置透明度。
+
+- 在表单中推荐使用 [LFormItemColor](/components/form-item-color)
+
+  :::
+
+```ts
+import { LDescriptions } from 'lighting-design';
+```
+
+### LDescriptionsProps
+
+| 参数         | 说明                                                                      | 类型                                     | 默认值         |
+| ------------ | ------------------------------------------------------------------------- | ---------------------------------------- | -------------- |
+| title        | 左上角标题                                                                | `ReactNode`                              | `- `           |
+| extra        | 右上角额外元素                                                            | `ReactNode`                              | `true`         |
+| className    | 根容器类名                                                                | `string`                                 | `-`            |
+| style        | 根容器样式                                                                | `CSSProperties`                          | `-`            |
+| headerStyle  | 头部容器样式                                                              | `CSSProperties`                          | `-`            |
+| columns      | 列字段配置                                                                | [LDescriptionItem](/LDescriptionItem)[]  | `[]`           |
+| column       | 一行展示几列, 或`{ xs: 8, sm: 16, md: 24, ...}`的配置来设置响应式展示几列 | `number\| ColProps`                      | `3`            |
+| gutter       | 每一项的间距                                                              | `ColProps['gutter']`                     | `16`           |
+| layout       | 布局模式                                                                  | `'horizontal' \| 'inline' \| 'vertical'` | `'horizontal'` |
+| titleAlign   | 每一项标题对齐方式                                                        | `'left' \| 'right'`                      | `'right'`      |
+| titleWidth   | 每一项标题宽度                                                            | `number \| string`                       | `-`            |
+| titleWrap    | 每一项标题过长时是否换行                                                  | `boolean`                                | `false`        |
+| colon        | 每一项标题后面是否加上`：`符号                                            | `boolean`                                | `true`         |
+| isLastBlock  | 最后一项标题是否占满`包含块`                                              | `boolean`                                | `true`         |
+| marginBottom | 每一项的`marginBottom`值                                                  | `number \| string`                       | `16`           |
+| loading      | loading                                                                   | `boolean \| SpinProps`                   | `-`            |
+| record       | 字段数据源                                                                | `Record<string, ReactNode>`              | `-`            |
+| renderTitle  | 重新渲染每一项的标题                                                      | `FormProps['requiredMark']`              | `-`            |
+
+### LDescriptionsItem
+
+```ts
+export type LDescriptionItem = {
+  /** 当前项的标题 */
+  title?: React.ReactNode;
+  /** 当前项的key */
+  dataIndex: string;
+  /** ColProps['span'] */
+  span?: number;
+  /** 当前项的样式 */
+  style?: React.CSSProperties;
+  /** 当前项标题宽 */
+  titleWidth?: number | string;
+  /**`ColProps`的配置来设置响应式展示几列  { xs: 8, sm: 16, md: 24, ...}*/
+  col?: ColProps;
+  /** Col的样式 */
+  colStyle?: React.CSSProperties;
+  tooltip?: FormItemProps['tooltip'];
+  /** 是否展示星星 */
+  required?: boolean;
+  /** 重新渲染当前项 */
+  render?: (curVal: ReactNode, record: Record<string, ReactNode>, index: number) => ReactNode;
+};
+```