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` | |
| className | `string` | | 外层 CSS 类名 |
| itemClassName | `string` | | 列表项 css 类名 |
| contentClassName | `string` | | 列表项内容 css 类名 |
| value | `Array<object>` | | 图片数组 |
| 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) |
```
```

11
index.html
View File

@ -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);
</script>
<link rel="stylesheet" href="./packages/amis-ui/scss/helper.scss" />
<!-- <link rel="stylesheet" href="./packages/amis-ui/scss/helper.scss" /> -->
</head>
<body>

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

@ -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<React.ReactNode>;
@ -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;

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

@ -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<ListProps, object> {
}
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<ListProps, object> {
item.clickAction || item.link ? this.handleClick(item) : undefined
}
className={itemClassName}
contentClassName={contentClassName}
text={item.text}
icon={item.icon}
classnames={classnames}