diff --git a/src/SelectCard/demos/SelectWithImg.tsx b/src/SelectCard/demos/SelectWithImg.tsx
index 5b9be1c..b55ea26 100644
--- a/src/SelectCard/demos/SelectWithImg.tsx
+++ b/src/SelectCard/demos/SelectWithImg.tsx
@@ -1,3 +1,4 @@
+import { AntDesignOutlined } from '@ant-design/icons';
import { Flex, Segmented, SelectCard, SelectCardProps } from '@yuntijs/ui';
import { useState } from 'react';
@@ -30,7 +31,12 @@ const SelectWithImgDemo = () => {
img: 'https://avatars.githubusercontent.com/u/148947838',
value: 'yunti-ui',
},
- { label: 'test', description: 'test desc', value: 'test' },
+ {
+ label: 'icon',
+ icon: ,
+ iconStyle: { backgroundColor: '#1677ff' },
+ value: 'icon',
+ },
]}
size={size}
/>
diff --git a/src/SelectCard/index.md b/src/SelectCard/index.md
index 5bdbb15..78073e0 100644
--- a/src/SelectCard/index.md
+++ b/src/SelectCard/index.md
@@ -12,7 +12,7 @@ A card display select, support multiple select and `optionRender`.
-### Select with img
+### Select with img or icon
diff --git a/src/SelectCard/index.tsx b/src/SelectCard/index.tsx
index 2facfc1..5901beb 100644
--- a/src/SelectCard/index.tsx
+++ b/src/SelectCard/index.tsx
@@ -11,12 +11,13 @@ const { Text, Paragraph } = Typography;
type RawValue = string | number;
type Value = RawValue | RawValue[];
export interface SelectCardOption {
- className?: string;
value: RawValue;
- img?: string;
+ img?: React.ReactNode;
+ icon?: React.ReactNode;
+ iconStyle?: React.CSSProperties;
label?: React.ReactNode;
description?: React.ReactNode;
- [name: string]: any;
+ style?: React.CSSProperties;
}
export interface SelectCardProps
@@ -35,9 +36,11 @@ export interface SelectCardProps
) => React.ReactNode;
classNames?: {
card?: string;
+ icon?: string;
};
styles?: {
card?: React.CSSProperties;
+ icon?: React.CSSProperties;
};
}
@@ -55,7 +58,7 @@ export const SelectCard = React.forwardRef((pro
optionRender,
...otherProps
} = props;
- const isImg = useMemo(() => options.some(o => !!o.img), [options]);
+ const isImg = useMemo(() => options.some(o => !!o.img || !!o.icon), [options]);
const { cx, styles } = useStyles({ disabled, size });
const { imgHeight } = useMemo(() => getNumberBySize(size), [size]);
@@ -107,19 +110,23 @@ export const SelectCard = React.forwardRef((pro
const Option = (
onSelect(o.value)}
- style={stylesFromProps?.card}
+ style={{ ...stylesFromProps?.card, ...o.style }}
vertical
>
- {isImg && }
+ {isImg && (
+
+ )}
{o.label && (
{o.label}
@@ -137,6 +144,7 @@ export const SelectCard = React.forwardRef((pro
},
[
classNames?.card,
+ classNames?.icon,
cx,
imgHeight,
isImg,
@@ -148,6 +156,7 @@ export const SelectCard = React.forwardRef((pro
styles.option,
styles.optionSelected,
stylesFromProps?.card,
+ stylesFromProps?.icon,
]
);