Merge pull request #1570 from lowcoder-org/doc/existing_components

added examples for different components

Author: FalkWolsky

client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/Button.tsx

@@ -28,6 +28,24 @@ export default function ButtonExample() {
           config={{ type: "default", text: trans("componentDoc.submit"), disabled: true }}
           compFactory={ButtonComp}
         />
+        <Example
+          title="Hiding the Button component"
+          width={120}
+          config={{ type: "default", text: trans("componentDoc.submit"), hidden: true }}
+          compFactory={ButtonComp}
+        />
+        <Example
+          title="Prefix Icon"
+          width={120}
+          config={{ type: "default", text: trans("componentDoc.submit"), prefixIcon: "/icon:solid/book", }}
+          compFactory={ButtonComp}
+        />
+        <Example
+          title="Suffix Icon"
+          width={120}
+          config={{ type: "default", text: trans("componentDoc.submit"), suffixIcon :  "/icon:solid/book-open-reader", }}
+          compFactory={ButtonComp}
+        />
       </ExampleGroup>
 
       <ExampleGroup title={trans("componentDoc.style")}>
@@ -55,6 +73,28 @@ export default function ButtonExample() {
           }}
           compFactory={ButtonComp}
         />
+        <Example
+          title="Custom Styling"
+          width={180}
+          config={{
+            style: {
+              "background": "linear-gradient(90deg, #fa709a 0%, #fee140 100%)",
+              "padding": "10px",
+              "text": "#222222",
+              "textTransform": "Uppercase",
+              "textDecoration": "underline",
+              "textSize": "16px",
+              "textWeight": "bold",
+              "fontFamily": "Courier New",
+              "fontStyle": "italic",
+              "border": "#222222",
+              "borderStyle": "solid",
+              "radius": "10px",
+              "borderWidth": "2px"
+           },
+          }}
+          compFactory={ButtonComp}
+        />
       </ExampleGroup>
     </>
   );

client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/DropDownButton.tsx

@@ -32,9 +32,11 @@ export default function DropdownExample() {
   };
   return (
     <>
+
       <ExampleGroup
         title={trans("componentDoc.basicUsage")}
-        description={trans("componentDoc.basicDemoDescription")}
+        description="The Following Examples Show the Basic Usage of the Dropdown Component."
+
       >
         <Example
           title={trans("componentDoc.default")}
@@ -55,14 +57,99 @@ export default function DropdownExample() {
           blackListConfig={blackListConfig}
           compFactory={DropdownComp}
         />
+        <Example
+          title="Hiding the Dropdown component"
+          width={120}
+          config={{
+            type: "default",
+            text: trans("componentDoc.menu"),
+            hidden: true,
+            options: options,
+          }}
+          blackListConfig={blackListConfig}
+          compFactory={DropdownComp}
+        />
       </ExampleGroup>
 
-      <ExampleGroup title={trans("componentDoc.style")}>
+      <ExampleGroup 
+      title="Layout"
+      description="The Following Examples Show the Layout options of the Dropdown Component."
+      >
+        <Example
+          title="Display Dropdown without the Dots"
+          width={120}
+          config={{
+            onlyMenu: true,
+          }}
+          compFactory={DropdownComp}
+        />
+        <Example
+          title="Show Dropdown options on Hover"
+          width={120}
+          config={{
+            onlyMenu: true,
+            triggerMode: "hover",
+          }}
+          compFactory={DropdownComp}
+        />
         <Example
-          title={trans("componentDoc.onlyMenu")}
+          title="Show Dropdown options on Click"
           width={120}
           config={{
             onlyMenu: true,
+            triggerMode: "click",
+          }}
+          compFactory={DropdownComp}
+        />
+      </ExampleGroup>
+
+      <ExampleGroup
+        title="Styling Properties"
+        description="The Following Examples Show the different Styling properties on the Dropdown Component."
+      >
+        <Example
+          title="Background Color"
+          width={120}
+          config={{
+            style:{
+              "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+            },
+          }}
+          compFactory={DropdownComp}
+        />
+        <Example
+          title="Margin & Padding"
+          width={120}
+          config={{
+            style:{
+              "background": "linear-gradient(135deg, #00FFFF 0%, #00FFFF 100%)",
+              "margin": "10px",
+              "padding": "10px",
+            },
+          }}
+          compFactory={DropdownComp}
+        />
+        <Example
+          title="Border Radius"
+          width={120}
+          config={{
+            style:{
+              "background": "linear-gradient(135deg, #00FFFF 0%, #00FFFF 100%)",
+              "radius": "15px"
+            },
+          }}
+          compFactory={DropdownComp}
+        />
+        <Example
+          title="Text Properties"
+          width={120}
+          config={{
+            style:{
+              "text": "#E67373",
+              "textSize": "25px",
+              "textWeight": "bold",
+              "fontStyle": "italic",
+            },
           }}
           compFactory={DropdownComp}
         />