@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/grid/README.en-US.md

@@ -0,0 +1,92 @@
+:: BASE_DOC ::
+
+## API
+
+### Grid Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+align | String | center | options: left/center | N
+border | Boolean / Object | false | Typescript：`boolean \| { color?: string; width?: string; style?: 'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'groove' \| 'inset' \| 'outset' }` | N
+column | Number | 4 | \- | N
+gutter | Number | - | \- | N
+hover | Boolean | false | \- | N
+theme | String | default | options: default/card | N
+
+### Grid Slots
+
+name | Description
+-- | --
+\- | \-
+
+### Grid External Classes
+
+className | Description
+-- | --
+t-class | \-
+
+
+### GridItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+badge-props | Object | {} | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/grid-item/type.ts) | N
+description | String | - | \- | N
+icon | String / Object | - | \- | N
+image | String | - | \- | N
+image-props | Object | {} | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/grid-item/type.ts) | N
+jump-type | String | navigate-to | options: redirect-to/switch-tab/relaunch/navigate-to | N
+layout | String | vertical | options: vertical/horizontal | N
+text | String | - | \- | N
+url | String | - | \- | N
+
+### GridItem Events
+
+name | params | description
+-- | -- | --
+click | \- | \-
+
+### GridItem Slots
+
+name | Description
+-- | --
+\- | \-
+description | \-
+image | \-
+text | \-
+
+### GridItem External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-content | \-
+t-class-description | \-
+t-class-image | \-
+t-class-text | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-grid-bg-color | @bg-color-container | -
+--td-grid-card-radius | @radius-large | -
+--td-grid-item-bg-color | @bg-color-container | -
+--td-grid-item-description-color | @text-color-placeholder | -
+--td-grid-item-description-font | @font-body-small | -
+--td-grid-item-description-padding-top | 0 | -
+--td-grid-item-horizontal-text-description-top | 0 | -
+--td-grid-item-horizontal-text-padding-left | 0 | -
+--td-grid-item-hover-bg-color | @bg-color-secondarycontainer | -
+--td-grid-item-image-middle-width | 80rpx | -
+--td-grid-item-image-small-width | 64rpx | -
+--td-grid-item-image-width | 96rpx | -
+--td-grid-item-padding | 32rpx | -
+--td-grid-item-text-color | @text-color-primary | -
+--td-grid-item-text-font | @font-body-medium | -
+--td-grid-item-text-middle-font | @font-body-small | -
+--td-grid-item-text-padding-top | 16rpx | -
+--td-grid-item-text-small-font | @font-body-extraSmall | -

package/dist/grid/README.md

