test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:48:45 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

chore: GridNav 支持配置 contentClassName 配置列表项内容 className close: #6865 (#6868)

Browse Source
This commit is contained in:
liaoxuezhi 2023-05-15 15:26:38 +08:00 committed by GitHub
parent acf4070de0
commit ca17320ad9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/zh-CN/components/grid-nav.md
View File

@ -351,6 +351,7 @@ order: 54
| type | `string` | `grid-nav` | | | type | `string` | `grid-nav` | |
| className | `string` | | 外层 CSS 类名 | | className | `string` | | 外层 CSS 类名 |
| itemClassName | `string` | | 列表项 css 类名 | | itemClassName | `string` | | 列表项 css 类名 |
| contentClassName | `string` | | 列表项内容 css 类名 |
| value | `Array<object>` | | 图片数组 | | value | `Array<object>` | | 图片数组 |
| source | `string` | | 数据源 | | source | `string` | | 数据源 |
| square | `boolean` | | 是否将列表项固定为正方形 | | square | `boolean` | | 是否将列表项固定为正方形 |
@ -367,7 +368,3 @@ order: 54
| options.link | `string` | | 内部页面路径或外部跳转 URL 地址，优先级高于 clickAction | | options.link | `string` | | 内部页面路径或外部跳转 URL 地址，优先级高于 clickAction |
| options.blank | `boolean` | | 是否新页面打开，link 为 url 时有效 | | options.blank | `boolean` | | 是否新页面打开，link 为 url 时有效 |
| options.clickAction | `ActionSchema` | | 列表项点击交互 详见 [Action](./action) | | options.clickAction | `ActionSchema` | | 列表项点击交互 详见 [Action](./action) |
```
```

11
index.html
View File

@ -56,8 +56,17 @@
); );
document.head.appendChild(link); 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);
</script> </script>
<link rel="stylesheet" href="./packages/amis-ui/scss/helper.scss" /> <!-- <link rel="stylesheet" href="./packages/amis-ui/scss/helper.scss" /> -->
</head> </head>
<body> <body>

8
packages/amis-ui/src/components/GridNav.tsx
View File

@ -4,7 +4,7 @@
*/ */
import React, {useMemo} from 'react'; import React, {useMemo} from 'react';
import {ClassNamesFn} from 'amis-core'; import {ClassName, ClassNamesFn} from 'amis-core';
import {Badge, BadgeProps} from './Badge'; import {Badge, BadgeProps} from './Badge';
export type GridNavDirection = 'horizontal' | 'vertical'; export type GridNavDirection = 'horizontal' | 'vertical';
@ -27,7 +27,7 @@ export interface GridNavProps {
/** 列数 */ /** 列数 */
columnNum?: number; columnNum?: number;
className?: string; className?: string;
itemClassName?: string; itemClassName?: ClassName;
classnames: ClassNamesFn; classnames: ClassNamesFn;
style?: React.CSSProperties; style?: React.CSSProperties;
children?: React.ReactNode | Array<React.ReactNode>; children?: React.ReactNode | Array<React.ReactNode>;
@ -40,9 +40,9 @@ export interface GridNavItemProps {
text?: string | React.ReactNode; text?: string | React.ReactNode;
/** 图标名称或图片链接 */ /** 图标名称或图片链接 */
icon?: string | React.ReactNode; icon?: string | React.ReactNode;
className?: string; className?: ClassName;
style?: React.CSSProperties; style?: React.CSSProperties;
contentClassName?: string; contentClassName?: ClassName;
contentStyle?: React.CSSProperties; contentStyle?: React.CSSProperties;
children?: React.ReactNode; children?: React.ReactNode;
classnames: ClassNamesFn; classnames: ClassNamesFn;

21
packages/amis/src/renderers/GridNav.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import {Renderer, RendererProps} from 'amis-core'; import {ClassName, Renderer, RendererProps} from 'amis-core';
import {autobind, getPropValue} from 'amis-core'; import {autobind, getPropValue} from 'amis-core';
import {isPureVariable, resolveVariableAndFilter} from 'amis-core'; import {isPureVariable, resolveVariableAndFilter} from 'amis-core';
import { 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<ListProps, object> {
} }
render() { render() {
const {itemClassName, style, source, data, options, classnames} = const {
this.props; itemClassName,
style,
contentClassName,
source,
data,
options,
classnames
} = this.props;
let value = getPropValue(this.props); let value = getPropValue(this.props);
let list: any = []; let list: any = [];
@ -185,6 +197,7 @@ export default class List extends React.Component<ListProps, object> {
item.clickAction || item.link ? this.handleClick(item) : undefined item.clickAction || item.link ? this.handleClick(item) : undefined
} }
className={itemClassName} className={itemClassName}
contentClassName={contentClassName}
text={item.text} text={item.text}
icon={item.icon} icon={item.icon}
classnames={classnames} classnames={classnames}