From ca17320ad9b772541ee013c5459012a0e50f44b0 Mon Sep 17 00:00:00 2001 From: liaoxuezhi <2betop.cn@gmail.com> Date: Mon, 15 May 2023 15:26:38 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20GridNav=20=E6=94=AF=E6=8C=81=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=20contentClassName=20=E9=85=8D=E7=BD=AE=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E9=A1=B9=E5=86=85=E5=AE=B9=20className=20close:=20#68?= =?UTF-8?q?65=20(#6868)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/grid-nav.md | 5 +---- index.html | 11 ++++++++++- packages/amis-ui/src/components/GridNav.tsx | 8 ++++---- packages/amis/src/renderers/GridNav.tsx | 21 +++++++++++++++++---- 4 files changed, 32 insertions(+), 13 deletions(-) diff --git a/docs/zh-CN/components/grid-nav.md b/docs/zh-CN/components/grid-nav.md index 2e764bebd..7c05a6062 100644 --- a/docs/zh-CN/components/grid-nav.md +++ b/docs/zh-CN/components/grid-nav.md @@ -351,6 +351,7 @@ order: 54 | type | `string` | `grid-nav` | | | className | `string` | | 外层 CSS 类名 | | itemClassName | `string` | | 列表项 css 类名 | +| contentClassName | `string` | | 列表项内容 css 类名 | | value | `Array` | | 图片数组 | | source | `string` | | 数据源 | | square | `boolean` | | 是否将列表项固定为正方形 | @@ -367,7 +368,3 @@ order: 54 | options.link | `string` | | 内部页面路径或外部跳转 URL 地址，优先级高于 clickAction | | options.blank | `boolean` | | 是否新页面打开，link 为 url 时有效 | | options.clickAction | `ActionSchema` | | 列表项点击交互 详见 [Action](./action) | - -``` - -``` diff --git a/index.html b/index.html index 599515299..7aaa7a912 100644 --- a/index.html +++ b/index.html @@ -56,8 +56,17 @@ ); document.head.appendChild(link); }); + + // helper 放在末尾提高优先级 + const helper = document.createElement('link'); + helper.setAttribute('rel', 'stylesheet'); + helper.setAttribute( + 'href', + new URL(`./packages/amis-ui/scss/helper.scss`, import.meta.url).href + ); + document.head.appendChild(helper); - + diff --git a/packages/amis-ui/src/components/GridNav.tsx b/packages/amis-ui/src/components/GridNav.tsx index efdd65528..30ae15015 100644 --- a/packages/amis-ui/src/components/GridNav.tsx +++ b/packages/amis-ui/src/components/GridNav.tsx @@ -4,7 +4,7 @@ */ import React, {useMemo} from 'react'; -import {ClassNamesFn} from 'amis-core'; +import {ClassName, ClassNamesFn} from 'amis-core'; import {Badge, BadgeProps} from './Badge'; export type GridNavDirection = 'horizontal' | 'vertical'; @@ -27,7 +27,7 @@ export interface GridNavProps { /** 列数 */ columnNum?: number; className?: string; - itemClassName?: string; + itemClassName?: ClassName; classnames: ClassNamesFn; style?: React.CSSProperties; children?: React.ReactNode | Array; @@ -40,9 +40,9 @@ export interface GridNavItemProps { text?: string | React.ReactNode; /** 图标名称或图片链接 */ icon?: string | React.ReactNode; - className?: string; + className?: ClassName; style?: React.CSSProperties; - contentClassName?: string; + contentClassName?: ClassName; contentStyle?: React.CSSProperties; children?: React.ReactNode; classnames: ClassNamesFn; diff --git a/packages/amis/src/renderers/GridNav.tsx b/packages/amis/src/renderers/GridNav.tsx index ec2fa88f5..17b569fe6 100644 --- a/packages/amis/src/renderers/GridNav.tsx +++ b/packages/amis/src/renderers/GridNav.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {Renderer, RendererProps} from 'amis-core'; +import {ClassName, Renderer, RendererProps} from 'amis-core'; import {autobind, getPropValue} from 'amis-core'; import {isPureVariable, resolveVariableAndFilter} from 'amis-core'; import { @@ -64,7 +64,12 @@ export interface ListSchema extends BaseSchema { /** * 列表项类名 */ - itemClassName?: string; + itemClassName?: ClassName; + + /** + * 列表项内容类名 + */ + contentClassName?: ClassName; /** * 静态图片列表配置 @@ -154,8 +159,15 @@ export default class List extends React.Component { } render() { - const {itemClassName, style, source, data, options, classnames} = - this.props; + const { + itemClassName, + style, + contentClassName, + source, + data, + options, + classnames + } = this.props; let value = getPropValue(this.props); let list: any = []; @@ -185,6 +197,7 @@ export default class List extends React.Component { item.clickAction || item.link ? this.handleClick(item) : undefined } className={itemClassName} + contentClassName={contentClassName} text={item.text} icon={item.icon} classnames={classnames}