@@ -0,0 +1,143 @@
+---
+title: Grid 宫格
+description: 用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。
+spline: data
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TGrid from '@tdesign/uniapp/grid/grid.vue';
+import TGridItem from '@tdesign/uniapp/grid-item/grid-item.vue';
+```
+
+### 组件类型
+基础宫格
+
+{{ base }}
+
+带说明的宫格
+
+{{ description }}
+
+带边框的宫格
+
+{{ border }}
+
+带徽章的宫格
+
+{{ badge }}
+
+可滑动的宫格
+
+{{ scroll }}
+
+### 组件样式
+
+可传图标的宫格
+
+{{ icon-grid }}
+
+多行宫格
+
+{{ multiple }}
+
+卡片宫格
+
+{{ card }}
+
+
+## API
+
+### Grid Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+align | String | center | 内容对齐方式。可选项：left/center | N
+border | Boolean / Object | false | 边框，默认不显示。值为 true 则显示默认边框，值类型为 object 则表示自定义边框样式。TS 类型：`boolean \| { color?: string; width?: string; style?: 'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'groove' \| 'inset' \| 'outset' }` | N
+column | Number | 4 | 每一行的列数量；为 0 时等于固定大小 | N
+gutter | Number | - | 间隔大小 | N
+hover | Boolean | false | 是否开启点击反馈 | N
+theme | String | default | 宫格的风格。可选项：default/card | N
+
+### Grid Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+
+### Grid External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+
+
+### GridItem Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+badge-props | Object | {} | 透传至 Badge 属性。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/grid-item/type.ts) | N
+description | String | - | 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点 | N
+icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` | N
+image | String | - | 图片，可以是图片地址，也可以自定义图片节点，值为 slot 的时候才能使用插槽 | N
+image-props | Object | {} | 透传至 Image 组件。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/grid-item/type.ts) | N
+jump-type | String | navigate-to | 链接跳转类型。可选项：redirect-to/switch-tab/relaunch/navigate-to | N
+layout | String | vertical | 内容布局方式。可选项：vertical/horizontal | N
+text | String | - | 文本，可以通过 Props 传入文本，也可以自定义标题节点 | N
+url | String | - | 点击后的跳转链接 | N
+
+### GridItem Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | \- | 点击子项后触发
+
+### GridItem Slots
+
+名称 | 描述
+-- | --
+\- | 默认插槽，自定义内容区域内容
+description | 自定义 `description` 模块内容
+image | 自定义 `image` 模块内容
+text | 自定义 `text` 模块内容
+
+### GridItem External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-content | 内容样式类
+t-class-description | 描述样式类
+t-class-image | 图片样式类
+t-class-text | 文本样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-grid-bg-color | @bg-color-container | -
+--td-grid-card-radius | @radius-large | -
+--td-grid-item-bg-color | @bg-color-container | -
+--td-grid-item-description-color | @text-color-placeholder | -
+--td-grid-item-description-font | @font-body-small | -
+--td-grid-item-description-padding-top | 0 | -
+--td-grid-item-horizontal-text-description-top | 0 | -
+--td-grid-item-horizontal-text-padding-left | 0 | -
+--td-grid-item-hover-bg-color | @bg-color-secondarycontainer | -
+--td-grid-item-image-middle-width | 80rpx | -
+--td-grid-item-image-small-width | 64rpx | -
+--td-grid-item-image-width | 96rpx | -
+--td-grid-item-padding | 32rpx | -
+--td-grid-item-text-color | @text-color-primary | -
+--td-grid-item-text-font | @font-body-medium | -
+--td-grid-item-text-middle-font | @font-body-small | -
+--td-grid-item-text-padding-top | 16rpx | -
+--td-grid-item-text-small-font | @font-body-extraSmall | -

package/dist/grid/grid.css

@@ -0,0 +1,13 @@
+.t-grid {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--td-grid-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+}
+.t-grid__content {
+  width: auto;
+}
+.t-grid--card {
+  margin: 0 32rpx;
+  border-radius: var(--td-grid-card-radius, var(--td-radius-large, 18rpx));
+  overflow: hidden;
+}

package/dist/grid/grid.vue

@@ -0,0 +1,94 @@
+<template>
+  <view
+    :style="tools._style([customStyle])"
+    :class="tools.cls(classPrefix, [theme]) + ' ' + tClass"
+  >
+    <view
+      v-if="column > 0"
+      :class="classPrefix + '__content'"
+      :style="contentStyle"
+    >
+      <slot />
+    </view>
+    <scroll-view
+      v-else
+      scroll-x
+      scroll-with-animation
+      :class="classPrefix + '__content'"
+      :style="'white-space: nowrap;' + contentStyle"
+    >
+      <slot />
+    </scroll-view>
+  </view>
+</template>
+<script>
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import { isObject } from '../common/validator';
+import props from './props';
+import tools from '../common/utils.wxs';
+import { ParentMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-grid`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: ['t-class'],
+  mixins: [ParentMixin(RELATION_MAP.GridItem)],
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      contentStyle: '',
+      tools,
+    };
+  },
+  watch: {
+    column: 'watchCallback',
+    hover: 'watchCallback',
+    align: 'watchCallback',
+    gutter: 'watchCallback',
+    border: 'watchCallback',
+  },
+  mounted() {
+    this.updateContentStyle();
+  },
+  methods: {
+    watchCallback() {
+      this.updateContentStyle();
+      this.doForChild(t => t.updateStyle?.());
+    },
+    doForChild(action) {
+      this.children?.forEach(action);
+    },
+    updateContentStyle() {
+      const contentStyles = [];
+      const marginStyle = this.getContentMargin();
+      marginStyle && contentStyles.push(marginStyle);
+      this.contentStyle = contentStyles.join(';');
+    },
+
+    // 判断需不需要在content上加负margin以实现gutter间距
+    getContentMargin() {
+      const { gutter } = this;
+      let { border } = this;
+
+      if (!border) return `margin-bottom:-${gutter}rpx; margin-right:-${gutter}rpx`;
+      if (!isObject(border)) border = {} ;
+      const { width = 2 } = border ;
+      return `margin-bottom:-${width}rpx; margin-right:-${width}rpx`;
+    },
+  },
+});
+</script>
+<style scoped>
+@import './grid.css';
+</style>

package/dist/grid/props.ts

