ant-design 剥离Notification组件的卡片堆叠效果

bybem2ql 于 3个月前发布在其他

关注(0)|答案(1)|浏览(39)

What problem does this feature solve?

Notification在出现多个卡片通知时，会将卡片堆叠起来。
希望能将这个功能剥离，让开发者可以将此功能同时应用到card或自己设计的其他卡片组件上。这样可以优化“大量且紧凑”的绝对定位/固定定位的元素的排版

What does the proposed API look like?

希望能让开发者直接将自己的card组件放到卡片堆叠组件的children中，直接分割最外层元素作为每一个堆叠卡片的根元素。或者使用items属性，让开发者直接传入卡片组件数组。

示例：
js\nconst Staker = ({ items }) => {\n\treturn (\n\t\t<>\n\t\t\t{items.map((res) => {\n\t\t\t\treturn (\n <></>\n );\n\t\t\t})}\n\t\t</>\n\t);\n};\nconst App = () => {\n\treturn (\n\t\t<Staker\n\t\t\titems={[\n\t\t\t\t<Card></Card>,\n\t\t\t\t<Card></Card>,\n\t\t\t\t<Card></Card>,\n\t\t\t\t<Card></Card>,\n\t\t\t\t<Card></Card>,\n\t\t\t\t<Card></Card>,\n\t\t\t\t<Card></Card>,\n\t\t\t\t<Card></Card>,\n\t\t\t]}\n\t\t/>\n\t);\n};\n\n

ant-design

来源：https://github.com/ant-design/ant-design/issues/49405

1条答案

按热度按时间

1sbrub3j1#

重新提交代码示例：

const Staker = ({ items }) => {
	return (
		<>
			{items.map((res) => {
				return (
                    <></>
                );
			})}
		</>
	);
};
const App = () => {
	return (
		<Staker
			items={[
				<Card></Card>,
				<Card></Card>,
				<Card></Card>,
				<Card></Card>,
				<Card></Card>,
				<Card></Card>,
				<Card></Card>,
				<Card></Card>,
			]}
		/>
	);
};

赞(0）回复(0）举报 3个月前

我来回答

ant-design 剥离Notification组件的卡片堆叠效果

What problem does this feature solve?

What does the proposed API look like?

1条答案

相关问题

热门标签

最新问答