From 7005212e151ef7c094a360595ede7f0defe10c24 Mon Sep 17 00:00:00 2001
From: thinkasany <480968828@qq.com>
Date: Wed, 14 Aug 2024 17:34:53 +0800
Subject: [PATCH] docs(list): add semantic dom (#50413)
---
components/list/demo/_semantic.tsx | 91 ++++++++++++++++++++++++++++++
components/list/index.en-US.md | 8 ++-
components/list/index.zh-CN.md | 8 ++-
3 files changed, 103 insertions(+), 4 deletions(-)
create mode 100644 components/list/demo/_semantic.tsx
diff --git a/components/list/demo/_semantic.tsx b/components/list/demo/_semantic.tsx
new file mode 100644
index 0000000000..89ad2ad7a8
--- /dev/null
+++ b/components/list/demo/_semantic.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+
+import SemanticPreview from '../../../.dumi/components/SemanticPreview';
+import useLocale from '../../../.dumi/hooks/useLocale';
+
+import { Avatar, List, Space } from 'antd';
+import { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
+
+const locales = {
+ cn: {
+ extra: '设置额外内容',
+ actions: '设置列表操作组',
+ },
+ en: {
+ extra: 'set `extra` of List.Item',
+ actions: 'set `actions` of List.Item',
+ },
+};
+
+const IconText = ({ icon, text }: { icon: React.FC; text: string }) => (
+
+ {React.createElement(icon)}
+ {text}
+
+);
+
+const data = Array.from({ length: 1 }).map((_, i) => ({
+ href: 'https://ant.design',
+ title: `ant design part ${i}`,
+ avatar: `https://api.dicebear.com/7.x/miniavs/svg?seed=${i}`,
+ description:
+ 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
+ content:
+ 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
+}));
+
+const BlockList: React.FC = (props) => {
+ const divRef = React.useRef(null);
+
+ return (
+
+
(
+ ,
+ ,
+ ,
+ ]}
+ extra={
+ 
+ }
+ >
+ }
+ title={{item.title}}
+ description={item.description}
+ />
+ {item.content}
+
+ )}
+ />
+