@@ -0,0 +1,43 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdGridProps } from './type';
+export default {
+  /** 内容对齐方式 */
+  align: {
+    type: String,
+    default: 'center' as TdGridProps['align'],
+    validator(val: TdGridProps['align']): boolean {
+      if (!val) return true;
+      return ['left', 'center'].includes(val);
+    },
+  },
+  /** 边框，默认不显示。值为 true 则显示默认边框，值类型为 object 则表示自定义边框样式 */
+  border: {
+    type: [Boolean, Object],
+    default: false as TdGridProps['border'],
+  },
+  /** 每一行的列数量；为 0 时等于固定大小 */
+  column: {
+    type: Number,
+    default: 4,
+  },
+  /** 间隔大小 */
+  gutter: {
+    type: Number,
+  },
+  /** 是否开启点击反馈 */
+  hover: Boolean,
+  /** 宫格的风格 */
+  theme: {
+    type: String,
+    default: 'default' as TdGridProps['theme'],
+    validator(val: TdGridProps['theme']): boolean {
+      if (!val) return true;
+      return ['default', 'card'].includes(val);
+    },
+  },
+};

package/dist/grid/type.ts

@@ -0,0 +1,43 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdGridProps {
+  /**
+   * 内容对齐方式
+   * @default center
+   */
+  align?: 'left' | 'center';
+  /**
+   * 边框，默认不显示。值为 true 则显示默认边框，值类型为 object 则表示自定义边框样式
+   * @default false
+   */
+  border?:
+    | boolean
+    | {
+        color?: string;
+        width?: string;
+        style?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'inset' | 'outset';
+      };
+  /**
+   * 每一行的列数量；为 0 时等于固定大小
+   * @default 4
+   */
+  column?: number;
+  /**
+   * 间隔大小
+   */
+  gutter?: number;
+  /**
+   * 是否开启点击反馈
+   * @default false
+   */
+  hover?: boolean;
+  /**
+   * 宫格的风格
+   * @default default
+   */
+  theme?: 'default' | 'card';
+}

package/dist/grid-item/README.en-US.md

@@ -0,0 +1,65 @@
+:: BASE_DOC ::
+
+## API
+
+### GridItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+badgeProps | Object | null | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/grid-item/type.ts) | N
+description | String / TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
+icon | String / Object | - | \- | N
+image | String / TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
+imageProps | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/grid-item/type.ts) | N
+jumpType | String | navigate-to | options: redirect-to/switch-tab/relaunch/navigate-to | N
+layout | String | vertical | options: vertical/horizontal | N
+text | String / TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
+url | String | - | \- | N
+onClick | Function |  | Typescript：`() => void`<br/> | N
+
+### GridItem Events
+
+name | params | description
+-- | -- | --
+click | \- | \-
+
+### GridItem Slots
+
+name | Description
+-- | --
+- | \-
+description | \-
+image | \-
+text | \-
+
+### GridItem External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-content | \-
+t-class-description | \-
+t-class-image | \-
+t-class-text | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-grid-item-bg-color | @bg-color-container | -
+--td-grid-item-description-color | @text-color-placeholder | -
+--td-grid-item-description-font | @font-body-small | -
+--td-grid-item-description-padding-top | 0 | -
+--td-grid-item-horizontal-text-description-top | 0 | -
+--td-grid-item-horizontal-text-padding-left | 0 | -
+--td-grid-item-hover-bg-color | @bg-color-secondarycontainer | -
+--td-grid-item-image-middle-width | 80rpx | -
+--td-grid-item-image-small-width | 64rpx | -
+--td-grid-item-image-width | 96rpx | -
+--td-grid-item-padding | 32rpx | -
+--td-grid-item-text-color | @text-color-primary | -
+--td-grid-item-text-font | @font-body-medium | -
+--td-grid-item-text-middle-font | @font-body-small | -
+--td-grid-item-text-padding-top | 16rpx | -
+--td-grid-item-text-small-font | @font-body-extraSmall | -

package/dist/grid-item/README.md

