mm

playground/ui-gallery/src/App.tsx

@@ -1,10 +1,14 @@
+import { BadgeGallery } from "./gallery/BadgeGallery";
 import { ButtonGallery } from "./gallery/ButtonGallery";
 import "@dg/ui-react/index.css";
+import { TagGallery } from "./gallery/TagGallery";
 
 function App() {
   return (
     <div>
       <ButtonGallery />
+      <BadgeGallery />
+      <TagGallery />
     </div>
   );
 }

playground/ui-gallery/src/common/OW.tsx

@@ -4,6 +4,7 @@ export const OW = ({ children }: { children: ReactNode }) => {
   return (
     <div
       style={{
+        margin: "30px",
         gap: "30px",
         display: "flex",
         flexDirection: "column",

playground/ui-gallery/src/gallery/BadgeGallery.tsx

@@ -0,0 +1,38 @@
+import { Badge, Button } from "@dg/ui-react";
+import { IW } from "../common/IW";
+import { OW } from "../common/OW";
+
+export const BadgeGallery = () => {
+  return (
+    <OW>
+      <IW>
+        <Badge size="xs">
+          <Button size="xs">Button</Button>
+        </Badge>
+        <Badge size="sm">
+          <Button size="sm">Button</Button>
+        </Badge>
+        <Badge size="md">
+          <Button size="md">Button</Button>
+        </Badge>
+        <Badge size="lg">
+          <Button size="lg">Button</Button>
+        </Badge>
+      </IW>
+      <IW>
+        <Badge size="xs" indicatorContent="98">
+          <Button size="xs">Button</Button>
+        </Badge>
+        <Badge size="sm" indicatorContent="96">
+          <Button size="sm">Button</Button>
+        </Badge>
+        <Badge size="md" indicatorContent="960">
+          <Button size="md">Button</Button>
+        </Badge>
+        <Badge size="lg" indicatorContent="978">
+          <Button size="lg">Button</Button>
+        </Badge>
+      </IW>
+    </OW>
+  );
+};

playground/ui-gallery/src/gallery/ButtonGallery.tsx

@@ -6,7 +6,10 @@ export const ButtonGallery = () => {
   return (
     <OW>
       <IW>
-        <Button size="xs">XSmall</Button>
+        <Button size="xs">开始试用</Button>
+        <Button size="xs" shape="circle">
+          开始试用
+        </Button>
         <Button size="xs" iconSvg={<DownloadSvg />}>
           XSmall
         </Button>
@@ -18,7 +21,10 @@ export const ButtonGallery = () => {
         </Button>
       </IW>
       <IW>
-        <Button size="sm">Small</Button>
+        <Button size="sm">开始试用</Button>
+        <Button size="sm" shape="circle">
+          开始试用
+        </Button>
         <Button size="sm" iconSvg={<DownloadSvg />}>
           Small
         </Button>
@@ -29,6 +35,36 @@ export const ButtonGallery = () => {
           Small
         </Button>
       </IW>
+      <IW>
+        <Button size="md">开始试用</Button>
+        <Button size="md" shape="circle">
+          开始试用
+        </Button>
+        <Button size="md" iconSvg={<DownloadSvg />}>
+          Medium
+        </Button>
+        <Button size="md" iconOnly={true} iconSvg={<DownloadSvg />}>
+          Medium
+        </Button>
+        <Button size="md" loading={true} iconSvg={<DownloadSvg />}>
+          Medium
+        </Button>
+      </IW>
+      <IW>
+        <Button size="lg">开始试用</Button>
+        <Button size="lg" shape="circle">
+          开始试用
+        </Button>
+        <Button size="lg" iconSvg={<DownloadSvg />}>
+          Large
+        </Button>
+        <Button size="lg" iconOnly={true} iconSvg={<DownloadSvg />}>
+          Large
+        </Button>
+        <Button size="lg" loading={true} iconSvg={<DownloadSvg />}>
+          Large
+        </Button>
+      </IW>
     </OW>
   );
 };

playground/ui-gallery/src/gallery/TagGallery.tsx

@@ -0,0 +1,18 @@
+import { Tag } from "@dg/ui-react";
+import { IW } from "../common/IW";
+import { OW } from "../common/OW";
+
+export const TagGallery = () => {
+  return (
+    <OW>
+      <IW>
+        <Tag size="sm">写实</Tag>
+        <Tag size="sm">简约</Tag>
+        <Tag size="md">油画</Tag>
+        <Tag size="md">赛博朋克</Tag>
+        <Tag size="lg">星际</Tag>
+        <Tag size="lg">机械</Tag>
+      </IW>
+    </OW>
+  );
+};