added examples for different components

lowcoder-org · FalkWolsky · Jan 10, 2025 · Jan 1, 2025 · Jan 1, 2025 · Jan 1, 2025
commit 47c101bf1f37ff67a10b7486c1e9e5286d3a8ec7
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/FloatButton.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/FloatButton.tsx
@@ -27,21 +27,51 @@ export default function FloatButtonExample() {
     <>
       <ExampleGroup
         title={trans("componentDoc.basicUsage")}
-        description={trans("componentDoc.basicDemoDescription")}
+        description="The Following Examples Show the Basic Usage of the Float Button Component."
       >
         <Example
-          title={trans("componentDoc.default")}
+          title="A Simple Float Button"
           config={{ 
             buttons: buttons,
-            buttonTheme: "primary",
-            icon: "/icon:antd/questioncircleoutlined",
+        }}
+          compFactory={FloatButtonComp}
+        />
+        <Example
+          title="Hiding the Float Button"
+          config={{ 
+            buttons: buttons,
+            hidden: true,
+        }}
+          compFactory={FloatButtonComp}
+        />
+        <Example
+          title="Different Icon on Float Button"
+          config={{ 
+            buttons: buttons,
+            icon: "/icon:solid/align-justify",
+        }}
+          compFactory={FloatButtonComp}
+        />
+        <Example
+          title="Button Theme - Default"
+          config={{ 
+            buttons: buttons,
+            buttonTheme: "default",
+            icon: "/icon:solid/align-justify",
             includeMargin: true,
             preventStyleOverwriting: false,
-            shape: "circle",
             value: "",
         }}
           compFactory={FloatButtonComp}
         />
+        <Example
+          title="Button Shape - Square"
+          config={{ 
+            buttons: buttons,
+            shape: "square",
+        }}
+          compFactory={FloatButtonComp}
+        />
       </ExampleGroup>
 
     </>

diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/IconButton.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/IconButton.tsx
@@ -8,52 +8,108 @@ export default function IconButtonExample() {
     <>
       <ExampleGroup
         title={trans("componentDoc.basicUsage")}
-        description={trans("componentDoc.basicDemoDescription")}
+        description="The Following Examples Show the Basic Usage of the Icon Button Component."
       >
         <Example
-          title={trans("componentDoc.default")}
+          title="A Simple Icon button"
+          width={120}
           config={{ 
             prefixIcon: "/icon:solid/align-justify",
-            iconSize: "30px",
         }}
           compFactory={ControlButton}
         />
         <Example
           title={trans("componentDoc.loading")}
           width={120}
-          config={{ type: "default", text: trans("componentDoc.submit"), loading: true }}
+          config={{
+            prefixIcon: "/icon:solid/align-justify",
+            loading: true, 
+          }}
           compFactory={ControlButton}
         />
         <Example
           title={trans("componentDoc.disabled")}
           width={120}
-          config={{ type: "default", text: trans("componentDoc.submit"), disabled: true }}
+          config={{
+            disabled: true,
+            prefixIcon: "/icon:solid/align-justify",
+          }}
+          compFactory={ControlButton}
+        />
+        <Example
+          title="Hiding the Icon Button"
+          width={120}
+          config={{
+            hidden: true,
+            prefixIcon: "/icon:solid/align-justify",
+          }}
           compFactory={ControlButton}
         />
       </ExampleGroup>
 
-      <ExampleGroup title={trans("componentDoc.style")}>
+      <ExampleGroup 
+        title="Layout & Style"
+        description="The Following Examples Show the Layout & Style options on Float Button Component."
+      >
         <Example
           title={trans("componentDoc.danger")}
           width={120}
           config={{
-            style: { backgroundColor: "#CD574C", borderColor: "#AC3A32", color: "#E0ECF6" },
+            prefixIcon: "/icon:solid/ellipsis-vertical",
+            style: { 
+              backgroundColor: "#CD574C", 
+              borderColor: "#AC3A32", 
+              color: "#E0ECF6" },
           }}
           compFactory={ControlButton}
         />
         <Example
           title={trans("componentDoc.warning")}
           width={120}
           config={{
-            style: { backgroundColor: "#F4A125", borderColor: "#DA7D16", color: "#000000" },
+            prefixIcon: "/icon:solid/square-caret-right",
+            style: { 
+              backgroundColor: "#F4A125", 
+              borderColor: "#DA7D16", 
+              color: "#000000" },
           }}
           compFactory={ControlButton}
         />
         <Example
           title={trans("componentDoc.success")}
           width={120}
           config={{
-            style: { backgroundColor: "#5E8D6E", borderColor: "#40694E", color: "#E0ECF6" },
+            prefixIcon: "/icon:antd/audiofilled",
+            style: { 
+              backgroundColor: "#5E8D6E", 
+              borderColor: "#40694E", 
+              color: "#E0ECF6" },
+          }}
+          compFactory={ControlButton}
+        />
+        <Example
+          title="Icon Size - 30px"
+          width={120}
+          config={{
+            prefixIcon: "/icon:antd/audiofilled",
+            iconSize: "30px",
+            style: { 
+              backgroundColor: "#5E8D6E", 
+              borderColor: "#40694E", 
+              color: "#E0ECF6" },
+          }}
+          compFactory={ControlButton}
+        />
+        <Example
+          title="Icon Size - 40px"
+          width={120}
+          config={{
+            prefixIcon: "/icon:antd/audiofilled",
+            iconSize: "40px",
+            style: { 
+              backgroundColor: "#5E8D6E", 
+              borderColor: "#40694E", 
+              color: "#E0ECF6" },
           }}
           compFactory={ControlButton}
         />

diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx
@@ -0,0 +1,25 @@
+import { uiCompRegistry } from "comps/uiCompRegistry";
+import { trans } from "i18n";
+import { chartColorPalette } from "lowcoder-design";
+import Example from "../../common/Example";
+import ExampleGroup from "../../common/ExampleGroup";
+
+const ChartCompWithDefault = uiCompRegistry["calendar"].comp;
+
+export default function CalendarExample() {
+  return (
+    <>
+      <ExampleGroup
+        title={trans("componentDoc.basicUsage")}
+        description={trans("componentDoc.basicDemoDescription")}
+      >
+        <Example
+          title={trans("componentDoc.default")}
+          config={{
+          }}
+          compFactory={ChartCompWithDefault}
+        />
+      </ExampleGroup>
+    </>
+  );
+}