@@ -0,0 +1,65 @@
+:: BASE_DOC ::
+
+## API
+
+### GridItem Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+badgeProps | Object | null | 透传至 Badge 属性。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/grid-item/type.ts) | N
+description | String / TNode | - | 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
+icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` | N
+image | String / TNode | - | 图片，可以是图片地址，也可以自定义图片节点，值为 slot 的时候才能使用插槽。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
+imageProps | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/grid-item/type.ts) | N
+jumpType | String | navigate-to | 链接跳转类型。可选项：redirect-to/switch-tab/relaunch/navigate-to | N
+layout | String | vertical | 内容布局方式。可选项：vertical/horizontal | N
+text | String / TNode | - | 文本，可以通过 Props 传入文本，也可以自定义标题节点。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
+url | String | - | 点击后的跳转链接 | N
+onClick | Function |  | TS 类型：`() => void`<br/>点击子项后触发 | N
+
+### GridItem Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | \- | 点击子项后触发
+
+### GridItem Slots
+
+名称 | 描述
+-- | --
+- | 默认插槽，自定义内容区域内容
+description | 自定义 `description` 模块内容
+image | 自定义 `image` 模块内容
+text | 自定义 `text` 模块内容
+
+### GridItem External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-content | 内容样式类
+t-class-description | 描述样式类
+t-class-image | 图片样式类
+t-class-text | 文本样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-grid-item-bg-color | @bg-color-container | -
+--td-grid-item-description-color | @text-color-placeholder | -
+--td-grid-item-description-font | @font-body-small | -
+--td-grid-item-description-padding-top | 0 | -
+--td-grid-item-horizontal-text-description-top | 0 | -
+--td-grid-item-horizontal-text-padding-left | 0 | -
+--td-grid-item-hover-bg-color | @bg-color-secondarycontainer | -
+--td-grid-item-image-middle-width | 80rpx | -
+--td-grid-item-image-small-width | 64rpx | -
+--td-grid-item-image-width | 96rpx | -
+--td-grid-item-padding | 32rpx | -
+--td-grid-item-text-color | @text-color-primary | -
+--td-grid-item-text-font | @font-body-medium | -
+--td-grid-item-text-middle-font | @font-body-small | -
+--td-grid-item-text-padding-top | 16rpx | -
+--td-grid-item-text-small-font | @font-body-extraSmall | -

package/dist/grid-item/grid-item.css

@@ -0,0 +1,103 @@
+.t-grid-item {
+  box-sizing: border-box;
+  height: 100%;
+  display: inline-block;
+  vertical-align: top;
+  background-color: var(--td-grid-item-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+}
+.t-grid-item--hover {
+  background-color: var(--td-grid-item-hover-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
+}
+.t-grid-item--auto-size {
+  width: 168rpx;
+}
+.t-grid-item__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+  padding: var(--td-grid-item-padding, 32rpx) 0 24rpx;
+}
+.t-grid-item__content--horizontal {
+  flex-direction: row;
+  padding-left: var(--td-grid-item-padding, 32rpx);
+}
+.t-grid-item__content--left {
+  justify-self: flex-start;
+  align-items: flex-start;
+}
+.t-grid-item__content--left .t-grid-item__words {
+  text-align: left;
+}
+.t-grid-item__words {
+  width: 100%;
+  text-align: center;
+  position: relative;
+  flex-direction: column;
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+}
+.t-grid-item__words--horizontal {
+  margin-left: 24rpx;
+}
+.t-grid-item__words:empty {
+  display: none;
+}
+:deep(.t-grid-item__image):not(:empty) {
+  width: var(--td-grid-item-image-width, 96rpx);
+  height: var(--td-grid-item-image-width, 96rpx);
+}
+:deep(.t-grid-item__image):not(:empty).t-grid-item__image--small {
+  width: var(--td-grid-item-image-small-width, 64rpx);
+  height: var(--td-grid-item-image-small-width, 64rpx);
+}
+:deep(.t-grid-item__image):not(:empty).t-grid-item__image--middle {
+  width: var(--td-grid-item-image-middle-width, 80rpx);
+  height: var(--td-grid-item-image-middle-width, 80rpx);
+}
+:deep(.t-grid-item__image):not(:empty) .t-grid__image {
+  width: 100%;
+  height: 100%;
+}
+:deep(.t-grid-item__image)--icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3));
+  border-radius: var(--td-radius-default, 12rpx);
+}
+.t-grid-item__text {
+  width: inherit;
+  color: var(--td-grid-item-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  padding-top: var(--td-grid-item-text-padding-top, 16rpx);
+}
+.t-grid-item__text--small {
+  font: var(--td-grid-item-text-small-font, var(--td-font-body-extraSmall, 20rpx / 32rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+}
+.t-grid-item__text--middle {
+  font: var(--td-grid-item-text-middle-font, var(--td-font-body-small, 24rpx / 40rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+}
+.t-grid-item__text--large {
+  font: var(--td-grid-item-text-font, var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+}
+.t-grid-item__text--horizontal {
+  padding-top: 0;
+  text-align: left;
+}
+.t-grid-item__description {
+  padding-top: var(--td-grid-item-description-padding-top, 0);
+  width: inherit;
+  color: var(--td-grid-item-description-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
+  font: var(--td-grid-item-description-font, var(--td-font-body-small, 24rpx / 40rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
+}
+.t-grid-item__description--horizontal {
+  margin-top: var(--td-grid-item-horizontal-text-description-top, 0);
+  padding-left: var(--td-grid-item-horizontal-text-padding-left, 0);
+  text-align-last: left;
+}
+:deep(.t-grid-item__icon) {
+  font-size: 48rpx;
+}