diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/LinkButton.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/LinkButton.tsx
index 53274fb85..306ae3062 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/LinkButton.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/LinkButton.tsx
@@ -8,7 +8,7 @@ export default function LinkExample() {
<>
<ExampleGroup
title={trans("componentDoc.basicUsage")}
- description={trans("componentDoc.basicDemoDescription")}
+ description="The Following Examples Show the Basic Usage of the Link Component."
>
<Example
title={trans("componentDoc.default")}
@@ -25,12 +25,123 @@ export default function LinkExample() {
config={{ text: trans("componentDoc.link"), disabled: true }}
compFactory={LinkComp}
/>
+ <Example
+ title="Hiding the Link component"
+ config={{ text: trans("componentDoc.link"), hidden: true }}
+ compFactory={LinkComp}
+ />
</ExampleGroup>
- <ExampleGroup title={trans("componentDoc.style")}>
+
+ <ExampleGroup
+ title="Layout Options"
+ description="The Following Examples Show the Layout Options of the Link Component."
+ >
+ <Example
+ title="Prefix Icon"
+ config={{
+ prefixIcon: "/icon:solid/arrow-down-wide-short",
+ }}
+ compFactory={LinkComp}
+ />
+ <Example
+ title="Suffix Icon"
+ config={{
+ suffixIcon: "/icon:solid/arrow-up-wide-short",
+ }}
+ compFactory={LinkComp}
+ />
+ <Example
+ title="Prefix & Suffix Icon"
+ config={{
+ prefixIcon: "/icon:solid/arrow-down-wide-short",
+ suffixIcon: "/icon:solid/arrow-up-wide-short",
+ }}
+ compFactory={LinkComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling properties on the Link Component."
+ >
+ <Example
+ title="Background Color, Border Radius,Style,Width,Color"
+ config={{
+ style: {
+ "background": "#00FFFF",
+ "border": "#3377FF",
+ "radius": "10px",
+ "borderWidth": "3px",
+ "borderStyle": "solid",
+ "hoverText": "#36B389",
+ "activeText": "#222222",
+ },
+ }}
+ compFactory={LinkComp}
+ />
+ <Example
+ title="Margin & Padding"
+ config={{
+ style: {
+ "background": "#00FFFF",
+ "border": "#3377FF",
+ "radius": "10px",
+ "borderWidth": "3px",
+ "margin": "10px",
+ "padding": "10px",
+ "borderStyle": "dashed",
+ },
+ }}
+ compFactory={LinkComp}
+ />
+ <Example
+ title="Rotation - 90deg"
+ config={{
+ style: {
+ "rotation": "90deg",
+ },
+ }}
+ compFactory={LinkComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Animation Style"
+ description="The Following Examples Show different animations on the Link Component."
+ >
+ <Example
+ title="Bounce Animation"
+ config={{
+ animationStyle: {
+ "animation": "bounce",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite",
+ },
+ }}
+ compFactory={LinkComp}
+ />
+ <Example
+ title="Swing Animation"
+ config={{
+ animationStyle: {
+ "animation": "swing",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite",
+ },
+ }}
+ compFactory={LinkComp}
+ />
<Example
- title={trans("componentDoc.customAppearance")}
+ title="Tada Animation"
config={{
- style: { color: "#A7392F" },
+ animationStyle: {
+ "animation": "tada",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite",
+ },
}}
compFactory={LinkComp}
/>
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx
index 22375e860..b7547a974 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx
@@ -45,6 +45,15 @@ export default function CalendarExample() {
}}
compFactory={ChartCompWithDefault}
/>
+ <Example
+ title="Non-Editable - New Events can't be added to a Calendar"
+ width={700}
+ height={600}
+ config={{
+ editable: false,
+ }}
+ compFactory={ChartCompWithDefault}
+ />
<Example
title="Hiding Event Times"
width={700}
@@ -169,6 +178,172 @@ export default function CalendarExample() {
compFactory={ChartCompWithDefault}
/>
</ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling properties of the Calendar Component."
+ >
+ <Example
+ title="Background Color"
+ width={700}
+ height={600}
+ config={{
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ <Example
+ title="Border Properties : Color and Radius"
+ width={700}
+ height={600}
+ config={{
+ style: {
+ "border": "#053AF9",
+ "radius": "10px",
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ <Example
+ title="Text Color"
+ width={700}
+ height={600}
+ config={{
+ style: {
+ "text": "#EF0404",
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ <Example
+ title="Button Background Color & Text Color"
+ width={700}
+ height={600}
+ config={{
+ style: {
+ "headerBtnBackground": "#36B389",
+ "btnText": "#080808",
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ <Example
+ title="Title Color"
+ width={700}
+ height={600}
+ config={{
+ style: {
+ "title": "#FFA608",
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ <Example
+ title="Selected Background Color - Select any time slot to see the Color"
+ width={700}
+ height={600}
+ config={{
+ style: {
+ "selectBackground": "#FFA608",
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Modal Style"
+ description="The Following Examples Show the different Styling properties on the Modal of the Calendar Component."
+ >
+ <Example
+ title="Background Color"
+ width={700}
+ height={600}
+ config={{
+ modalStyle: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ <Example
+ title="Border Properties - Color, Width & Style"
+ width={700}
+ height={600}
+ config={{
+ modalStyle: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "border": "#053CFF",
+ "borderWidth": "2px",
+ "borderStyle": "dashed",
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ <Example
+ title="Input Text Color & Input fields Background Color"
+ width={700}
+ height={600}
+ config={{
+ modalStyle: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "text": "#FFFFFF",
+ "labelBackground": "#0702F2"
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Animation Style"
+ description="The Following Examples Show different Animation Styles on the Calendar Component."
+ >
+ <Example
+ title="Bounce Animation"
+ width={700}
+ height={600}
+ config={{
+ animationStyle: {
+ "animation": "bounce",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ <Example
+ title="Swing Animation"
+ width={700}
+ height={600}
+ config={{
+ animationStyle: {
+ "animation": "swing",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ <Example
+ title="Tada Animation"
+ width={700}
+ height={600}
+ config={{
+ animationStyle: {
+ "animation": "tada",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ </ExampleGroup>
</>
);
}
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx
index eac134170..100dc105f 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx
@@ -143,6 +143,77 @@ export default function GanttChartExample() {
compFactory={ChartCompWithDefault}
/>
</ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling properties of the Component."
+ >
+ <Example
+ title="Gantt Chart Styles"
+ width={1000}
+ config={{
+ ganttChartStyle: {
+ "textSize": "15px",
+ "fontFamily": "Courier New",
+ "textColor": "#DA0303",
+ "barBackgroundColor": "#8D8D8E",
+ "barProgressColor": "#06EA9B",
+ "arrowColor": "#FC6B01",
+ "radius": "10px",
+ "todayColor": "#F2AB2E",
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ <Example
+ title="Legend Header Styles"
+ width={1000}
+ config={{
+ headerHeight: "50",
+ legendWidth: "400px",
+ legendHeaderStyle: {
+ "textSize": "20px",
+ "fontFamily": "Verdana",
+ "textColor": "#FFFFFF",
+ "headerBackground": "#36B389",
+ "padding": "10px",
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+
+ <Example
+ title="Legend Styles"
+ width={1000}
+ config={{
+ legendWidth: "500px",
+ legendStyle: {
+ "textSize": "20px",
+ "fontFamily": "Courier New",
+ "textColor": "#AE8D1C",
+ "headerBackground": "#00FFFF",
+ "padding": "20px"
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ <Example
+ title="Tooltip Styles - Hover over individual Task to view the Tooltip"
+ width={1000}
+ config={{
+ tooltipStyle: {
+ "textSize": "20px",
+ "textColor": "#85878C",
+ "headerBackground": "#FFF6E6",
+ "padding": "20px",
+ "borderColor": "#707278",
+ "borderWidth": "3px",
+ "radius": "20px"
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ </ExampleGroup>
</>
);
}
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx
index 43d87a45d..3583210b7 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx
@@ -170,6 +170,44 @@ const stageGuageOption = {
]
};
+const chartStyle= {
+ background: "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ chartBorderColor: "#FDFAFA",
+ chartBorderStyle: "dashed",
+ chartBorderWidth: "2",
+ chartBoxShadow: "200",
+ chartShadowColor: "#3377FF"
+}
+
+const titleStyle = {
+ chartBoxShadow: "9",
+ chartFontStyle: "Italic",
+ chartShadowColor: "#FFBD01",
+ chartTextColor: "#36B389",
+ chartTextSize: "30",
+ chartTextWeight: "Bold"
+}
+
+const labelStyle = {
+ chartBoxShadow: "5",
+ chartFontFamily: "serif",
+ chartFontStyle: "Italic",
+ chartShadowColor: "#020101",
+ chartTextColor: "#FFFFFF",
+ chartTextSize: "20",
+ chartTextWeight: "bold"
+}
+
+const legendStyle = {
+ chartBoxShadow: "5",
+ chartFontFamily: "serif",
+ chartFontStyle: "Italic",
+ chartShadowColor: "#FFD701",
+ chartTextColor: "#7A7A7B",
+ chartTextSize: "20",
+ chartTextWeight: "bold"
+}
+
export default function GaugeChartExample() {
return (
<>
@@ -438,6 +476,70 @@ export default function GaugeChartExample() {
compFactory={ChartCompWithDefault}
/>
</ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the Styling Properties on the Gauge Chart Component."
+ >
+ <Example
+ title="Chart Styling - Background Color, Box Shadow, Border"
+ width={500}
+ height={350}
+ hideSettings={true}
+ config={{
+ chartStyle: chartStyle,
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ <Example
+ title="Title Styling - Text, Fonts & Box Shadow"
+ width={500}
+ height={350}
+ hideSettings={true}
+ config={{
+ titleStyle: titleStyle,
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ <Example
+ title="Label Styling - Text, Fonts & Box Shadow"
+ width={500}
+ height={350}
+ hideSettings={true}
+ config={{
+ labelStyle: labelStyle,
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ <Example
+ title="Lagend Styling - Text, Fonts & Box Shadow"
+ width={500}
+ height={350}
+ hideSettings={true}
+ config={{
+ legendStyle: legendStyle,
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ <Example
+ title="Axis Styling - Text, Fonts & Box Shadow"
+ width={500}
+ height={350}
+ hideSettings={true}
+ config={{
+ axisLabelStyle: {
+ "chartTextColor": "#FF8A39",
+ "chartTextSize": "20px",
+ "chartTextWeight": "bold",
+ "chartFontFamily": "Courier New",
+ "chartShadowColor": "#222222",
+ "chartBoxShadow": "2px 2px 2px"
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ </ExampleGroup>
+
</>
);
}
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx
index f7fd46951..a0038a53e 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx
@@ -6,6 +6,8 @@ import ExampleGroup from "../../common/ExampleGroup";
const ChartCompWithDefault = uiCompRegistry["hillchart"].comp;
+const data = "[\n {\n \"id\": 1,\n \"color\": \"gray\",\n \"description\": \"Validation: Sales and Marketing Strategy\",\n \"x\": 15,\n \"size\": 15\n },\n {\n \"id\": 2,\n \"color\": \"maroon\",\n \"description\": \"Improvement & Renewals\",\n \"x\": 80,\n \"size\": 10\n },\n {\n \"id\": 6,\n \"color\": \"maroon\",\n \"description\": \"Track & Measurement\",\n \"x\": 70,\n \"size\": 10\n },\n {\n \"id\": 3,\n \"color\": \"maroon\",\n \"description\": \"Salesforce Integration\",\n \"x\": 25,\n \"size\": 10\n },\n {\n \"id\": 4,\n \"color\": \"cyan\",\n \"description\": \"Marketing Tools integration\",\n \"x\": 35,\n \"size\": 10\n },\n {\n \"id\": 5,\n \"color\": \"yellow\",\n \"description\": \"Execution\",\n \"x\": 50,\n \"size\": 20\n }\n]";
+
export default function HillChartExample() {
return (
<>
@@ -21,6 +23,75 @@ export default function HillChartExample() {
}}
compFactory={ChartCompWithDefault}
/>
+ <Example
+ title="Hill Chart with Custom Data"
+ hideSettings={true}
+ width={700}
+ config={{
+ data: data,
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling properties of the Hill Chart Component."
+ >
+ <Example
+ title="Background Color"
+ hideSettings={true}
+ width={700}
+ config={{
+ data: data,
+ styles: {
+ "backgroundColor": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ <Example
+ title="Border Properties : Color, Width & Radius"
+ hideSettings={true}
+ width={700}
+ config={{
+ data: data,
+ styles: {
+ "border": "#053EFF",
+ "radius": "40px",
+ "borderWidth": "3px",
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ <Example
+ title="Margin & Padding"
+ hideSettings={true}
+ width={700}
+ config={{
+ data: data,
+ styles: {
+ "border": "#053EFF",
+ "radius": "40px",
+ "borderWidth": "3px",
+ "margin": "10px",
+ "padding": "25px",
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ <Example
+ title="Text Size"
+ hideSettings={true}
+ width={700}
+ config={{
+ data: data,
+ styles: {
+ "textSize": "30px",
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
</ExampleGroup>
</>
);
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/CollapsibleContainer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/CollapsibleContainer.tsx
index f7fb4d23c..1e12ad842 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/CollapsibleContainer.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/CollapsibleContainer.tsx
@@ -421,17 +421,3038 @@ const container = {
export default function CollapsibleContainerExample() {
return (
<>
+
<ExampleGroup
title={trans("componentDoc.basicUsage")}
description="The Following Examples Show the Basic Usage of the Collapsiable Container Component."
>
<Example
- title="Default Container"
+ title="Default Collapsible Container"
+ hideSettings={true}
+ height={500}
+ width={1000}
+ config={{
+ }}
+ compFactory={ContainerComp}
+ />
+ <Example
+ title="Custom Collapsible Container"
+ hideSettings={true}
+ height={500}
+ width={1000}
+ config={{
+ container: container,
+ }}
+ compFactory={ContainerComp}
+ />
+ <Example
+ title="Hiding Collapsible Container"
+ hideSettings={true}
+ height={500}
+ width={1000}
+ config={{
+ container: container,
+ hidden: true,
+ }}
+ compFactory={ContainerComp}
+ />
+ <Example
+ title="Disabling Collapsible Container"
hideSettings={true}
height={500}
width={1000}
config={{
container: container,
+ disabled: true,
+ }}
+ compFactory={ContainerComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Layout Options"
+ description="The Following Examples Show the different Layout Options of the Collapsiable Container Component."
+ >
+ <Example
+ title="Show Header - False"
+ hideSettings={true}
+ height={500}
+ width={1000}
+ config={{
+ container: {
+ "header": {
+ "layout": {
+ "fedaa62": {
+ "i": "fedaa62",
+ "h": 5,
+ "w": 6,
+ "x": 0,
+ "y": 0
+ },
+ "5661db3a": {
+ "i": "5661db3a",
+ "h": 5,
+ "w": 10,
+ "x": 14,
+ "y": 0
+ }
+ },
+ "items": {
+ "fedaa62": {
+ "compType": "text",
+ "comp": {
+ "text": "## Personal Details",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "left",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "style": {
+ "background": "#F5F5F6",
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0",
+ "lineHeight": "18px",
+ "links": "#3377FF"
+ },
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "text6"
+ },
+ "5661db3a": {
+ "compType": "toggleButton",
+ "comp": {
+ "value": "true",
+ "showText": false,
+ "trueText": "Hide",
+ "falseText": "Show",
+ "trueIcon": "/icon:solid/AngleUp",
+ "falseIcon": "/icon:solid/AngleDown",
+ "iconPosition": "right",
+ "alignment": "right",
+ "style": {
+ "background": "#F5F5F6",
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "lineHeight": "18px"
+ },
+ "showBorder": false,
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "toggleButton3"
+ }
+ }
+ },
+ "body": {
+ "0": {
+ "view": {
+ "layout": {
+ "c93dc520": {
+ "i": "c93dc520",
+ "h": 7,
+ "w": 10,
+ "x": 0,
+ "y": 0,
+ "pos": 0
+ },
+ "54dd6cc": {
+ "i": "54dd6cc",
+ "h": 10,
+ "w": 10,
+ "x": 14,
+ "y": 0,
+ "pos": 5
+ },
+ "aa36926a": {
+ "i": "aa36926a",
+ "h": 7,
+ "w": 10,
+ "x": 0,
+ "y": 7,
+ "pos": 1
+ },
+ "fc179ca5": {
+ "i": "fc179ca5",
+ "h": 7,
+ "w": 10,
+ "x": 14,
+ "y": 14,
+ "pos": 4
+ },
+ "99d1503e": {
+ "i": "99d1503e",
+ "h": 7,
+ "w": 10,
+ "x": 0,
+ "y": 14,
+ "pos": 6
+ }
+ },
+ "items": {
+ "c93dc520": {
+ "compType": "input",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Full Name",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "placeholder": "Full name",
+ "required": true,
+ "validationType": "Text",
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px",
+ "accent": "#3377FF"
+ },
+ "prefixIcon": "/icon:solid/file-lines",
+ "inputFieldStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "accent": "#3377FF"
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "input1"
+ },
+ "aa36926a": {
+ "compType": "input",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Email",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "placeholder": "Email Address",
+ "required": true,
+ "validationType": "Email",
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px",
+ "accent": "#3377FF"
+ },
+ "prefixIcon": "/icon:solid/inbox",
+ "inputFieldStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "accent": "#3377FF"
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "input2"
+ },
+ "54dd6cc": {
+ "compType": "radio",
+ "comp": {
+ "defaultValue": "1",
+ "value": "",
+ "label": {
+ "text": "Gender",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "options": {
+ "optionType": "manual",
+ "manual": {
+ "manual": [
+ {
+ "value": "1",
+ "label": "Male"
+ },
+ {
+ "value": "2",
+ "label": "Female"
+ }
+ ]
+ },
+ "mapData": {
+ "data": "[]"
+ }
+ },
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px",
+ "accent": "#3377FF"
+ },
+ "layout": "horizontal",
+ "inputFieldStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "staticText": "#222222",
+ "textSize": "14px",
+ "borderStyle": "solid",
+ "borderWidth": "1px",
+ "checkedBackground": "#3377FF",
+ "uncheckedBorder": "#D7D9E0",
+ "checkedBorder": "#3377FF"
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "radio1"
+ },
+ "fc179ca5": {
+ "compType": "date",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "userTimeZone": "Europe/Madrid",
+ "label": {
+ "text": "DOB",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "placeholder": "Select Date",
+ "inputFormat": "YYYY-MM-DD",
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px"
+ },
+ "suffixIcon": "/icon:regular/calendar",
+ "minDate": "1960-01-01",
+ "maxDate": "2010-12-31",
+ "inputFieldStyle": {
+ "border": "#D7D9E0",
+ "radius": "4px",
+ "text": "#222222",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "borderWidth": "1px",
+ "accent": "#3377FF"
+ },
+ "timeZone": "Europe/Madrid",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "date1"
+ },
+ "99d1503e": {
+ "compType": "numberInput",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "placeholder": "+449827222541",
+ "label": {
+ "text": "Phone #",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "formatter": "standard",
+ "step": "",
+ "controls": false,
+ "thousandsSeparator": false,
+ "prefixText": "",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "numberInput1"
+ }
+ }
+ }
+ }
+ },
+ "footer": {
+ "layout": {}
+ },
+ "showHeader": false,
+ "showBody": true,
+ "autoHeight": "auto",
+ "showVerticalScrollbar": false,
+ "horizontalGridCells": 24,
+ "scrollbars": false,
+ "style": {
+ "border": "#D7D9E0",
+ "background": "#FFFFFF",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "borderStyle": "solid",
+ "margin": "3px",
+ "padding": "3px"
+ },
+ "appliedThemeId": "default-theme-id"
+ },
+ }}
+ compFactory={ContainerComp}
+ />
+ <Example
+ title="Show Body - False"
+ hideSettings={true}
+ height={500}
+ width={1000}
+ config={{
+ container: {
+ "header": {
+ "layout": {
+ "fedaa62": {
+ "i": "fedaa62",
+ "h": 5,
+ "w": 6,
+ "x": 0,
+ "y": 0
+ },
+ "5661db3a": {
+ "i": "5661db3a",
+ "h": 5,
+ "w": 10,
+ "x": 14,
+ "y": 0
+ }
+ },
+ "items": {
+ "fedaa62": {
+ "compType": "text",
+ "comp": {
+ "text": "## Personal Details",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "left",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "style": {
+ "background": "#F5F5F6",
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0",
+ "lineHeight": "18px",
+ "links": "#3377FF"
+ },
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "text6"
+ },
+ "5661db3a": {
+ "compType": "toggleButton",
+ "comp": {
+ "value": "true",
+ "showText": false,
+ "trueText": "Hide",
+ "falseText": "Show",
+ "trueIcon": "/icon:solid/AngleUp",
+ "falseIcon": "/icon:solid/AngleDown",
+ "iconPosition": "right",
+ "alignment": "right",
+ "style": {
+ "background": "#F5F5F6",
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "lineHeight": "18px"
+ },
+ "showBorder": false,
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "toggleButton3"
+ }
+ }
+ },
+ "body": {
+ "0": {
+ "view": {
+ "layout": {
+ "c93dc520": {
+ "i": "c93dc520",
+ "h": 7,
+ "w": 10,
+ "x": 0,
+ "y": 0,
+ "pos": 0
+ },
+ "54dd6cc": {
+ "i": "54dd6cc",
+ "h": 10,
+ "w": 10,
+ "x": 14,
+ "y": 0,
+ "pos": 5
+ },
+ "aa36926a": {
+ "i": "aa36926a",
+ "h": 7,
+ "w": 10,
+ "x": 0,
+ "y": 7,
+ "pos": 1
+ },
+ "fc179ca5": {
+ "i": "fc179ca5",
+ "h": 7,
+ "w": 10,
+ "x": 14,
+ "y": 14,
+ "pos": 4
+ },
+ "99d1503e": {
+ "i": "99d1503e",
+ "h": 7,
+ "w": 10,
+ "x": 0,
+ "y": 14,
+ "pos": 6
+ }
+ },
+ "items": {
+ "c93dc520": {
+ "compType": "input",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Full Name",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "placeholder": "Full name",
+ "required": true,
+ "validationType": "Text",
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px",
+ "accent": "#3377FF"
+ },
+ "prefixIcon": "/icon:solid/file-lines",
+ "inputFieldStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "accent": "#3377FF"
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "input1"
+ },
+ "aa36926a": {
+ "compType": "input",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Email",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "placeholder": "Email Address",
+ "required": true,
+ "validationType": "Email",
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px",
+ "accent": "#3377FF"
+ },
+ "prefixIcon": "/icon:solid/inbox",
+ "inputFieldStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "accent": "#3377FF"
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "input2"
+ },
+ "54dd6cc": {
+ "compType": "radio",
+ "comp": {
+ "defaultValue": "1",
+ "value": "",
+ "label": {
+ "text": "Gender",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "options": {
+ "optionType": "manual",
+ "manual": {
+ "manual": [
+ {
+ "value": "1",
+ "label": "Male"
+ },
+ {
+ "value": "2",
+ "label": "Female"
+ }
+ ]
+ },
+ "mapData": {
+ "data": "[]"
+ }
+ },
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px",
+ "accent": "#3377FF"
+ },
+ "layout": "horizontal",
+ "inputFieldStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "staticText": "#222222",
+ "textSize": "14px",
+ "borderStyle": "solid",
+ "borderWidth": "1px",
+ "checkedBackground": "#3377FF",
+ "uncheckedBorder": "#D7D9E0",
+ "checkedBorder": "#3377FF"
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "radio1"
+ },
+ "fc179ca5": {
+ "compType": "date",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "userTimeZone": "Europe/Madrid",
+ "label": {
+ "text": "DOB",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "placeholder": "Select Date",
+ "inputFormat": "YYYY-MM-DD",
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px"
+ },
+ "suffixIcon": "/icon:regular/calendar",
+ "minDate": "1960-01-01",
+ "maxDate": "2010-12-31",
+ "inputFieldStyle": {
+ "border": "#D7D9E0",
+ "radius": "4px",
+ "text": "#222222",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "borderWidth": "1px",
+ "accent": "#3377FF"
+ },
+ "timeZone": "Europe/Madrid",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "date1"
+ },
+ "99d1503e": {
+ "compType": "numberInput",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "placeholder": "+449827222541",
+ "label": {
+ "text": "Phone #",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "formatter": "standard",
+ "step": "",
+ "controls": false,
+ "thousandsSeparator": false,
+ "prefixText": "",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "numberInput1"
+ }
+ }
+ }
+ }
+ },
+ "footer": {
+ "layout": {}
+ },
+ "showHeader": true,
+ "showBody": false,
+ "autoHeight": "auto",
+ "showVerticalScrollbar": false,
+ "horizontalGridCells": 24,
+ "scrollbars": false,
+ "style": {
+ "border": "#D7D9E0",
+ "background": "#FFFFFF",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "borderStyle": "solid",
+ "margin": "3px",
+ "padding": "3px"
+ },
+ "appliedThemeId": "default-theme-id"
+ },
+ }}
+ compFactory={ContainerComp}
+ />
+ <Example
+ title="Show Footer - True"
+ hideSettings={true}
+ height={500}
+ width={1000}
+ config={{
+ container: {
+ "header": {
+ "layout": {
+ "fedaa62": {
+ "i": "fedaa62",
+ "h": 5,
+ "w": 6,
+ "x": 0,
+ "y": 0
+ },
+ "5661db3a": {
+ "i": "5661db3a",
+ "h": 5,
+ "w": 10,
+ "x": 14,
+ "y": 0
+ }
+ },
+ "items": {
+ "fedaa62": {
+ "compType": "text",
+ "comp": {
+ "text": "## Personal Details",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "left",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "style": {
+ "background": "#F5F5F6",
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0",
+ "lineHeight": "18px",
+ "links": "#3377FF"
+ },
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "text6"
+ },
+ "5661db3a": {
+ "compType": "toggleButton",
+ "comp": {
+ "value": "true",
+ "showText": false,
+ "trueText": "Hide",
+ "falseText": "Show",
+ "trueIcon": "/icon:solid/AngleUp",
+ "falseIcon": "/icon:solid/AngleDown",
+ "iconPosition": "right",
+ "alignment": "right",
+ "style": {
+ "background": "#F5F5F6",
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "lineHeight": "18px"
+ },
+ "showBorder": false,
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "toggleButton3"
+ }
+ }
+ },
+ "body": {
+ "0": {
+ "view": {
+ "layout": {
+ "c93dc520": {
+ "i": "c93dc520",
+ "h": 7,
+ "w": 10,
+ "x": 0,
+ "y": 0,
+ "pos": 0
+ },
+ "54dd6cc": {
+ "i": "54dd6cc",
+ "h": 10,
+ "w": 10,
+ "x": 14,
+ "y": 0,
+ "pos": 5
+ },
+ "aa36926a": {
+ "i": "aa36926a",
+ "h": 7,
+ "w": 10,
+ "x": 0,
+ "y": 7,
+ "pos": 1
+ },
+ "fc179ca5": {
+ "i": "fc179ca5",
+ "h": 7,
+ "w": 10,
+ "x": 14,
+ "y": 14,
+ "pos": 4
+ },
+ "99d1503e": {
+ "i": "99d1503e",
+ "h": 7,
+ "w": 10,
+ "x": 0,
+ "y": 14,
+ "pos": 6
+ }
+ },
+ "items": {
+ "c93dc520": {
+ "compType": "input",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Full Name",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "placeholder": "Full name",
+ "required": true,
+ "validationType": "Text",
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px",
+ "accent": "#3377FF"
+ },
+ "prefixIcon": "/icon:solid/file-lines",
+ "inputFieldStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "accent": "#3377FF"
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "input1"
+ },
+ "aa36926a": {
+ "compType": "input",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Email",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "placeholder": "Email Address",
+ "required": true,
+ "validationType": "Email",
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px",
+ "accent": "#3377FF"
+ },
+ "prefixIcon": "/icon:solid/inbox",
+ "inputFieldStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "accent": "#3377FF"
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "input2"
+ },
+ "54dd6cc": {
+ "compType": "radio",
+ "comp": {
+ "defaultValue": "1",
+ "value": "",
+ "label": {
+ "text": "Gender",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "options": {
+ "optionType": "manual",
+ "manual": {
+ "manual": [
+ {
+ "value": "1",
+ "label": "Male"
+ },
+ {
+ "value": "2",
+ "label": "Female"
+ }
+ ]
+ },
+ "mapData": {
+ "data": "[]"
+ }
+ },
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px",
+ "accent": "#3377FF"
+ },
+ "layout": "horizontal",
+ "inputFieldStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "staticText": "#222222",
+ "textSize": "14px",
+ "borderStyle": "solid",
+ "borderWidth": "1px",
+ "checkedBackground": "#3377FF",
+ "uncheckedBorder": "#D7D9E0",
+ "checkedBorder": "#3377FF"
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "radio1"
+ },
+ "fc179ca5": {
+ "compType": "date",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "userTimeZone": "Europe/Madrid",
+ "label": {
+ "text": "DOB",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "placeholder": "Select Date",
+ "inputFormat": "YYYY-MM-DD",
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px"
+ },
+ "suffixIcon": "/icon:regular/calendar",
+ "minDate": "1960-01-01",
+ "maxDate": "2010-12-31",
+ "inputFieldStyle": {
+ "border": "#D7D9E0",
+ "radius": "4px",
+ "text": "#222222",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "borderWidth": "1px",
+ "accent": "#3377FF"
+ },
+ "timeZone": "Europe/Madrid",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "date1"
+ },
+ "99d1503e": {
+ "compType": "numberInput",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "placeholder": "+449827222541",
+ "label": {
+ "text": "Phone #",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "formatter": "standard",
+ "step": "",
+ "controls": false,
+ "thousandsSeparator": false,
+ "prefixText": "",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "numberInput1"
+ }
+ }
+ }
+ }
+ },
+ "footer": {
+ "layout": {}
+ },
+ "showHeader": true,
+ "showBody": true,
+ "showFooter": true,
+ "autoHeight": "auto",
+ "showVerticalScrollbar": false,
+ "horizontalGridCells": 24,
+ "scrollbars": false,
+ "style": {
+ "border": "#D7D9E0",
+ "background": "#FFFFFF",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "borderStyle": "solid",
+ "margin": "3px",
+ "padding": "3px"
+ },
+ "appliedThemeId": "default-theme-id"
+ },
+ }}
+ compFactory={ContainerComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling Properties of the Collapsiable Container Component."
+ >
+ <Example
+ title="Overall Styling"
+ hideSettings={true}
+ height={500}
+ width={1000}
+ config={{
+ container: {
+ "header": {
+ "layout": {
+ "fedaa62": {
+ "i": "fedaa62",
+ "h": 5,
+ "w": 6,
+ "x": 0,
+ "y": 0
+ },
+ "5661db3a": {
+ "i": "5661db3a",
+ "h": 5,
+ "w": 10,
+ "x": 14,
+ "y": 0
+ }
+ },
+ "items": {
+ "fedaa62": {
+ "compType": "text",
+ "comp": {
+ "text": "## Personal Details",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "left",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "style": {
+ "background": "#F5F5F6",
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0",
+ "lineHeight": "18px",
+ "links": "#3377FF"
+ },
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "text6"
+ },
+ "5661db3a": {
+ "compType": "toggleButton",
+ "comp": {
+ "value": "true",
+ "showText": false,
+ "trueText": "Hide",
+ "falseText": "Show",
+ "trueIcon": "/icon:solid/AngleUp",
+ "falseIcon": "/icon:solid/AngleDown",
+ "iconPosition": "right",
+ "alignment": "right",
+ "style": {
+ "background": "#F5F5F6",
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "lineHeight": "18px"
+ },
+ "showBorder": false,
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "toggleButton3"
+ }
+ }
+ },
+ "body": {
+ "0": {
+ "view": {
+ "layout": {
+ "c93dc520": {
+ "i": "c93dc520",
+ "h": 7,
+ "w": 10,
+ "x": 0,
+ "y": 0,
+ "pos": 0
+ },
+ "54dd6cc": {
+ "i": "54dd6cc",
+ "h": 10,
+ "w": 10,
+ "x": 14,
+ "y": 0,
+ "pos": 5
+ },
+ "aa36926a": {
+ "i": "aa36926a",
+ "h": 7,
+ "w": 10,
+ "x": 0,
+ "y": 7,
+ "pos": 1
+ },
+ "fc179ca5": {
+ "i": "fc179ca5",
+ "h": 7,
+ "w": 10,
+ "x": 14,
+ "y": 14,
+ "pos": 4
+ },
+ "99d1503e": {
+ "i": "99d1503e",
+ "h": 7,
+ "w": 10,
+ "x": 0,
+ "y": 14,
+ "pos": 6
+ }
+ },
+ "items": {
+ "c93dc520": {
+ "compType": "input",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Full Name",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "placeholder": "Full name",
+ "required": true,
+ "validationType": "Text",
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px",
+ "accent": "#3377FF"
+ },
+ "prefixIcon": "/icon:solid/file-lines",
+ "inputFieldStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "accent": "#3377FF"
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "input1"
+ },
+ "aa36926a": {
+ "compType": "input",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Email",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "placeholder": "Email Address",
+ "required": true,
+ "validationType": "Email",
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px",
+ "accent": "#3377FF"
+ },
+ "prefixIcon": "/icon:solid/inbox",
+ "inputFieldStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "accent": "#3377FF"
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "input2"
+ },
+ "54dd6cc": {
+ "compType": "radio",
+ "comp": {
+ "defaultValue": "1",
+ "value": "",
+ "label": {
+ "text": "Gender",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "options": {
+ "optionType": "manual",
+ "manual": {
+ "manual": [
+ {
+ "value": "1",
+ "label": "Male"
+ },
+ {
+ "value": "2",
+ "label": "Female"
+ }
+ ]
+ },
+ "mapData": {
+ "data": "[]"
+ }
+ },
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px",
+ "accent": "#3377FF"
+ },
+ "layout": "horizontal",
+ "inputFieldStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "staticText": "#222222",
+ "textSize": "14px",
+ "borderStyle": "solid",
+ "borderWidth": "1px",
+ "checkedBackground": "#3377FF",
+ "uncheckedBorder": "#D7D9E0",
+ "checkedBorder": "#3377FF"
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "radio1"
+ },
+ "fc179ca5": {
+ "compType": "date",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "userTimeZone": "Europe/Madrid",
+ "label": {
+ "text": "DOB",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "placeholder": "Select Date",
+ "inputFormat": "YYYY-MM-DD",
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px"
+ },
+ "suffixIcon": "/icon:regular/calendar",
+ "minDate": "1960-01-01",
+ "maxDate": "2010-12-31",
+ "inputFieldStyle": {
+ "border": "#D7D9E0",
+ "radius": "4px",
+ "text": "#222222",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "borderWidth": "1px",
+ "accent": "#3377FF"
+ },
+ "timeZone": "Europe/Madrid",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "date1"
+ },
+ "99d1503e": {
+ "compType": "numberInput",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "placeholder": "+449827222541",
+ "label": {
+ "text": "Phone #",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "formatter": "standard",
+ "step": "",
+ "controls": false,
+ "thousandsSeparator": false,
+ "prefixText": "",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "numberInput1"
+ }
+ }
+ }
+ }
+ },
+ "footer": {
+ "layout": {}
+ },
+ "showHeader": true,
+ "showBody": true,
+ "showFooter": true,
+ "autoHeight": "auto",
+ "showVerticalScrollbar": false,
+ "horizontalGridCells": 24,
+ "scrollbars": false,
+ "style": {
+ "border": "#5589F2",
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "margin": "5px",
+ "padding": "15px"
+ },
+ "appliedThemeId": "default-theme-id"
+ },
+ }}
+ compFactory={ContainerComp}
+ />
+ <Example
+ title="Header Styling"
+ hideSettings={true}
+ height={500}
+ width={1000}
+ config={{
+ container: {
+ "header": {
+ "layout": {
+ "fedaa62": {
+ "i": "fedaa62",
+ "h": 5,
+ "w": 6,
+ "x": 0,
+ "y": 0
+ },
+ "5661db3a": {
+ "i": "5661db3a",
+ "h": 5,
+ "w": 10,
+ "x": 14,
+ "y": 0
+ }
+ },
+ "items": {
+ "fedaa62": {
+ "compType": "text",
+ "comp": {
+ "text": "## Personal Details",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "left",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "style": {
+ "background": "#F5F5F6",
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0",
+ "lineHeight": "18px",
+ "links": "#3377FF"
+ },
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "text6"
+ },
+ "5661db3a": {
+ "compType": "toggleButton",
+ "comp": {
+ "value": "true",
+ "showText": false,
+ "trueText": "Hide",
+ "falseText": "Show",
+ "trueIcon": "/icon:solid/AngleUp",
+ "falseIcon": "/icon:solid/AngleDown",
+ "iconPosition": "right",
+ "alignment": "right",
+ "style": {
+ "background": "#F5F5F6",
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "lineHeight": "18px"
+ },
+ "showBorder": false,
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "toggleButton3"
+ }
+ }
+ },
+ "body": {
+ "0": {
+ "view": {
+ "layout": {
+ "c93dc520": {
+ "i": "c93dc520",
+ "h": 7,
+ "w": 10,
+ "x": 0,
+ "y": 0,
+ "pos": 0
+ },
+ "54dd6cc": {
+ "i": "54dd6cc",
+ "h": 10,
+ "w": 10,
+ "x": 14,
+ "y": 0,
+ "pos": 5
+ },
+ "aa36926a": {
+ "i": "aa36926a",
+ "h": 7,
+ "w": 10,
+ "x": 0,
+ "y": 7,
+ "pos": 1
+ },
+ "fc179ca5": {
+ "i": "fc179ca5",
+ "h": 7,
+ "w": 10,
+ "x": 14,
+ "y": 14,
+ "pos": 4
+ },
+ "99d1503e": {
+ "i": "99d1503e",
+ "h": 7,
+ "w": 10,
+ "x": 0,
+ "y": 14,
+ "pos": 6
+ }
+ },
+ "items": {
+ "c93dc520": {
+ "compType": "input",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Full Name",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "placeholder": "Full name",
+ "required": true,
+ "validationType": "Text",
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px",
+ "accent": "#3377FF"
+ },
+ "prefixIcon": "/icon:solid/file-lines",
+ "inputFieldStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "accent": "#3377FF"
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "input1"
+ },
+ "aa36926a": {
+ "compType": "input",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Email",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "placeholder": "Email Address",
+ "required": true,
+ "validationType": "Email",
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px",
+ "accent": "#3377FF"
+ },
+ "prefixIcon": "/icon:solid/inbox",
+ "inputFieldStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "accent": "#3377FF"
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "input2"
+ },
+ "54dd6cc": {
+ "compType": "radio",
+ "comp": {
+ "defaultValue": "1",
+ "value": "",
+ "label": {
+ "text": "Gender",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "options": {
+ "optionType": "manual",
+ "manual": {
+ "manual": [
+ {
+ "value": "1",
+ "label": "Male"
+ },
+ {
+ "value": "2",
+ "label": "Female"
+ }
+ ]
+ },
+ "mapData": {
+ "data": "[]"
+ }
+ },
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px",
+ "accent": "#3377FF"
+ },
+ "layout": "horizontal",
+ "inputFieldStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "staticText": "#222222",
+ "textSize": "14px",
+ "borderStyle": "solid",
+ "borderWidth": "1px",
+ "checkedBackground": "#3377FF",
+ "uncheckedBorder": "#D7D9E0",
+ "checkedBorder": "#3377FF"
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "radio1"
+ },
+ "fc179ca5": {
+ "compType": "date",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "userTimeZone": "Europe/Madrid",
+ "label": {
+ "text": "DOB",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "placeholder": "Select Date",
+ "inputFormat": "YYYY-MM-DD",
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px"
+ },
+ "suffixIcon": "/icon:regular/calendar",
+ "minDate": "1960-01-01",
+ "maxDate": "2010-12-31",
+ "inputFieldStyle": {
+ "border": "#D7D9E0",
+ "radius": "4px",
+ "text": "#222222",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "borderWidth": "1px",
+ "accent": "#3377FF"
+ },
+ "timeZone": "Europe/Madrid",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "date1"
+ },
+ "99d1503e": {
+ "compType": "numberInput",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "placeholder": "+449827222541",
+ "label": {
+ "text": "Phone #",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "formatter": "standard",
+ "step": "",
+ "controls": false,
+ "thousandsSeparator": false,
+ "prefixText": "",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "numberInput1"
+ }
+ }
+ }
+ }
+ },
+ "footer": {
+ "layout": {}
+ },
+ "showHeader": true,
+ "showBody": true,
+ "showFooter": true,
+ "autoHeight": "auto",
+ "showVerticalScrollbar": false,
+ "horizontalGridCells": 24,
+ "scrollbars": false,
+ "style": {
+ "border": "#5589F2",
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "margin": "5px",
+ "padding": "15px"
+ },
+ "headerStyle": {
+ "containerHeaderPadding": "20px",
+ "headerBackground": "#E68E50"
+ },
+ "appliedThemeId": "default-theme-id"
+ },
+ }}
+ compFactory={ContainerComp}
+ />
+ <Example
+ title="Body Styling"
+ hideSettings={true}
+ height={500}
+ width={1000}
+ config={{
+ container: {
+ "header": {
+ "layout": {
+ "fedaa62": {
+ "i": "fedaa62",
+ "h": 5,
+ "w": 6,
+ "x": 0,
+ "y": 0
+ },
+ "5661db3a": {
+ "i": "5661db3a",
+ "h": 5,
+ "w": 10,
+ "x": 14,
+ "y": 0
+ }
+ },
+ "items": {
+ "fedaa62": {
+ "compType": "text",
+ "comp": {
+ "text": "## Personal Details",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "left",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "style": {
+ "background": "#F5F5F6",
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0",
+ "lineHeight": "18px",
+ "links": "#3377FF"
+ },
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "text6"
+ },
+ "5661db3a": {
+ "compType": "toggleButton",
+ "comp": {
+ "value": "true",
+ "showText": false,
+ "trueText": "Hide",
+ "falseText": "Show",
+ "trueIcon": "/icon:solid/AngleUp",
+ "falseIcon": "/icon:solid/AngleDown",
+ "iconPosition": "right",
+ "alignment": "right",
+ "style": {
+ "background": "#F5F5F6",
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "lineHeight": "18px"
+ },
+ "showBorder": false,
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "toggleButton3"
+ }
+ }
+ },
+ "body": {
+ "0": {
+ "view": {
+ "layout": {
+ "c93dc520": {
+ "i": "c93dc520",
+ "h": 7,
+ "w": 10,
+ "x": 0,
+ "y": 0,
+ "pos": 0
+ },
+ "54dd6cc": {
+ "i": "54dd6cc",
+ "h": 10,
+ "w": 10,
+ "x": 14,
+ "y": 0,
+ "pos": 5
+ },
+ "aa36926a": {
+ "i": "aa36926a",
+ "h": 7,
+ "w": 10,
+ "x": 0,
+ "y": 7,
+ "pos": 1
+ },
+ "fc179ca5": {
+ "i": "fc179ca5",
+ "h": 7,
+ "w": 10,
+ "x": 14,
+ "y": 14,
+ "pos": 4
+ },
+ "99d1503e": {
+ "i": "99d1503e",
+ "h": 7,
+ "w": 10,
+ "x": 0,
+ "y": 14,
+ "pos": 6
+ }
+ },
+ "items": {
+ "c93dc520": {
+ "compType": "input",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Full Name",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "placeholder": "Full name",
+ "required": true,
+ "validationType": "Text",
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px",
+ "accent": "#3377FF"
+ },
+ "prefixIcon": "/icon:solid/file-lines",
+ "inputFieldStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "accent": "#3377FF"
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "input1"
+ },
+ "aa36926a": {
+ "compType": "input",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Email",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "placeholder": "Email Address",
+ "required": true,
+ "validationType": "Email",
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px",
+ "accent": "#3377FF"
+ },
+ "prefixIcon": "/icon:solid/inbox",
+ "inputFieldStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "accent": "#3377FF"
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "input2"
+ },
+ "54dd6cc": {
+ "compType": "radio",
+ "comp": {
+ "defaultValue": "1",
+ "value": "",
+ "label": {
+ "text": "Gender",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "options": {
+ "optionType": "manual",
+ "manual": {
+ "manual": [
+ {
+ "value": "1",
+ "label": "Male"
+ },
+ {
+ "value": "2",
+ "label": "Female"
+ }
+ ]
+ },
+ "mapData": {
+ "data": "[]"
+ }
+ },
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px",
+ "accent": "#3377FF"
+ },
+ "layout": "horizontal",
+ "inputFieldStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "staticText": "#222222",
+ "textSize": "14px",
+ "borderStyle": "solid",
+ "borderWidth": "1px",
+ "checkedBackground": "#3377FF",
+ "uncheckedBorder": "#D7D9E0",
+ "checkedBorder": "#3377FF"
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "radio1"
+ },
+ "fc179ca5": {
+ "compType": "date",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "userTimeZone": "Europe/Madrid",
+ "label": {
+ "text": "DOB",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "placeholder": "Select Date",
+ "inputFormat": "YYYY-MM-DD",
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px"
+ },
+ "suffixIcon": "/icon:regular/calendar",
+ "minDate": "1960-01-01",
+ "maxDate": "2010-12-31",
+ "inputFieldStyle": {
+ "border": "#D7D9E0",
+ "radius": "4px",
+ "text": "#222222",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "borderWidth": "1px",
+ "accent": "#3377FF"
+ },
+ "timeZone": "Europe/Madrid",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "date1"
+ },
+ "99d1503e": {
+ "compType": "numberInput",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "placeholder": "+449827222541",
+ "label": {
+ "text": "Phone #",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "formatter": "standard",
+ "step": "",
+ "controls": false,
+ "thousandsSeparator": false,
+ "prefixText": "",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "numberInput1"
+ }
+ }
+ }
+ }
+ },
+ "footer": {
+ "layout": {}
+ },
+ "showHeader": true,
+ "showBody": true,
+ "showFooter": true,
+ "autoHeight": "auto",
+ "showVerticalScrollbar": false,
+ "horizontalGridCells": 24,
+ "scrollbars": false,
+ "style": {
+ "border": "#5589F2",
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "margin": "5px",
+ },
+ "headerStyle": {
+ "containerHeaderPadding": "20px",
+ "headerBackground": "#E68E50"
+ },
+ "bodyStyle": {
+ "containerBodyPadding": "20px",
+ "background": "#F2DB0A"
+ },
+ "appliedThemeId": "default-theme-id"
+ },
+ }}
+ compFactory={ContainerComp}
+ />
+ <Example
+ title="Footer Styling"
+ hideSettings={true}
+ height={500}
+ width={1000}
+ config={{
+ container: {
+ "header": {
+ "layout": {
+ "fedaa62": {
+ "i": "fedaa62",
+ "h": 5,
+ "w": 6,
+ "x": 0,
+ "y": 0
+ },
+ "5661db3a": {
+ "i": "5661db3a",
+ "h": 5,
+ "w": 10,
+ "x": 14,
+ "y": 0
+ }
+ },
+ "items": {
+ "fedaa62": {
+ "compType": "text",
+ "comp": {
+ "text": "## Personal Details",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "left",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "style": {
+ "background": "#F5F5F6",
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0",
+ "lineHeight": "18px",
+ "links": "#3377FF"
+ },
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "text6"
+ },
+ "5661db3a": {
+ "compType": "toggleButton",
+ "comp": {
+ "value": "true",
+ "showText": false,
+ "trueText": "Hide",
+ "falseText": "Show",
+ "trueIcon": "/icon:solid/AngleUp",
+ "falseIcon": "/icon:solid/AngleDown",
+ "iconPosition": "right",
+ "alignment": "right",
+ "style": {
+ "background": "#F5F5F6",
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "lineHeight": "18px"
+ },
+ "showBorder": false,
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "toggleButton3"
+ }
+ }
+ },
+ "body": {
+ "0": {
+ "view": {
+ "layout": {
+ "c93dc520": {
+ "i": "c93dc520",
+ "h": 7,
+ "w": 10,
+ "x": 0,
+ "y": 0,
+ "pos": 0
+ },
+ "54dd6cc": {
+ "i": "54dd6cc",
+ "h": 10,
+ "w": 10,
+ "x": 14,
+ "y": 0,
+ "pos": 5
+ },
+ "aa36926a": {
+ "i": "aa36926a",
+ "h": 7,
+ "w": 10,
+ "x": 0,
+ "y": 7,
+ "pos": 1
+ },
+ "fc179ca5": {
+ "i": "fc179ca5",
+ "h": 7,
+ "w": 10,
+ "x": 14,
+ "y": 14,
+ "pos": 4
+ },
+ "99d1503e": {
+ "i": "99d1503e",
+ "h": 7,
+ "w": 10,
+ "x": 0,
+ "y": 14,
+ "pos": 6
+ }
+ },
+ "items": {
+ "c93dc520": {
+ "compType": "input",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Full Name",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "placeholder": "Full name",
+ "required": true,
+ "validationType": "Text",
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px",
+ "accent": "#3377FF"
+ },
+ "prefixIcon": "/icon:solid/file-lines",
+ "inputFieldStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "accent": "#3377FF"
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "input1"
+ },
+ "aa36926a": {
+ "compType": "input",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Email",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "placeholder": "Email Address",
+ "required": true,
+ "validationType": "Email",
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px",
+ "accent": "#3377FF"
+ },
+ "prefixIcon": "/icon:solid/inbox",
+ "inputFieldStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "text": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "1px",
+ "accent": "#3377FF"
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "input2"
+ },
+ "54dd6cc": {
+ "compType": "radio",
+ "comp": {
+ "defaultValue": "1",
+ "value": "",
+ "label": {
+ "text": "Gender",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "options": {
+ "optionType": "manual",
+ "manual": {
+ "manual": [
+ {
+ "value": "1",
+ "label": "Male"
+ },
+ {
+ "value": "2",
+ "label": "Female"
+ }
+ ]
+ },
+ "mapData": {
+ "data": "[]"
+ }
+ },
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px",
+ "accent": "#3377FF"
+ },
+ "layout": "horizontal",
+ "inputFieldStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "staticText": "#222222",
+ "textSize": "14px",
+ "borderStyle": "solid",
+ "borderWidth": "1px",
+ "checkedBackground": "#3377FF",
+ "uncheckedBorder": "#D7D9E0",
+ "checkedBorder": "#3377FF"
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "radio1"
+ },
+ "fc179ca5": {
+ "compType": "date",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "userTimeZone": "Europe/Madrid",
+ "label": {
+ "text": "DOB",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "placeholder": "Select Date",
+ "inputFormat": "YYYY-MM-DD",
+ "style": {
+ "background": "#00000000",
+ "border": "#D7D9E0",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "radius": "4px",
+ "borderWidth": "0px",
+ "opacity": "1"
+ },
+ "labelStyle": {
+ "margin": "3px",
+ "padding": "3px",
+ "label": "#222222",
+ "textSize": "14px",
+ "border": "#D7D9E0",
+ "borderStyle": "solid",
+ "borderWidth": "0px"
+ },
+ "suffixIcon": "/icon:regular/calendar",
+ "minDate": "1960-01-01",
+ "maxDate": "2010-12-31",
+ "inputFieldStyle": {
+ "border": "#D7D9E0",
+ "radius": "4px",
+ "text": "#222222",
+ "margin": "3px",
+ "padding": "3px",
+ "borderStyle": "solid",
+ "borderWidth": "1px",
+ "accent": "#3377FF"
+ },
+ "timeZone": "Europe/Madrid",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "date1"
+ },
+ "99d1503e": {
+ "compType": "numberInput",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "placeholder": "+449827222541",
+ "label": {
+ "text": "Phone #",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "formatter": "standard",
+ "step": "",
+ "controls": false,
+ "thousandsSeparator": false,
+ "prefixText": "",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "default-theme-id",
+ "version": "latest"
+ },
+ "name": "numberInput1"
+ }
+ }
+ }
+ }
+ },
+ "footer": {
+ "layout": {}
+ },
+ "showHeader": true,
+ "showBody": true,
+ "showFooter": true,
+ "autoHeight": "auto",
+ "showVerticalScrollbar": false,
+ "horizontalGridCells": 24,
+ "scrollbars": false,
+ "style": {
+ "border": "#5589F2",
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "margin": "5px",
+ },
+ "headerStyle": {
+ "containerHeaderPadding": "20px",
+ "headerBackground": "#E68E50"
+ },
+ "bodyStyle": {
+ "containerBodyPadding": "20px",
+ "background": "#F2DB0A"
+ },
+ "footerStyle": {
+ "containerFooterPadding": "20px",
+ "footerBackground": "#EA7B7B"
+ },
+ "appliedThemeId": "default-theme-id"
+ },
}}
compFactory={ContainerComp}
/>
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx
index b86f4ce3b..0abac1936 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx
@@ -1140,6 +1140,1025 @@ export default function ColumnLayoutExample() {
compFactory={ColumnLayoutComp}
/>
</ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling Properties of the Column Layout Component."
+ >
+ <Example
+ title="Style"
+ hideSettings={true}
+ width={1000}
+ config={{
+ containers: {
+ "0": {
+ "layout": {
+ "164dcb77": {
+ "i": "164dcb77",
+ "h": 8,
+ "w": 19,
+ "x": 3,
+ "y": 4,
+ "pos": 0
+ }
+ },
+ "items": {
+ "164dcb77": {
+ "compType": "text",
+ "comp": {
+ "text": "### Row1, Column1",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text1"
+ }
+ }
+ },
+ "1": {
+ "layout": {
+ "6e4f0687": {
+ "i": "6e4f0687",
+ "h": 6,
+ "w": 24,
+ "x": 0,
+ "y": 5,
+ "pos": 0
+ }
+ },
+ "items": {
+ "6e4f0687": {
+ "compType": "text",
+ "comp": {
+ "text": "### Row1, Column2",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text3"
+ }
+ }
+ },
+ "2": {
+ "layout": {
+ "b47baba7": {
+ "i": "b47baba7",
+ "h": 10,
+ "w": 18,
+ "x": 5,
+ "y": 4,
+ "pos": 0
+ }
+ },
+ "items": {
+ "b47baba7": {
+ "compType": "text",
+ "comp": {
+ "text": "### Row1, Column3",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text2"
+ }
+ }
+ },
+ "3": {
+ "layout": {
+ "ce02a8ee": {
+ "i": "ce02a8ee",
+ "h": 8,
+ "w": 17,
+ "x": 2,
+ "y": 16,
+ "pos": 0
+ }
+ },
+ "items": {
+ "ce02a8ee": {
+ "compType": "text",
+ "comp": {
+ "text": "### Row2, Column1",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text4"
+ }
+ }
+ },
+ "4": {
+ "layout": {
+ "7ff66f36": {
+ "i": "7ff66f36",
+ "h": 6,
+ "w": 24,
+ "x": 0,
+ "y": 16,
+ "pos": 0
+ }
+ },
+ "items": {
+ "7ff66f36": {
+ "compType": "text",
+ "comp": {
+ "text": "### Row2, Column2",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text5"
+ }
+ }
+ },
+ "5": {
+ "layout": {
+ "8e25033d": {
+ "i": "8e25033d",
+ "h": 8,
+ "w": 19,
+ "x": 3,
+ "y": 16,
+ "pos": 0
+ }
+ },
+ "items": {
+ "8e25033d": {
+ "compType": "text",
+ "comp": {
+ "text": "### Row2, Column3",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text6"
+ }
+ }
+ },
+ "6": {
+ "layout": {
+ "e92230c": {
+ "i": "e92230c",
+ "h": 8,
+ "w": 19,
+ "x": 2,
+ "y": 3,
+ "pos": 0
+ }
+ },
+ "items": {
+ "e92230c": {
+ "compType": "text",
+ "comp": {
+ "text": "### Row3, Column1",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text7"
+ }
+ }
+ },
+ "7": {
+ "layout": {
+ "5e09b262": {
+ "i": "5e09b262",
+ "h": 6,
+ "w": 24,
+ "x": 0,
+ "y": 4,
+ "pos": 0
+ }
+ },
+ "items": {
+ "5e09b262": {
+ "compType": "text",
+ "comp": {
+ "text": "### Row3, Column2",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text8"
+ }
+ }
+ },
+ "8": {
+ "layout": {
+ "1bc7c61f": {
+ "i": "1bc7c61f",
+ "h": 8,
+ "w": 20,
+ "x": 1,
+ "y": 2,
+ "pos": 0
+ }
+ },
+ "items": {
+ "1bc7c61f": {
+ "compType": "text",
+ "comp": {
+ "text": "### Row3, Column3",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text9"
+ }
+ }
+ }
+ },
+ columns: {
+ "manual": [
+ {
+ "id": 0,
+ "label": "Column1",
+ "key": "Column1",
+ "minWidth": "",
+ "background": "",
+ "backgroundImage": "",
+ "border": "",
+ "radius": "",
+ "margin": "",
+ "padding": ""
+ },
+ {
+ "id": 1,
+ "label": "Column2",
+ "key": "Column2",
+ "minWidth": "",
+ "background": "",
+ "backgroundImage": "",
+ "border": "",
+ "radius": "",
+ "margin": "",
+ "padding": ""
+ },
+ {
+ "id": 2,
+ "label": "Add Column1",
+ "key": "Add Column1",
+ "minWidth": "",
+ "background": "",
+ "backgroundImage": "",
+ "border": "",
+ "radius": "",
+ "margin": "",
+ "padding": ""
+ },
+ {
+ "id": 3,
+ "label": "Add Column2",
+ "key": "Add Column2",
+ "minWidth": "",
+ "background": "",
+ "backgroundImage": "",
+ "border": "",
+ "radius": "",
+ "margin": "",
+ "padding": ""
+ },
+ {
+ "id": 4,
+ "label": "Add Column3",
+ "key": "Add Column3",
+ "minWidth": "",
+ "background": "",
+ "backgroundImage": "",
+ "border": "",
+ "radius": "",
+ "margin": "",
+ "padding": ""
+ },
+ {
+ "id": 5,
+ "label": "Add Column4",
+ "key": "Add Column4",
+ "minWidth": "",
+ "background": "",
+ "backgroundImage": "",
+ "border": "",
+ "radius": "",
+ "margin": "",
+ "padding": ""
+ },
+ {
+ "id": 6,
+ "label": "Add Column5",
+ "key": "Add Column5",
+ "minWidth": "",
+ "background": "",
+ "backgroundImage": "",
+ "border": "",
+ "radius": "",
+ "margin": "",
+ "padding": ""
+ },
+ {
+ "id": 7,
+ "label": "Add Column6",
+ "key": "Add Column6",
+ "minWidth": "",
+ "background": "",
+ "backgroundImage": "",
+ "border": "",
+ "radius": "",
+ "margin": "",
+ "padding": ""
+ },
+ {
+ "id": 8,
+ "label": "Add Column7",
+ "key": "Add Column7",
+ "minWidth": "",
+ "background": "",
+ "backgroundImage": "",
+ "border": "",
+ "radius": "",
+ "margin": "",
+ "padding": ""
+ }
+ ]
+ },
+ templateRows: "1fr 3fr 1fr",
+ templateColumns: "1fr 3fr 1fr",
+ style: {
+ "border": "#EBFF04",
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "radius": "20px",
+ "borderWidth": "5px",
+ "margin": "10px",
+ "padding": "20px",
+ },
+ matchColumnsHeight: true,
+ }}
+ compFactory={ColumnLayoutComp}
+ />
+ <Example
+ title="Style"
+ hideSettings={true}
+ width={1000}
+ config={{
+ containers: {
+ "0": {
+ "layout": {
+ "164dcb77": {
+ "i": "164dcb77",
+ "h": 8,
+ "w": 19,
+ "x": 3,
+ "y": 4,
+ "pos": 0
+ }
+ },
+ "items": {
+ "164dcb77": {
+ "compType": "text",
+ "comp": {
+ "text": "### Row1, Column1",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text1"
+ }
+ }
+ },
+ "1": {
+ "layout": {
+ "6e4f0687": {
+ "i": "6e4f0687",
+ "h": 6,
+ "w": 24,
+ "x": 0,
+ "y": 5,
+ "pos": 0
+ }
+ },
+ "items": {
+ "6e4f0687": {
+ "compType": "text",
+ "comp": {
+ "text": "### Row1, Column2",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text3"
+ }
+ }
+ },
+ "2": {
+ "layout": {
+ "b47baba7": {
+ "i": "b47baba7",
+ "h": 10,
+ "w": 18,
+ "x": 5,
+ "y": 4,
+ "pos": 0
+ }
+ },
+ "items": {
+ "b47baba7": {
+ "compType": "text",
+ "comp": {
+ "text": "### Row1, Column3",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text2"
+ }
+ }
+ },
+ "3": {
+ "layout": {
+ "ce02a8ee": {
+ "i": "ce02a8ee",
+ "h": 8,
+ "w": 17,
+ "x": 2,
+ "y": 16,
+ "pos": 0
+ }
+ },
+ "items": {
+ "ce02a8ee": {
+ "compType": "text",
+ "comp": {
+ "text": "### Row2, Column1",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text4"
+ }
+ }
+ },
+ "4": {
+ "layout": {
+ "7ff66f36": {
+ "i": "7ff66f36",
+ "h": 6,
+ "w": 24,
+ "x": 0,
+ "y": 16,
+ "pos": 0
+ }
+ },
+ "items": {
+ "7ff66f36": {
+ "compType": "text",
+ "comp": {
+ "text": "### Row2, Column2",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text5"
+ }
+ }
+ },
+ "5": {
+ "layout": {
+ "8e25033d": {
+ "i": "8e25033d",
+ "h": 8,
+ "w": 19,
+ "x": 3,
+ "y": 16,
+ "pos": 0
+ }
+ },
+ "items": {
+ "8e25033d": {
+ "compType": "text",
+ "comp": {
+ "text": "### Row2, Column3",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text6"
+ }
+ }
+ },
+ "6": {
+ "layout": {
+ "e92230c": {
+ "i": "e92230c",
+ "h": 8,
+ "w": 19,
+ "x": 2,
+ "y": 3,
+ "pos": 0
+ }
+ },
+ "items": {
+ "e92230c": {
+ "compType": "text",
+ "comp": {
+ "text": "### Row3, Column1",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text7"
+ }
+ }
+ },
+ "7": {
+ "layout": {
+ "5e09b262": {
+ "i": "5e09b262",
+ "h": 6,
+ "w": 24,
+ "x": 0,
+ "y": 4,
+ "pos": 0
+ }
+ },
+ "items": {
+ "5e09b262": {
+ "compType": "text",
+ "comp": {
+ "text": "### Row3, Column2",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text8"
+ }
+ }
+ },
+ "8": {
+ "layout": {
+ "1bc7c61f": {
+ "i": "1bc7c61f",
+ "h": 8,
+ "w": 20,
+ "x": 1,
+ "y": 2,
+ "pos": 0
+ }
+ },
+ "items": {
+ "1bc7c61f": {
+ "compType": "text",
+ "comp": {
+ "text": "### Row3, Column3",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text9"
+ }
+ }
+ }
+ },
+ columns: {
+ "manual": [
+ {
+ "id": 0,
+ "label": "Column1",
+ "key": "Column1",
+ "minWidth": "",
+ "background": "",
+ "backgroundImage": "",
+ "border": "",
+ "radius": "",
+ "margin": "",
+ "padding": ""
+ },
+ {
+ "id": 1,
+ "label": "Column2",
+ "key": "Column2",
+ "minWidth": "",
+ "background": "",
+ "backgroundImage": "",
+ "border": "",
+ "radius": "",
+ "margin": "",
+ "padding": ""
+ },
+ {
+ "id": 2,
+ "label": "Add Column1",
+ "key": "Add Column1",
+ "minWidth": "",
+ "background": "",
+ "backgroundImage": "",
+ "border": "",
+ "radius": "",
+ "margin": "",
+ "padding": ""
+ },
+ {
+ "id": 3,
+ "label": "Add Column2",
+ "key": "Add Column2",
+ "minWidth": "",
+ "background": "",
+ "backgroundImage": "",
+ "border": "",
+ "radius": "",
+ "margin": "",
+ "padding": ""
+ },
+ {
+ "id": 4,
+ "label": "Add Column3",
+ "key": "Add Column3",
+ "minWidth": "",
+ "background": "",
+ "backgroundImage": "",
+ "border": "",
+ "radius": "",
+ "margin": "",
+ "padding": ""
+ },
+ {
+ "id": 5,
+ "label": "Add Column4",
+ "key": "Add Column4",
+ "minWidth": "",
+ "background": "",
+ "backgroundImage": "",
+ "border": "",
+ "radius": "",
+ "margin": "",
+ "padding": ""
+ },
+ {
+ "id": 6,
+ "label": "Add Column5",
+ "key": "Add Column5",
+ "minWidth": "",
+ "background": "",
+ "backgroundImage": "",
+ "border": "",
+ "radius": "",
+ "margin": "",
+ "padding": ""
+ },
+ {
+ "id": 7,
+ "label": "Add Column6",
+ "key": "Add Column6",
+ "minWidth": "",
+ "background": "",
+ "backgroundImage": "",
+ "border": "",
+ "radius": "",
+ "margin": "",
+ "padding": ""
+ },
+ {
+ "id": 8,
+ "label": "Add Column7",
+ "key": "Add Column7",
+ "minWidth": "",
+ "background": "",
+ "backgroundImage": "",
+ "border": "",
+ "radius": "",
+ "margin": "",
+ "padding": ""
+ }
+ ]
+ },
+ templateRows: "1fr 3fr 1fr",
+ templateColumns: "1fr 3fr 1fr",
+ style: {
+ "border": "#EBFF04",
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "radius": "20px",
+ "borderWidth": "5px",
+ "margin": "10px",
+ "padding": "20px",
+ },
+ columnStyle: {
+ "background": "linear-gradient(45deg, #d53369 0%, #daae51 100%)",
+ "border": "#FFFF07",
+ "radius": "50px",
+ "borderWidth": "3px",
+ "borderStyle": "solid",
+ "margin": "10px",
+ "padding": "15px",
+ },
+ matchColumnsHeight: true,
+ }}
+ compFactory={ColumnLayoutComp}
+ />
+ </ExampleGroup>
</>
);
}
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx
index cc90bdf6e..40736a95a 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx
@@ -149,6 +149,7 @@ const container={
export default function ContainerExample() {
return (
<>
+
<ExampleGroup
title="Basic Usage"
description="The Following Examples Show the Basic Usage of the Container Component."
@@ -637,7 +638,665 @@ export default function ContainerExample() {
}}
compFactory={ContainerComp}
/>
- </ExampleGroup>
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling Properties of the Container Component."
+ >
+ <Example
+ title="Overall Styling"
+ hideSettings={true}
+ height={500}
+ width={1000}
+ config={{
+ container: {
+ "header": {
+ "layout": {
+ "a6083c0a": {
+ "i": "a6083c0a",
+ "h": 5,
+ "w": 24,
+ "x": 0,
+ "y": 0
+ }
+ },
+ "items": {
+ "a6083c0a": {
+ "compType": "text",
+ "comp": {
+ "text": "### Welcome Back!",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "formTitle1"
+ }
+ }
+ },
+ "body": {
+ "0": {
+ "view": {
+ "layout": {
+ "a6f7c0e4": {
+ "i": "a6f7c0e4",
+ "h": 7,
+ "w": 14,
+ "x": 0,
+ "y": 0,
+ "pos": 0
+ },
+ "c5b32ee6": {
+ "i": "c5b32ee6",
+ "h": 7,
+ "w": 14,
+ "x": 0,
+ "y": 7,
+ "pos": 1
+ }
+ },
+ "items": {
+ "a6f7c0e4": {
+ "compType": "input",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Email",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "validationType": "Email",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "input1"
+ },
+ "c5b32ee6": {
+ "compType": "password",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Password",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "validationType": "Regex",
+ "visibilityToggle": true,
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "password1"
+ }
+ }
+ }
+ }
+ },
+ "footer": {
+ "layout": {
+ "95ccf34e": {
+ "i": "95ccf34e",
+ "h": 5,
+ "w": 10,
+ "x": 14,
+ "y": 0
+ }
+ },
+ "items": {
+ "95ccf34e": {
+ "compType": "button",
+ "comp": {
+ "text": "Login",
+ "type": "submit",
+ "form": "form1",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "formButton1"
+ }
+ }
+ },
+ "showHeader": true,
+ "showBody": true,
+ "showFooter": true,
+ "autoHeight": "auto",
+ "showVerticalScrollbar": false,
+ "horizontalGridCells": 24,
+ "scrollbars": false,
+ "style": {
+ "border": "#5589F2",
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "margin": "5px",
+ "padding": "15px"
+ },
+ "appliedThemeId": ""
+ },
+ }}
+ compFactory={ContainerComp}
+ />
+ <Example
+ title="Header Styling"
+ hideSettings={true}
+ height={500}
+ width={1000}
+ config={{
+ container: {
+ "header": {
+ "layout": {
+ "a6083c0a": {
+ "i": "a6083c0a",
+ "h": 5,
+ "w": 24,
+ "x": 0,
+ "y": 0
+ }
+ },
+ "items": {
+ "a6083c0a": {
+ "compType": "text",
+ "comp": {
+ "text": "### Welcome Back!",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "formTitle1"
+ }
+ }
+ },
+ "body": {
+ "0": {
+ "view": {
+ "layout": {
+ "a6f7c0e4": {
+ "i": "a6f7c0e4",
+ "h": 7,
+ "w": 14,
+ "x": 0,
+ "y": 0,
+ "pos": 0
+ },
+ "c5b32ee6": {
+ "i": "c5b32ee6",
+ "h": 7,
+ "w": 14,
+ "x": 0,
+ "y": 7,
+ "pos": 1
+ }
+ },
+ "items": {
+ "a6f7c0e4": {
+ "compType": "input",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Email",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "validationType": "Email",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "input1"
+ },
+ "c5b32ee6": {
+ "compType": "password",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Password",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "validationType": "Regex",
+ "visibilityToggle": true,
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "password1"
+ }
+ }
+ }
+ }
+ },
+ "footer": {
+ "layout": {
+ "95ccf34e": {
+ "i": "95ccf34e",
+ "h": 5,
+ "w": 10,
+ "x": 14,
+ "y": 0
+ }
+ },
+ "items": {
+ "95ccf34e": {
+ "compType": "button",
+ "comp": {
+ "text": "Login",
+ "type": "submit",
+ "form": "form1",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "formButton1"
+ }
+ }
+ },
+ "showHeader": true,
+ "showBody": true,
+ "showFooter": true,
+ "autoHeight": "auto",
+ "showVerticalScrollbar": false,
+ "horizontalGridCells": 24,
+ "scrollbars": false,
+ "style": {
+ "border": "#5589F2",
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "margin": "5px",
+ "padding": "15px"
+ },
+ "headerStyle": {
+ "containerHeaderPadding": "20px",
+ "headerBackground": "#E68E50"
+ },
+ "appliedThemeId": ""
+ },
+ }}
+ compFactory={ContainerComp}
+ />
+ <Example
+ title="Body Styling"
+ hideSettings={true}
+ height={500}
+ width={1000}
+ config={{
+ container: {
+ "header": {
+ "layout": {
+ "a6083c0a": {
+ "i": "a6083c0a",
+ "h": 5,
+ "w": 24,
+ "x": 0,
+ "y": 0
+ }
+ },
+ "items": {
+ "a6083c0a": {
+ "compType": "text",
+ "comp": {
+ "text": "### Welcome Back!",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "formTitle1"
+ }
+ }
+ },
+ "body": {
+ "0": {
+ "view": {
+ "layout": {
+ "a6f7c0e4": {
+ "i": "a6f7c0e4",
+ "h": 7,
+ "w": 14,
+ "x": 0,
+ "y": 0,
+ "pos": 0
+ },
+ "c5b32ee6": {
+ "i": "c5b32ee6",
+ "h": 7,
+ "w": 14,
+ "x": 0,
+ "y": 7,
+ "pos": 1
+ }
+ },
+ "items": {
+ "a6f7c0e4": {
+ "compType": "input",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Email",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "validationType": "Email",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "input1"
+ },
+ "c5b32ee6": {
+ "compType": "password",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Password",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "validationType": "Regex",
+ "visibilityToggle": true,
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "password1"
+ }
+ }
+ }
+ }
+ },
+ "footer": {
+ "layout": {
+ "95ccf34e": {
+ "i": "95ccf34e",
+ "h": 5,
+ "w": 10,
+ "x": 14,
+ "y": 0
+ }
+ },
+ "items": {
+ "95ccf34e": {
+ "compType": "button",
+ "comp": {
+ "text": "Login",
+ "type": "submit",
+ "form": "form1",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "formButton1"
+ }
+ }
+ },
+ "showHeader": true,
+ "showBody": true,
+ "showFooter": true,
+ "autoHeight": "auto",
+ "showVerticalScrollbar": false,
+ "horizontalGridCells": 24,
+ "scrollbars": false,
+ "style": {
+ "border": "#5589F2",
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "margin": "5px",
+ "padding": "15px",
+ },
+ "headerStyle": {
+ "containerHeaderPadding": "20px",
+ "headerBackground": "#E68E50",
+ },
+ "bodyStyle": {
+ "containerBodyPadding": "20px",
+ "background": "#F2DB0A",
+ },
+ "appliedThemeId": ""
+ },
+ }}
+ compFactory={ContainerComp}
+ />
+ <Example
+ title="Footer Styling"
+ hideSettings={true}
+ height={500}
+ width={1000}
+ config={{
+ container: {
+ "header": {
+ "layout": {
+ "a6083c0a": {
+ "i": "a6083c0a",
+ "h": 5,
+ "w": 24,
+ "x": 0,
+ "y": 0
+ }
+ },
+ "items": {
+ "a6083c0a": {
+ "compType": "text",
+ "comp": {
+ "text": "### Welcome Back!",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "formTitle1"
+ }
+ }
+ },
+ "body": {
+ "0": {
+ "view": {
+ "layout": {
+ "a6f7c0e4": {
+ "i": "a6f7c0e4",
+ "h": 7,
+ "w": 14,
+ "x": 0,
+ "y": 0,
+ "pos": 0
+ },
+ "c5b32ee6": {
+ "i": "c5b32ee6",
+ "h": 7,
+ "w": 14,
+ "x": 0,
+ "y": 7,
+ "pos": 1
+ }
+ },
+ "items": {
+ "a6f7c0e4": {
+ "compType": "input",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Email",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "validationType": "Email",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "input1"
+ },
+ "c5b32ee6": {
+ "compType": "password",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Password",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "validationType": "Regex",
+ "visibilityToggle": true,
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "password1"
+ }
+ }
+ }
+ }
+ },
+ "footer": {
+ "layout": {
+ "95ccf34e": {
+ "i": "95ccf34e",
+ "h": 5,
+ "w": 10,
+ "x": 14,
+ "y": 0
+ }
+ },
+ "items": {
+ "95ccf34e": {
+ "compType": "button",
+ "comp": {
+ "text": "Login",
+ "type": "submit",
+ "form": "form1",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "formButton1"
+ }
+ }
+ },
+ "showHeader": true,
+ "showBody": true,
+ "showFooter": true,
+ "autoHeight": "auto",
+ "showVerticalScrollbar": false,
+ "horizontalGridCells": 24,
+ "scrollbars": false,
+ "style": {
+ "border": "#5589F2",
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "margin": "5px",
+ "padding": "15px",
+ },
+ "headerStyle": {
+ "containerHeaderPadding": "20px",
+ "headerBackground": "#E68E50",
+ },
+ "bodyStyle": {
+ "containerBodyPadding": "20px",
+ "background": "#F2DB0A",
+ },
+ "footerStyle": {
+ "containerFooterPadding": "20px",
+ "footerBackground": "#EA7B7B"
+ },
+ "appliedThemeId": ""
+ },
+ }}
+ compFactory={ContainerComp}
+ />
+ </ExampleGroup>
</>
);
}
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx
index a80ce5f57..3c1d84e38 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx
@@ -619,7 +619,7 @@ const container={
"siderScrollbars": false,
"contentScrollbars": false,
"mainScrollbars": false,
- "appliedThemeId": ""
+ "appliedThemeId": "",
};
export default function PageLayoutExample() {
@@ -659,7 +659,7 @@ export default function PageLayoutExample() {
<ExampleGroup
title="Layout"
- description="The Following Examples Show the Layout options on Component."
+ description="The Following Examples Show the Layout options on the Page Layout Component."
>
<Example
title="Hiding Page Layout Header"
@@ -5049,6 +5049,3280 @@ export default function PageLayoutExample() {
compFactory={PageLayoutComp}
/>
</ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling properties of the Page Layout Component."
+ >
+ <Example
+ title="Style"
+ hideSettings={true}
+ config={{
+ container: {
+ "header": {
+ "layout": {
+ "f7820dbc": {
+ "i": "f7820dbc",
+ "h": 6,
+ "w": 24,
+ "x": 0,
+ "y": 0,
+ "pos": 0
+ }
+ },
+ "items": {
+ "f7820dbc": {
+ "compType": "text",
+ "comp": {
+ "text": "### Page Layout Header",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text1"
+ }
+ }
+ },
+ "sider": {
+ "layout": {
+ "a9d16086": {
+ "i": "a9d16086",
+ "h": 6,
+ "w": 22,
+ "x": 0,
+ "y": 0,
+ "pos": 0
+ }
+ },
+ "items": {
+ "a9d16086": {
+ "compType": "dropdown",
+ "comp": {
+ "text": "Menu",
+ "options": {
+ "optionType": "manual",
+ "manual": {
+ "manual": [
+ {
+ "label": "Option 1"
+ },
+ {
+ "label": "Option 2"
+ }
+ ]
+ },
+ "mapData": {
+ "data": "[]"
+ }
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "dropdown1"
+ }
+ }
+ },
+ "body": {
+ "0": {
+ "view": {
+ "layout": {
+ "163bc2f3": {
+ "i": "163bc2f3",
+ "h": 45,
+ "w": 21,
+ "x": 3,
+ "y": 0,
+ "pos": 0
+ }
+ },
+ "items": {
+ "163bc2f3": {
+ "compType": "table",
+ "comp": {
+ "showRowGridBorder": true,
+ "showHRowGridBorder": true,
+ "autoHeight": "auto",
+ "data": "[\n {\n \"id\": 1,\n \"name\": \"Reagen Gilberthorpe\",\n \"date\": \"7/5/2022\",\n \"department\": \"Marketing\"\n },\n {\n \"id\": 2,\n \"name\": \"Haroun Lortzing\",\n \"date\": \"11/6/2022\",\n \"department\": \"Human Resources\"\n },\n {\n \"id\": 3,\n \"name\": \"Garret Kilmaster\",\n \"date\": \"11/14/2021\",\n \"department\": \"Research and Development\"\n },\n {\n \"id\": 4,\n \"name\": \"Israel Harrowsmith\",\n \"date\": \"4/3/2022\",\n \"department\": \"Training\"\n },\n {\n \"id\": 5,\n \"name\": \"Loren O'Lagen\",\n \"date\": \"9/10/2022\",\n \"department\": \"Services\"\n },\n {\n \"id\": 6,\n \"name\": \"Wallis Hothersall\",\n \"date\": \"4/18/2022\",\n \"department\": \"Accounting\"\n },\n {\n \"id\": 7,\n \"name\": \"Kaia Biskup\",\n \"date\": \"3/4/2022\",\n \"department\": \"Sales\"\n },\n {\n \"id\": 8,\n \"name\": \"Travers Saterweyte\",\n \"date\": \"1/9/2022\",\n \"department\": \"Human Resources\"\n },\n {\n \"id\": 9,\n \"name\": \"Mikey Niemetz\",\n \"date\": \"1/4/2022\",\n \"department\": \"Marketing\"\n },\n {\n \"id\": 10,\n \"name\": \"Mano Meckiff\",\n \"date\": \"2/19/2022\",\n \"department\": \"Research and Development\"\n }\n]",
+ "showDataLoadSpinner": true,
+ "columns": [
+ {
+ "title": "ID",
+ "showTitle": true,
+ "isCustom": false,
+ "dataIndex": "id",
+ "width": "55",
+ "autoWidth": "fixed",
+ "render": {
+ "compType": "text",
+ "comp": {
+ "text": "{{currentCell}}"
+ }
+ },
+ "align": "left",
+ "fixed": "close",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "borderWidth": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": "",
+ "summaryColumns": [
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ }
+ ]
+ },
+ {
+ "title": "Name",
+ "showTitle": true,
+ "isCustom": false,
+ "dataIndex": "name",
+ "width": "200",
+ "autoWidth": "fixed",
+ "render": {
+ "compType": "text",
+ "comp": {
+ "text": "{{currentCell}}"
+ }
+ },
+ "align": "left",
+ "fixed": "close",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "borderWidth": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": "",
+ "summaryColumns": [
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ }
+ ]
+ },
+ {
+ "title": "Date",
+ "showTitle": true,
+ "isCustom": false,
+ "dataIndex": "date",
+ "width": "110",
+ "autoWidth": "fixed",
+ "render": {
+ "compType": "text",
+ "comp": {
+ "text": "{{currentCell}}"
+ }
+ },
+ "align": "left",
+ "fixed": "close",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "borderWidth": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": "",
+ "summaryColumns": [
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ }
+ ]
+ },
+ {
+ "title": "Department",
+ "showTitle": true,
+ "isCustom": false,
+ "dataIndex": "department",
+ "width": "250",
+ "autoWidth": "fixed",
+ "render": {
+ "compType": "tag",
+ "comp": {
+ "text": "{{currentCell}}",
+ "tagColors": {
+ "optionType": "manual",
+ "manual": {
+ "manual": [
+ {
+ "label": "Tag1",
+ "icon": "/icon:solid/tag",
+ "color": "#f50"
+ },
+ {
+ "label": "Tag2",
+ "icon": "/icon:solid/tag",
+ "color": "#2db7f5"
+ }
+ ]
+ },
+ "mapData": {
+ "data": "[]",
+ "mapData": {
+ "color": ""
+ }
+ }
+ }
+ }
+ },
+ "align": "left",
+ "fixed": "close",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "borderWidth": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": "",
+ "summaryColumns": [
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ }
+ ]
+ }
+ ],
+ "size": "middle",
+ "selection": {
+ "mode": "single"
+ },
+ "pagination": {
+ "changeablePageSize": null,
+ "pageSizeOptions": "[5, 10, 20, 50]"
+ },
+ "sort": [],
+ "toolbar": {
+ "showRefresh": true,
+ "showDownload": true,
+ "showFilter": true,
+ "position": "below",
+ "columnSeparator": ",",
+ "showUpdateButtons": true
+ },
+ "summaryRows": "1",
+ "rowAutoHeight": "auto",
+ "tableAutoHeight": "auto",
+ "expansion": {
+ "slot": {
+ "container": {
+ "layout": {}
+ }
+ }
+ },
+ "editModeClicks": "single",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "table1"
+ }
+ }
+ }
+ }
+ },
+ "footer": {
+ "layout": {
+ "3a74e36e": {
+ "i": "3a74e36e",
+ "h": 6,
+ "w": 24,
+ "x": 0,
+ "y": 2,
+ "pos": 0
+ }
+ },
+ "items": {
+ "3a74e36e": {
+ "compType": "text",
+ "comp": {
+ "text": "### Page Layout Footer",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "style": {
+ "background": "#fff"
+ },
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text2"
+ }
+ }
+ },
+ "showHeader": true,
+ "showSider": true,
+ "innerSider": true,
+ "siderCollapsible": true,
+ "siderCollapsed": true,
+ "siderRight": false,
+ "siderWidth": "20%",
+ "siderCollapsedWidth": "0",
+ "showFooter": true,
+ "horizontalGridCells": 24,
+ "autoHeight": "auto",
+ "siderScrollbars": false,
+ "contentScrollbars": false,
+ "mainScrollbars": false,
+ "appliedThemeId": "",
+ "style": {
+ "border": "#6D83F2",
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "borderStyle": "dashed",
+ "margin": "5px",
+ "padding": "10px"
+ },
+ },
+ }}
+ compFactory={PageLayoutComp}
+ />
+ <Example
+ title="Header Styling"
+ hideSettings={true}
+ config={{
+ container: {
+ "header": {
+ "layout": {
+ "f7820dbc": {
+ "i": "f7820dbc",
+ "h": 6,
+ "w": 24,
+ "x": 0,
+ "y": 0,
+ "pos": 0
+ }
+ },
+ "items": {
+ "f7820dbc": {
+ "compType": "text",
+ "comp": {
+ "text": "### Page Layout Header",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text1"
+ }
+ }
+ },
+ "sider": {
+ "layout": {
+ "a9d16086": {
+ "i": "a9d16086",
+ "h": 6,
+ "w": 22,
+ "x": 0,
+ "y": 0,
+ "pos": 0
+ }
+ },
+ "items": {
+ "a9d16086": {
+ "compType": "dropdown",
+ "comp": {
+ "text": "Menu",
+ "options": {
+ "optionType": "manual",
+ "manual": {
+ "manual": [
+ {
+ "label": "Option 1"
+ },
+ {
+ "label": "Option 2"
+ }
+ ]
+ },
+ "mapData": {
+ "data": "[]"
+ }
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "dropdown1"
+ }
+ }
+ },
+ "body": {
+ "0": {
+ "view": {
+ "layout": {
+ "163bc2f3": {
+ "i": "163bc2f3",
+ "h": 45,
+ "w": 21,
+ "x": 3,
+ "y": 0,
+ "pos": 0
+ }
+ },
+ "items": {
+ "163bc2f3": {
+ "compType": "table",
+ "comp": {
+ "showRowGridBorder": true,
+ "showHRowGridBorder": true,
+ "autoHeight": "auto",
+ "data": "[\n {\n \"id\": 1,\n \"name\": \"Reagen Gilberthorpe\",\n \"date\": \"7/5/2022\",\n \"department\": \"Marketing\"\n },\n {\n \"id\": 2,\n \"name\": \"Haroun Lortzing\",\n \"date\": \"11/6/2022\",\n \"department\": \"Human Resources\"\n },\n {\n \"id\": 3,\n \"name\": \"Garret Kilmaster\",\n \"date\": \"11/14/2021\",\n \"department\": \"Research and Development\"\n },\n {\n \"id\": 4,\n \"name\": \"Israel Harrowsmith\",\n \"date\": \"4/3/2022\",\n \"department\": \"Training\"\n },\n {\n \"id\": 5,\n \"name\": \"Loren O'Lagen\",\n \"date\": \"9/10/2022\",\n \"department\": \"Services\"\n },\n {\n \"id\": 6,\n \"name\": \"Wallis Hothersall\",\n \"date\": \"4/18/2022\",\n \"department\": \"Accounting\"\n },\n {\n \"id\": 7,\n \"name\": \"Kaia Biskup\",\n \"date\": \"3/4/2022\",\n \"department\": \"Sales\"\n },\n {\n \"id\": 8,\n \"name\": \"Travers Saterweyte\",\n \"date\": \"1/9/2022\",\n \"department\": \"Human Resources\"\n },\n {\n \"id\": 9,\n \"name\": \"Mikey Niemetz\",\n \"date\": \"1/4/2022\",\n \"department\": \"Marketing\"\n },\n {\n \"id\": 10,\n \"name\": \"Mano Meckiff\",\n \"date\": \"2/19/2022\",\n \"department\": \"Research and Development\"\n }\n]",
+ "showDataLoadSpinner": true,
+ "columns": [
+ {
+ "title": "ID",
+ "showTitle": true,
+ "isCustom": false,
+ "dataIndex": "id",
+ "width": "55",
+ "autoWidth": "fixed",
+ "render": {
+ "compType": "text",
+ "comp": {
+ "text": "{{currentCell}}"
+ }
+ },
+ "align": "left",
+ "fixed": "close",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "borderWidth": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": "",
+ "summaryColumns": [
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ }
+ ]
+ },
+ {
+ "title": "Name",
+ "showTitle": true,
+ "isCustom": false,
+ "dataIndex": "name",
+ "width": "200",
+ "autoWidth": "fixed",
+ "render": {
+ "compType": "text",
+ "comp": {
+ "text": "{{currentCell}}"
+ }
+ },
+ "align": "left",
+ "fixed": "close",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "borderWidth": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": "",
+ "summaryColumns": [
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ }
+ ]
+ },
+ {
+ "title": "Date",
+ "showTitle": true,
+ "isCustom": false,
+ "dataIndex": "date",
+ "width": "110",
+ "autoWidth": "fixed",
+ "render": {
+ "compType": "text",
+ "comp": {
+ "text": "{{currentCell}}"
+ }
+ },
+ "align": "left",
+ "fixed": "close",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "borderWidth": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": "",
+ "summaryColumns": [
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ }
+ ]
+ },
+ {
+ "title": "Department",
+ "showTitle": true,
+ "isCustom": false,
+ "dataIndex": "department",
+ "width": "250",
+ "autoWidth": "fixed",
+ "render": {
+ "compType": "tag",
+ "comp": {
+ "text": "{{currentCell}}",
+ "tagColors": {
+ "optionType": "manual",
+ "manual": {
+ "manual": [
+ {
+ "label": "Tag1",
+ "icon": "/icon:solid/tag",
+ "color": "#f50"
+ },
+ {
+ "label": "Tag2",
+ "icon": "/icon:solid/tag",
+ "color": "#2db7f5"
+ }
+ ]
+ },
+ "mapData": {
+ "data": "[]",
+ "mapData": {
+ "color": ""
+ }
+ }
+ }
+ }
+ },
+ "align": "left",
+ "fixed": "close",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "borderWidth": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": "",
+ "summaryColumns": [
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ }
+ ]
+ }
+ ],
+ "size": "middle",
+ "selection": {
+ "mode": "single"
+ },
+ "pagination": {
+ "changeablePageSize": null,
+ "pageSizeOptions": "[5, 10, 20, 50]"
+ },
+ "sort": [],
+ "toolbar": {
+ "showRefresh": true,
+ "showDownload": true,
+ "showFilter": true,
+ "position": "below",
+ "columnSeparator": ",",
+ "showUpdateButtons": true
+ },
+ "summaryRows": "1",
+ "rowAutoHeight": "auto",
+ "tableAutoHeight": "auto",
+ "expansion": {
+ "slot": {
+ "container": {
+ "layout": {}
+ }
+ }
+ },
+ "editModeClicks": "single",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "table1"
+ }
+ }
+ }
+ }
+ },
+ "footer": {
+ "layout": {
+ "3a74e36e": {
+ "i": "3a74e36e",
+ "h": 6,
+ "w": 24,
+ "x": 0,
+ "y": 2,
+ "pos": 0
+ }
+ },
+ "items": {
+ "3a74e36e": {
+ "compType": "text",
+ "comp": {
+ "text": "### Page Layout Footer",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "style": {
+ "background": "#fff"
+ },
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text2"
+ }
+ }
+ },
+ "showHeader": true,
+ "showSider": true,
+ "innerSider": true,
+ "siderCollapsible": true,
+ "siderCollapsed": true,
+ "siderRight": false,
+ "siderWidth": "20%",
+ "siderCollapsedWidth": "0",
+ "showFooter": true,
+ "horizontalGridCells": 24,
+ "autoHeight": "auto",
+ "siderScrollbars": false,
+ "contentScrollbars": false,
+ "mainScrollbars": false,
+ "appliedThemeId": "",
+ "style": {
+ "border": "#6D83F2",
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "borderStyle": "dashed",
+ "margin": "5px",
+ "padding": "10px"
+ },
+ "headerStyle": {
+ "containerHeaderPadding": "20px",
+ "headerBackground": "#E68E50"
+ },
+ },
+ }}
+ compFactory={PageLayoutComp}
+ />
+ <Example
+ title="Sider Styling"
+ hideSettings={true}
+ config={{
+ container: {
+ "header": {
+ "layout": {
+ "f7820dbc": {
+ "i": "f7820dbc",
+ "h": 6,
+ "w": 24,
+ "x": 0,
+ "y": 0,
+ "pos": 0
+ }
+ },
+ "items": {
+ "f7820dbc": {
+ "compType": "text",
+ "comp": {
+ "text": "### Page Layout Header",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text1"
+ }
+ }
+ },
+ "sider": {
+ "layout": {
+ "a9d16086": {
+ "i": "a9d16086",
+ "h": 6,
+ "w": 22,
+ "x": 0,
+ "y": 0,
+ "pos": 0
+ }
+ },
+ "items": {
+ "a9d16086": {
+ "compType": "dropdown",
+ "comp": {
+ "text": "Menu",
+ "options": {
+ "optionType": "manual",
+ "manual": {
+ "manual": [
+ {
+ "label": "Option 1"
+ },
+ {
+ "label": "Option 2"
+ }
+ ]
+ },
+ "mapData": {
+ "data": "[]"
+ }
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "dropdown1"
+ }
+ }
+ },
+ "body": {
+ "0": {
+ "view": {
+ "layout": {
+ "163bc2f3": {
+ "i": "163bc2f3",
+ "h": 45,
+ "w": 21,
+ "x": 3,
+ "y": 0,
+ "pos": 0
+ }
+ },
+ "items": {
+ "163bc2f3": {
+ "compType": "table",
+ "comp": {
+ "showRowGridBorder": true,
+ "showHRowGridBorder": true,
+ "autoHeight": "auto",
+ "data": "[\n {\n \"id\": 1,\n \"name\": \"Reagen Gilberthorpe\",\n \"date\": \"7/5/2022\",\n \"department\": \"Marketing\"\n },\n {\n \"id\": 2,\n \"name\": \"Haroun Lortzing\",\n \"date\": \"11/6/2022\",\n \"department\": \"Human Resources\"\n },\n {\n \"id\": 3,\n \"name\": \"Garret Kilmaster\",\n \"date\": \"11/14/2021\",\n \"department\": \"Research and Development\"\n },\n {\n \"id\": 4,\n \"name\": \"Israel Harrowsmith\",\n \"date\": \"4/3/2022\",\n \"department\": \"Training\"\n },\n {\n \"id\": 5,\n \"name\": \"Loren O'Lagen\",\n \"date\": \"9/10/2022\",\n \"department\": \"Services\"\n },\n {\n \"id\": 6,\n \"name\": \"Wallis Hothersall\",\n \"date\": \"4/18/2022\",\n \"department\": \"Accounting\"\n },\n {\n \"id\": 7,\n \"name\": \"Kaia Biskup\",\n \"date\": \"3/4/2022\",\n \"department\": \"Sales\"\n },\n {\n \"id\": 8,\n \"name\": \"Travers Saterweyte\",\n \"date\": \"1/9/2022\",\n \"department\": \"Human Resources\"\n },\n {\n \"id\": 9,\n \"name\": \"Mikey Niemetz\",\n \"date\": \"1/4/2022\",\n \"department\": \"Marketing\"\n },\n {\n \"id\": 10,\n \"name\": \"Mano Meckiff\",\n \"date\": \"2/19/2022\",\n \"department\": \"Research and Development\"\n }\n]",
+ "showDataLoadSpinner": true,
+ "columns": [
+ {
+ "title": "ID",
+ "showTitle": true,
+ "isCustom": false,
+ "dataIndex": "id",
+ "width": "55",
+ "autoWidth": "fixed",
+ "render": {
+ "compType": "text",
+ "comp": {
+ "text": "{{currentCell}}"
+ }
+ },
+ "align": "left",
+ "fixed": "close",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "borderWidth": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": "",
+ "summaryColumns": [
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ }
+ ]
+ },
+ {
+ "title": "Name",
+ "showTitle": true,
+ "isCustom": false,
+ "dataIndex": "name",
+ "width": "200",
+ "autoWidth": "fixed",
+ "render": {
+ "compType": "text",
+ "comp": {
+ "text": "{{currentCell}}"
+ }
+ },
+ "align": "left",
+ "fixed": "close",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "borderWidth": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": "",
+ "summaryColumns": [
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ }
+ ]
+ },
+ {
+ "title": "Date",
+ "showTitle": true,
+ "isCustom": false,
+ "dataIndex": "date",
+ "width": "110",
+ "autoWidth": "fixed",
+ "render": {
+ "compType": "text",
+ "comp": {
+ "text": "{{currentCell}}"
+ }
+ },
+ "align": "left",
+ "fixed": "close",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "borderWidth": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": "",
+ "summaryColumns": [
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ }
+ ]
+ },
+ {
+ "title": "Department",
+ "showTitle": true,
+ "isCustom": false,
+ "dataIndex": "department",
+ "width": "250",
+ "autoWidth": "fixed",
+ "render": {
+ "compType": "tag",
+ "comp": {
+ "text": "{{currentCell}}",
+ "tagColors": {
+ "optionType": "manual",
+ "manual": {
+ "manual": [
+ {
+ "label": "Tag1",
+ "icon": "/icon:solid/tag",
+ "color": "#f50"
+ },
+ {
+ "label": "Tag2",
+ "icon": "/icon:solid/tag",
+ "color": "#2db7f5"
+ }
+ ]
+ },
+ "mapData": {
+ "data": "[]",
+ "mapData": {
+ "color": ""
+ }
+ }
+ }
+ }
+ },
+ "align": "left",
+ "fixed": "close",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "borderWidth": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": "",
+ "summaryColumns": [
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ }
+ ]
+ }
+ ],
+ "size": "middle",
+ "selection": {
+ "mode": "single"
+ },
+ "pagination": {
+ "changeablePageSize": null,
+ "pageSizeOptions": "[5, 10, 20, 50]"
+ },
+ "sort": [],
+ "toolbar": {
+ "showRefresh": true,
+ "showDownload": true,
+ "showFilter": true,
+ "position": "below",
+ "columnSeparator": ",",
+ "showUpdateButtons": true
+ },
+ "summaryRows": "1",
+ "rowAutoHeight": "auto",
+ "tableAutoHeight": "auto",
+ "expansion": {
+ "slot": {
+ "container": {
+ "layout": {}
+ }
+ }
+ },
+ "editModeClicks": "single",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "table1"
+ }
+ }
+ }
+ }
+ },
+ "footer": {
+ "layout": {
+ "3a74e36e": {
+ "i": "3a74e36e",
+ "h": 6,
+ "w": 24,
+ "x": 0,
+ "y": 2,
+ "pos": 0
+ }
+ },
+ "items": {
+ "3a74e36e": {
+ "compType": "text",
+ "comp": {
+ "text": "### Page Layout Footer",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "style": {
+ "background": "#fff"
+ },
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text2"
+ }
+ }
+ },
+ "showHeader": true,
+ "showSider": true,
+ "innerSider": true,
+ "siderCollapsible": true,
+ "siderCollapsed": true,
+ "siderRight": false,
+ "siderWidth": "20%",
+ "siderCollapsedWidth": "0",
+ "showFooter": true,
+ "horizontalGridCells": 24,
+ "autoHeight": "auto",
+ "siderScrollbars": false,
+ "contentScrollbars": false,
+ "mainScrollbars": false,
+ "appliedThemeId": "",
+ "style": {
+ "border": "#6D83F2",
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "borderStyle": "dashed",
+ "margin": "5px",
+ "padding": "10px"
+ },
+ "siderStyle": {
+ "containerSiderPadding": "15px",
+ "siderBackground": "#5589F2",
+ },
+ "headerStyle": {
+ "containerHeaderPadding": "20px",
+ "headerBackground": "#E68E50"
+ },
+ },
+ }}
+ compFactory={PageLayoutComp}
+ />
+ <Example
+ title="Body Styling"
+ hideSettings={true}
+ config={{
+ container: {
+ "header": {
+ "layout": {
+ "f7820dbc": {
+ "i": "f7820dbc",
+ "h": 6,
+ "w": 24,
+ "x": 0,
+ "y": 0,
+ "pos": 0
+ }
+ },
+ "items": {
+ "f7820dbc": {
+ "compType": "text",
+ "comp": {
+ "text": "### Page Layout Header",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text1"
+ }
+ }
+ },
+ "sider": {
+ "layout": {
+ "a9d16086": {
+ "i": "a9d16086",
+ "h": 6,
+ "w": 22,
+ "x": 0,
+ "y": 0,
+ "pos": 0
+ }
+ },
+ "items": {
+ "a9d16086": {
+ "compType": "dropdown",
+ "comp": {
+ "text": "Menu",
+ "options": {
+ "optionType": "manual",
+ "manual": {
+ "manual": [
+ {
+ "label": "Option 1"
+ },
+ {
+ "label": "Option 2"
+ }
+ ]
+ },
+ "mapData": {
+ "data": "[]"
+ }
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "dropdown1"
+ }
+ }
+ },
+ "body": {
+ "0": {
+ "view": {
+ "layout": {
+ "163bc2f3": {
+ "i": "163bc2f3",
+ "h": 45,
+ "w": 21,
+ "x": 3,
+ "y": 0,
+ "pos": 0
+ }
+ },
+ "items": {
+ "163bc2f3": {
+ "compType": "table",
+ "comp": {
+ "showRowGridBorder": true,
+ "showHRowGridBorder": true,
+ "autoHeight": "auto",
+ "data": "[\n {\n \"id\": 1,\n \"name\": \"Reagen Gilberthorpe\",\n \"date\": \"7/5/2022\",\n \"department\": \"Marketing\"\n },\n {\n \"id\": 2,\n \"name\": \"Haroun Lortzing\",\n \"date\": \"11/6/2022\",\n \"department\": \"Human Resources\"\n },\n {\n \"id\": 3,\n \"name\": \"Garret Kilmaster\",\n \"date\": \"11/14/2021\",\n \"department\": \"Research and Development\"\n },\n {\n \"id\": 4,\n \"name\": \"Israel Harrowsmith\",\n \"date\": \"4/3/2022\",\n \"department\": \"Training\"\n },\n {\n \"id\": 5,\n \"name\": \"Loren O'Lagen\",\n \"date\": \"9/10/2022\",\n \"department\": \"Services\"\n },\n {\n \"id\": 6,\n \"name\": \"Wallis Hothersall\",\n \"date\": \"4/18/2022\",\n \"department\": \"Accounting\"\n },\n {\n \"id\": 7,\n \"name\": \"Kaia Biskup\",\n \"date\": \"3/4/2022\",\n \"department\": \"Sales\"\n },\n {\n \"id\": 8,\n \"name\": \"Travers Saterweyte\",\n \"date\": \"1/9/2022\",\n \"department\": \"Human Resources\"\n },\n {\n \"id\": 9,\n \"name\": \"Mikey Niemetz\",\n \"date\": \"1/4/2022\",\n \"department\": \"Marketing\"\n },\n {\n \"id\": 10,\n \"name\": \"Mano Meckiff\",\n \"date\": \"2/19/2022\",\n \"department\": \"Research and Development\"\n }\n]",
+ "showDataLoadSpinner": true,
+ "columns": [
+ {
+ "title": "ID",
+ "showTitle": true,
+ "isCustom": false,
+ "dataIndex": "id",
+ "width": "55",
+ "autoWidth": "fixed",
+ "render": {
+ "compType": "text",
+ "comp": {
+ "text": "{{currentCell}}"
+ }
+ },
+ "align": "left",
+ "fixed": "close",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "borderWidth": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": "",
+ "summaryColumns": [
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ }
+ ]
+ },
+ {
+ "title": "Name",
+ "showTitle": true,
+ "isCustom": false,
+ "dataIndex": "name",
+ "width": "200",
+ "autoWidth": "fixed",
+ "render": {
+ "compType": "text",
+ "comp": {
+ "text": "{{currentCell}}"
+ }
+ },
+ "align": "left",
+ "fixed": "close",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "borderWidth": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": "",
+ "summaryColumns": [
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ }
+ ]
+ },
+ {
+ "title": "Date",
+ "showTitle": true,
+ "isCustom": false,
+ "dataIndex": "date",
+ "width": "110",
+ "autoWidth": "fixed",
+ "render": {
+ "compType": "text",
+ "comp": {
+ "text": "{{currentCell}}"
+ }
+ },
+ "align": "left",
+ "fixed": "close",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "borderWidth": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": "",
+ "summaryColumns": [
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ }
+ ]
+ },
+ {
+ "title": "Department",
+ "showTitle": true,
+ "isCustom": false,
+ "dataIndex": "department",
+ "width": "250",
+ "autoWidth": "fixed",
+ "render": {
+ "compType": "tag",
+ "comp": {
+ "text": "{{currentCell}}",
+ "tagColors": {
+ "optionType": "manual",
+ "manual": {
+ "manual": [
+ {
+ "label": "Tag1",
+ "icon": "/icon:solid/tag",
+ "color": "#f50"
+ },
+ {
+ "label": "Tag2",
+ "icon": "/icon:solid/tag",
+ "color": "#2db7f5"
+ }
+ ]
+ },
+ "mapData": {
+ "data": "[]",
+ "mapData": {
+ "color": ""
+ }
+ }
+ }
+ }
+ },
+ "align": "left",
+ "fixed": "close",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "borderWidth": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": "",
+ "summaryColumns": [
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ }
+ ]
+ }
+ ],
+ "size": "middle",
+ "selection": {
+ "mode": "single"
+ },
+ "pagination": {
+ "changeablePageSize": null,
+ "pageSizeOptions": "[5, 10, 20, 50]"
+ },
+ "sort": [],
+ "toolbar": {
+ "showRefresh": true,
+ "showDownload": true,
+ "showFilter": true,
+ "position": "below",
+ "columnSeparator": ",",
+ "showUpdateButtons": true
+ },
+ "summaryRows": "1",
+ "rowAutoHeight": "auto",
+ "tableAutoHeight": "auto",
+ "expansion": {
+ "slot": {
+ "container": {
+ "layout": {}
+ }
+ }
+ },
+ "editModeClicks": "single",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "table1"
+ }
+ }
+ }
+ }
+ },
+ "footer": {
+ "layout": {
+ "3a74e36e": {
+ "i": "3a74e36e",
+ "h": 6,
+ "w": 24,
+ "x": 0,
+ "y": 2,
+ "pos": 0
+ }
+ },
+ "items": {
+ "3a74e36e": {
+ "compType": "text",
+ "comp": {
+ "text": "### Page Layout Footer",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "style": {
+ "background": "#fff"
+ },
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text2"
+ }
+ }
+ },
+ "showHeader": true,
+ "showSider": true,
+ "innerSider": true,
+ "siderCollapsible": true,
+ "siderCollapsed": true,
+ "siderRight": false,
+ "siderWidth": "20%",
+ "siderCollapsedWidth": "0",
+ "showFooter": true,
+ "horizontalGridCells": 24,
+ "autoHeight": "auto",
+ "siderScrollbars": false,
+ "contentScrollbars": false,
+ "mainScrollbars": false,
+ "appliedThemeId": "",
+ "style": {
+ "border": "#6D83F2",
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "borderStyle": "dashed",
+ "margin": "5px",
+ "padding": "10px"
+ },
+ "siderStyle": {
+ "containerSiderPadding": "15px",
+ "siderBackground": "#5589F2",
+ },
+ "headerStyle": {
+ "containerHeaderPadding": "20px",
+ "headerBackground": "#E68E50"
+ },
+ "bodyStyle":{
+ "containerBodyPadding": "20px",
+ "background": "linear-gradient(45deg, #cfd9df 0%, #e2ebf0 100%)"
+ },
+ },
+ }}
+ compFactory={PageLayoutComp}
+ />
+
+ <Example
+ title="Body Styling"
+ hideSettings={true}
+ config={{
+ container: {
+ "header": {
+ "layout": {
+ "f7820dbc": {
+ "i": "f7820dbc",
+ "h": 6,
+ "w": 24,
+ "x": 0,
+ "y": 0,
+ "pos": 0
+ }
+ },
+ "items": {
+ "f7820dbc": {
+ "compType": "text",
+ "comp": {
+ "text": "### Page Layout Header",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text1"
+ }
+ }
+ },
+ "sider": {
+ "layout": {
+ "a9d16086": {
+ "i": "a9d16086",
+ "h": 6,
+ "w": 22,
+ "x": 0,
+ "y": 0,
+ "pos": 0
+ }
+ },
+ "items": {
+ "a9d16086": {
+ "compType": "dropdown",
+ "comp": {
+ "text": "Menu",
+ "options": {
+ "optionType": "manual",
+ "manual": {
+ "manual": [
+ {
+ "label": "Option 1"
+ },
+ {
+ "label": "Option 2"
+ }
+ ]
+ },
+ "mapData": {
+ "data": "[]"
+ }
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "dropdown1"
+ }
+ }
+ },
+ "body": {
+ "0": {
+ "view": {
+ "layout": {
+ "163bc2f3": {
+ "i": "163bc2f3",
+ "h": 45,
+ "w": 21,
+ "x": 3,
+ "y": 0,
+ "pos": 0
+ }
+ },
+ "items": {
+ "163bc2f3": {
+ "compType": "table",
+ "comp": {
+ "showRowGridBorder": true,
+ "showHRowGridBorder": true,
+ "autoHeight": "auto",
+ "data": "[\n {\n \"id\": 1,\n \"name\": \"Reagen Gilberthorpe\",\n \"date\": \"7/5/2022\",\n \"department\": \"Marketing\"\n },\n {\n \"id\": 2,\n \"name\": \"Haroun Lortzing\",\n \"date\": \"11/6/2022\",\n \"department\": \"Human Resources\"\n },\n {\n \"id\": 3,\n \"name\": \"Garret Kilmaster\",\n \"date\": \"11/14/2021\",\n \"department\": \"Research and Development\"\n },\n {\n \"id\": 4,\n \"name\": \"Israel Harrowsmith\",\n \"date\": \"4/3/2022\",\n \"department\": \"Training\"\n },\n {\n \"id\": 5,\n \"name\": \"Loren O'Lagen\",\n \"date\": \"9/10/2022\",\n \"department\": \"Services\"\n },\n {\n \"id\": 6,\n \"name\": \"Wallis Hothersall\",\n \"date\": \"4/18/2022\",\n \"department\": \"Accounting\"\n },\n {\n \"id\": 7,\n \"name\": \"Kaia Biskup\",\n \"date\": \"3/4/2022\",\n \"department\": \"Sales\"\n },\n {\n \"id\": 8,\n \"name\": \"Travers Saterweyte\",\n \"date\": \"1/9/2022\",\n \"department\": \"Human Resources\"\n },\n {\n \"id\": 9,\n \"name\": \"Mikey Niemetz\",\n \"date\": \"1/4/2022\",\n \"department\": \"Marketing\"\n },\n {\n \"id\": 10,\n \"name\": \"Mano Meckiff\",\n \"date\": \"2/19/2022\",\n \"department\": \"Research and Development\"\n }\n]",
+ "showDataLoadSpinner": true,
+ "columns": [
+ {
+ "title": "ID",
+ "showTitle": true,
+ "isCustom": false,
+ "dataIndex": "id",
+ "width": "55",
+ "autoWidth": "fixed",
+ "render": {
+ "compType": "text",
+ "comp": {
+ "text": "{{currentCell}}"
+ }
+ },
+ "align": "left",
+ "fixed": "close",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "borderWidth": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": "",
+ "summaryColumns": [
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ }
+ ]
+ },
+ {
+ "title": "Name",
+ "showTitle": true,
+ "isCustom": false,
+ "dataIndex": "name",
+ "width": "200",
+ "autoWidth": "fixed",
+ "render": {
+ "compType": "text",
+ "comp": {
+ "text": "{{currentCell}}"
+ }
+ },
+ "align": "left",
+ "fixed": "close",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "borderWidth": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": "",
+ "summaryColumns": [
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ }
+ ]
+ },
+ {
+ "title": "Date",
+ "showTitle": true,
+ "isCustom": false,
+ "dataIndex": "date",
+ "width": "110",
+ "autoWidth": "fixed",
+ "render": {
+ "compType": "text",
+ "comp": {
+ "text": "{{currentCell}}"
+ }
+ },
+ "align": "left",
+ "fixed": "close",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "borderWidth": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": "",
+ "summaryColumns": [
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ }
+ ]
+ },
+ {
+ "title": "Department",
+ "showTitle": true,
+ "isCustom": false,
+ "dataIndex": "department",
+ "width": "250",
+ "autoWidth": "fixed",
+ "render": {
+ "compType": "tag",
+ "comp": {
+ "text": "{{currentCell}}",
+ "tagColors": {
+ "optionType": "manual",
+ "manual": {
+ "manual": [
+ {
+ "label": "Tag1",
+ "icon": "/icon:solid/tag",
+ "color": "#f50"
+ },
+ {
+ "label": "Tag2",
+ "icon": "/icon:solid/tag",
+ "color": "#2db7f5"
+ }
+ ]
+ },
+ "mapData": {
+ "data": "[]",
+ "mapData": {
+ "color": ""
+ }
+ }
+ }
+ }
+ },
+ "align": "left",
+ "fixed": "close",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "borderWidth": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": "",
+ "summaryColumns": [
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ },
+ {
+ "isCustom": false,
+ "dataIndex": "",
+ "render": {
+ "compType": "text",
+ "comp": {}
+ },
+ "align": "left",
+ "background": "",
+ "margin": "",
+ "text": "",
+ "border": "",
+ "radius": "",
+ "textSize": "",
+ "textWeight": "normal",
+ "fontFamily": "sans-serif",
+ "fontStyle": "normal",
+ "textOverflow": "ellipsis",
+ "linkColor": "#3377ff",
+ "linkHoverColor": "",
+ "linkActiveColor": ""
+ }
+ ]
+ }
+ ],
+ "size": "middle",
+ "selection": {
+ "mode": "single"
+ },
+ "pagination": {
+ "changeablePageSize": null,
+ "pageSizeOptions": "[5, 10, 20, 50]"
+ },
+ "sort": [],
+ "toolbar": {
+ "showRefresh": true,
+ "showDownload": true,
+ "showFilter": true,
+ "position": "below",
+ "columnSeparator": ",",
+ "showUpdateButtons": true
+ },
+ "summaryRows": "1",
+ "rowAutoHeight": "auto",
+ "tableAutoHeight": "auto",
+ "expansion": {
+ "slot": {
+ "container": {
+ "layout": {}
+ }
+ }
+ },
+ "editModeClicks": "single",
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "table1"
+ }
+ }
+ }
+ }
+ },
+ "footer": {
+ "layout": {
+ "3a74e36e": {
+ "i": "3a74e36e",
+ "h": 6,
+ "w": 24,
+ "x": 0,
+ "y": 2,
+ "pos": 0
+ }
+ },
+ "items": {
+ "3a74e36e": {
+ "compType": "text",
+ "comp": {
+ "text": "### Page Layout Footer",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "style": {
+ "background": "#fff"
+ },
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "text2"
+ }
+ }
+ },
+ "showHeader": true,
+ "showSider": true,
+ "innerSider": true,
+ "siderCollapsible": true,
+ "siderCollapsed": true,
+ "siderRight": false,
+ "siderWidth": "20%",
+ "siderCollapsedWidth": "0",
+ "showFooter": true,
+ "horizontalGridCells": 24,
+ "autoHeight": "auto",
+ "siderScrollbars": false,
+ "contentScrollbars": false,
+ "mainScrollbars": false,
+ "appliedThemeId": "",
+ "style": {
+ "border": "#6D83F2",
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "borderStyle": "dashed",
+ "margin": "5px",
+ "padding": "10px"
+ },
+ "siderStyle": {
+ "containerSiderPadding": "15px",
+ "siderBackground": "#5589F2",
+ },
+ "headerStyle": {
+ "containerHeaderPadding": "20px",
+ "headerBackground": "#E68E50"
+ },
+ "bodyStyle":{
+ "containerBodyPadding": "20px",
+ "background": "linear-gradient(45deg, #cfd9df 0%, #e2ebf0 100%)"
+ },
+ "footerStyle":{
+ "containerFooterPadding": "20px",
+ "footerBackground": "#E67373"
+ },
+ },
+ }}
+ compFactory={PageLayoutComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Animation Style"
+ description="The Following Examples Show different Animation Styles on the Page Layout Component."
+ >
+ <Example
+ title="Bounce Animation"
+ width={1000}
+ hideSettings={true}
+ config={{
+ container: container,
+ animationStyle:
+ {
+ "animation": "bounce",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite",
+ },
+ }}
+ compFactory={PageLayoutComp}
+ />
+ <Example
+ title="Swing Animation"
+ width={1000}
+ hideSettings={true}
+ config={{
+ container: container,
+ animationStyle: {
+ "animation": "swing",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={PageLayoutComp}
+ />
+ <Example
+ title="Tada Animation"
+ width={1000}
+ hideSettings={true}
+ config={{
+ container: container,
+ animationStyle: {
+ "animation": "tada",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={PageLayoutComp}
+ />
+ </ExampleGroup>
</>
);
}
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ResponsiveLayout.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ResponsiveLayout.tsx
index 23152d129..02e34dd8a 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ResponsiveLayout.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ResponsiveLayout.tsx
@@ -342,7 +342,7 @@ export default function ResponsiveLayoutExample() {
<>
<ExampleGroup
title="Basic Usage"
- description="The Following Examples Show the Basic Usage of the Component."
+ description="The Following Examples Show the Basic Usage of the Responsive Layout Component."
>
<Example
title="Hiding the Component"
@@ -376,7 +376,7 @@ export default function ResponsiveLayoutExample() {
<ExampleGroup
title="Layout"
- description="The Following Examples Show the Layout options on Component."
+ description="The Following Examples Show the Layout options on the Responsive Layout Component."
>
<Example
title="Column Height - Matching"
@@ -420,6 +420,181 @@ export default function ResponsiveLayoutExample() {
compFactory={ResponsiveLayoutComp}
/>
</ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling properties of the Responsive Layout Component."
+ >
+ <Example
+ title="Row Styling"
+ hideSettings={true}
+ width={1000}
+ config={{
+ containers: container,
+ columns: column,
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "border": "#043BFD",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "borderStyle": "dashed",
+ "margin": "5px",
+ "padding": "20px",
+ },
+ rowBreak: true,
+ }}
+ compFactory={ResponsiveLayoutComp}
+ />
+ <Example
+ title="Column Styling"
+ hideSettings={true}
+ width={1000}
+ config={{
+ containers: container,
+ columns: column,
+ columnStyle:
+ {
+ "background": "linear-gradient(90deg, RGBA(250, 112, 154, 1) 0%, rgba(254,225,64,1) 100%)",
+ "border": "#222222",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "borderStyle": "solid",
+ "margin": "5px",
+ "padding": "10px",
+ },
+ style:
+ {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "border": "#043BFD",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "borderStyle": "dashed",
+ "margin": "5px",
+ "padding": "20px",
+ },
+ rowBreak: true,
+ }}
+ compFactory={ResponsiveLayoutComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Animation Style"
+ description="The Following Examples Show different Animation Styles on the Responsive Layout Component."
+ >
+ <Example
+ title="Bounce Animation"
+ width={1000}
+ hideSettings={true}
+ config={{
+ containers: container,
+ columns: column,
+ columnStyle:
+ {
+ "background": "linear-gradient(90deg, RGBA(250, 112, 154, 1) 0%, rgba(254,225,64,1) 100%)",
+ "border": "#222222",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "borderStyle": "solid",
+ "margin": "5px",
+ "padding": "10px",
+ },
+ style:
+ {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "border": "#043BFD",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "borderStyle": "dashed",
+ "margin": "5px",
+ "padding": "20px",
+ },
+ rowBreak: true,
+ animationStyle:
+ {
+ "animation": "bounce",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite",
+ },
+ }}
+ compFactory={ResponsiveLayoutComp}
+ />
+ <Example
+ title="Swing Animation"
+ width={1000}
+ hideSettings={true}
+ config={{
+ containers: container,
+ columns: column,
+ columnStyle:
+ {
+ "background": "linear-gradient(90deg, RGBA(250, 112, 154, 1) 0%, rgba(254,225,64,1) 100%)",
+ "border": "#222222",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "borderStyle": "solid",
+ "margin": "5px",
+ "padding": "10px",
+ },
+ style:
+ {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "border": "#043BFD",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "borderStyle": "dashed",
+ "margin": "5px",
+ "padding": "20px",
+ },
+ rowBreak: true,
+ animationStyle: {
+ "animation": "swing",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={ResponsiveLayoutComp}
+ />
+ <Example
+ title="Tada Animation"
+ width={1000}
+ hideSettings={true}
+ config={{
+ containers: container,
+ columns: column,
+ columnStyle:
+ {
+ "background": "linear-gradient(90deg, RGBA(250, 112, 154, 1) 0%, rgba(254,225,64,1) 100%)",
+ "border": "#222222",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "borderStyle": "solid",
+ "margin": "5px",
+ "padding": "10px",
+ },
+ style:
+ {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "border": "#043BFD",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "borderStyle": "dashed",
+ "margin": "5px",
+ "padding": "20px",
+ },
+ rowBreak: true,
+ animationStyle: {
+ "animation": "tada",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={ResponsiveLayoutComp}
+ />
+ </ExampleGroup>
</>
);
}
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/SplitLayout.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/SplitLayout.tsx
index 84cade537..b25f0c150 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/SplitLayout.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/SplitLayout.tsx
@@ -71,6 +71,17 @@ export default function SplitLayoutExample() {
}}
compFactory={SplitLayoutComp}
/>
+ <Example
+ title="Hiding the Split Layout component"
+ hideSettings={true}
+ width={1000}
+ config={{
+ bodyStyle: bodyStyle,
+ columnStyle: columnStyle,
+ hidden: true,
+ }}
+ compFactory={SplitLayoutComp}
+ />
<Example
title="Multiple Split Layout containers ( Click on the icon at the center on right side ) "
hideSettings={true}
@@ -185,8 +196,11 @@ export default function SplitLayoutExample() {
bodyStyle: {
"background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
"border": "#222222",
- "borderWidth": "2px",
+ "borderWidth": "3px",
"padding": "10px",
+ "borderRadius": "20px",
+ "margin": "5px",
+ "borderStyle": "dashed",
},
columnStyle: columnStyle,
}}
@@ -201,14 +215,71 @@ export default function SplitLayoutExample() {
columnStyle: {
"background": "linear-gradient(0deg, #f43b47 0%, #453a94 100%)",
"border": "#222222",
- "borderWidth": "2px",
+ "borderWidth": "3px",
"borderStyle": "solid",
"margin": "10px",
+ "padding": "20px",
+ "borderRadius": "20px",
},
}}
compFactory={SplitLayoutComp}
/>
</ExampleGroup>
+
+ <ExampleGroup
+ title="Animation Style"
+ description="The Following Examples Show different Animation Styles on the Split Layout Component."
+ >
+ <Example
+ title="Bounce Animation"
+ width={1000}
+ hideSettings={true}
+ config={{
+ bodyStyle: bodyStyle,
+ columnStyle: columnStyle,
+ animationStyle:
+ {
+ "animation": "bounce",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite",
+ },
+ }}
+ compFactory={SplitLayoutComp}
+ />
+ <Example
+ title="Swing Animation"
+ width={1000}
+ hideSettings={true}
+ config={{
+ bodyStyle: bodyStyle,
+ columnStyle: columnStyle,
+ animationStyle: {
+ "animation": "swing",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={SplitLayoutComp}
+ />
+ <Example
+ title="Tada Animation"
+ width={1000}
+ hideSettings={true}
+ config={{
+ bodyStyle: bodyStyle,
+ columnStyle: columnStyle,
+ animationStyle: {
+ "animation": "tada",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={SplitLayoutComp}
+ />
+ </ExampleGroup>
</>
);
}
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx
index 599157687..93c78ec9c 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx
@@ -248,10 +248,18 @@ const tab={
export default function TabbedContainerExample() {
return (
<>
+
<ExampleGroup
title="Basic Usage"
description="The Following Examples Show the Basic Usage of the Tabbed Container Component."
>
+ <Example
+ title="Default Tabbed Container Component"
+ hideSettings={true}
+ config={{
+ }}
+ compFactory={TabbedContainerComp}
+ />
<Example
title="Hiding the Tabbed Container Component"
hideSettings={true}
@@ -365,6 +373,229 @@ export default function TabbedContainerExample() {
compFactory={TabbedContainerComp}
/>
</ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling Properties of the Tabbed Container Component."
+ >
+ <Example
+ title="Overall Component Styling"
+ hideSettings={true}
+ config={{
+ containers: container,
+ tabs: tab,
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "margin": "5px",
+ "padding": "15px",
+ "tabText": "#7F7F86",
+ "textTransform": "Uppercase",
+ "textDecoration": "underline",
+ "textSize": "20px",
+ "textWeight": "bold",
+ "fontFamily": "Courier New",
+ "fontStyle": "italic",
+ "border": "#5589F2",
+ "borderStyle": "solid",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "accent": "#222222",
+ },
+ }}
+ compFactory={TabbedContainerComp}
+ />
+ <Example
+ title="Header Styling"
+ hideSettings={true}
+ config={{
+ containers: container,
+ tabs: tab,
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "margin": "5px",
+ "padding": "15px",
+ "tabText": "#7F7F86",
+ "textTransform": "Uppercase",
+ "textDecoration": "underline",
+ "textSize": "20px",
+ "textWeight": "bold",
+ "fontFamily": "Courier New",
+ "fontStyle": "italic",
+ "border": "#5589F2",
+ "borderStyle": "solid",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "accent": "#222222",
+ },
+ headerStyle:{
+ "containerHeaderPadding": "10px",
+ "headerBackground": "#FFE607"
+ },
+ }}
+ compFactory={TabbedContainerComp}
+ />
+ <Example
+ title="Body Styling"
+ hideSettings={true}
+ config={{
+ containers: container,
+ tabs: tab,
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "margin": "5px",
+ "padding": "15px",
+ "tabText": "#7F7F86",
+ "textTransform": "Uppercase",
+ "textDecoration": "underline",
+ "textSize": "20px",
+ "textWeight": "bold",
+ "fontFamily": "Courier New",
+ "fontStyle": "italic",
+ "border": "#5589F2",
+ "borderStyle": "solid",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "accent": "#222222",
+ },
+ headerStyle:{
+ "containerHeaderPadding": "10px",
+ "headerBackground": "#FFE607",
+ },
+ bodyStyle:{
+ "containerBodyPadding": "20px",
+ "background": "#E1825A",
+ },
+ }}
+ compFactory={TabbedContainerComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Animation Style"
+ description="The Following Examples Show different Animation Styles on the Tabbed Container Component."
+ >
+ <Example
+ title="Bounce Animation"
+ hideSettings={true}
+ config={{
+ containers: container,
+ tabs: tab,
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "margin": "5px",
+ "padding": "15px",
+ "tabText": "#7F7F86",
+ "textTransform": "Uppercase",
+ "textDecoration": "underline",
+ "textSize": "20px",
+ "textWeight": "bold",
+ "fontFamily": "Courier New",
+ "fontStyle": "italic",
+ "border": "#5589F2",
+ "borderStyle": "solid",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "accent": "#222222",
+ },
+ headerStyle:{
+ "containerHeaderPadding": "10px",
+ "headerBackground": "#FFE607",
+ },
+ bodyStyle:{
+ "containerBodyPadding": "20px",
+ "background": "#E1825A",
+ },
+ animationStyle:
+ {
+ "animation": "bounce",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite",
+ },
+ }}
+ compFactory={TabbedContainerComp}
+ />
+ <Example
+ title="Swing Animation"
+ hideSettings={true}
+ config={{
+ containers: container,
+ tabs: tab,
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "margin": "5px",
+ "padding": "15px",
+ "tabText": "#7F7F86",
+ "textTransform": "Uppercase",
+ "textDecoration": "underline",
+ "textSize": "20px",
+ "textWeight": "bold",
+ "fontFamily": "Courier New",
+ "fontStyle": "italic",
+ "border": "#5589F2",
+ "borderStyle": "solid",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "accent": "#222222",
+ },
+ headerStyle:{
+ "containerHeaderPadding": "10px",
+ "headerBackground": "#FFE607",
+ },
+ bodyStyle:{
+ "containerBodyPadding": "20px",
+ "background": "#E1825A",
+ },
+ animationStyle: {
+ "animation": "swing",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={TabbedContainerComp}
+ />
+ <Example
+ title="Tada Animation"
+ hideSettings={true}
+ config={{
+ containers: container,
+ tabs: tab,
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "margin": "5px",
+ "padding": "15px",
+ "tabText": "#7F7F86",
+ "textTransform": "Uppercase",
+ "textDecoration": "underline",
+ "textSize": "20px",
+ "textWeight": "bold",
+ "fontFamily": "Courier New",
+ "fontStyle": "italic",
+ "border": "#5589F2",
+ "borderStyle": "solid",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "accent": "#222222",
+ },
+ headerStyle:{
+ "containerHeaderPadding": "10px",
+ "headerBackground": "#FFE607",
+ },
+ bodyStyle:{
+ "containerBodyPadding": "20px",
+ "background": "#E1825A",
+ },
+ animationStyle: {
+ "animation": "tada",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={TabbedContainerComp}
+ />
+ </ExampleGroup>
</>
);
}
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx
index e0725ab3c..04f46183a 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx
@@ -54,6 +54,18 @@ export default function BPMNEditorExample() {
}}
compFactory={ChartCompWithDefault}
/>
+ <Example
+ title="Naming Downloaded File - Click on Download link"
+ height={400}
+ width={1000}
+ hideSettings={true}
+ config={{
+ designer: true,
+ svgDownload: true,
+ imageName: "Lowcoder_Image",
+ }}
+ compFactory={ChartCompWithDefault}
+ />
</ExampleGroup>
<ExampleGroup
@@ -71,7 +83,9 @@ export default function BPMNEditorExample() {
"margin": "10px",
"textSize": "30px",
"backgroundColor": "#D7D9E0",
- "border": "#222222"
+ "border": "#222222",
+ "radius": "20px",
+ "borderWidth": "3px",
},
}}
compFactory={ChartCompWithDefault}
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/ContentCard.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/ContentCard.tsx
index 40ce62bc2..5a6e1d6c0 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/ContentCard.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/ContentCard.tsx
@@ -47,6 +47,333 @@ export default function ContentCardExample() {
compFactory={CardComp}
/>
</ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling properties of the Card Component."
+ >
+ <Example
+ title="Backround Color, Icon Color, Padding and Border properties"
+ config={{
+ title: "Jennifer Holmes",
+ metaTitle: "Head Cook",
+ metaDesc: "Responsible for the daily preparation of food for participants, including the cooking of meals, and maintaining high standards of food quality, food production and portion control using the standardized menu. ",
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "IconColor": "#FF0101",
+ "activateColor": "#5589F2",
+ "containerBodyPadding": "20px",
+ "padding": "10px",
+ "border": "#023BFF",
+ "borderStyle": "dashed",
+ "radius": "20px",
+ "borderWidth": "3px",
+ },
+ }}
+ compFactory={CardComp}
+ />
+ <Example
+ title="Box Shadow & Rotation"
+ config={{
+ title: "Jennifer Holmes",
+ metaTitle: "Head Cook",
+ metaDesc: "Responsible for the daily preparation of food for participants, including the cooking of meals, and maintaining high standards of food quality, food production and portion control using the standardized menu. ",
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "IconColor": "#FF0101",
+ "activateColor": "#5589F2",
+ "containerBodyPadding": "20px",
+ "padding": "10px",
+ "border": "#023BFF",
+ "borderStyle": "dashed",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "boxShadow": "16px 16px 16px",
+ "boxShadowColor": "#181717",
+ "rotation": "45deg"
+ },
+ }}
+ compFactory={CardComp}
+ />
+ <Example
+ title="Header Styling"
+ width={500}
+ config={{
+ title: "Jennifer Holmes",
+ metaTitle: "Head Cook",
+ metaDesc: "Responsible for the daily preparation of food for participants, including the cooking of meals, and maintaining high standards of food quality, food production and portion control using the standardized menu. ",
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "IconColor": "#FF0101",
+ "activateColor": "#5589F2",
+ "containerBodyPadding": "20px",
+ "padding": "10px",
+ "border": "#023BFF",
+ "borderStyle": "dashed",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "boxShadow": "16px 16px 16px",
+ "boxShadowColor": "#181717",
+ },
+ headerStyle: {
+ "background": "linear-gradient(90deg, #fa709a 0%, #fee140 100%)",
+ "margin": "10px",
+ "padding": "20px",
+ "text": "#4A5EC4",
+ "textTransform": "Uppercase",
+ "textDecoration": "underline",
+ "textSize": "20px",
+ "textWeight": "bold",
+ "fontFamily": "Courier New",
+ "fontStyle": "Italic",
+ "border": "#FA0101",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "rotation": "-2deg",
+ },
+ }}
+ compFactory={CardComp}
+ />
+ <Example
+ title="Body Styling"
+ width={500}
+ config={{
+ title: "Jennifer Holmes",
+ metaTitle: "Head Cook",
+ metaDesc: "Responsible for the daily preparation of food for participants, including the cooking of meals, and maintaining high standards of food quality, food production and portion control using the standardized menu. ",
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "IconColor": "#FF0101",
+ "activateColor": "#5589F2",
+ "containerBodyPadding": "20px",
+ "padding": "10px",
+ "border": "#023BFF",
+ "borderStyle": "dashed",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "boxShadow": "16px 16px 16px",
+ "boxShadowColor": "#181717",
+ },
+ headerStyle: {
+ "background": "linear-gradient(90deg, #fa709a 0%, #fee140 100%)",
+ "margin": "10px",
+ "padding": "20px",
+ "text": "#4A5EC4",
+ "textTransform": "Uppercase",
+ "textDecoration": "underline",
+ "textSize": "20px",
+ "textWeight": "bold",
+ "fontFamily": "Courier New",
+ "fontStyle": "Italic",
+ "border": "#FA0101",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "rotation": "-2deg",
+ },
+ bodyStyle: {
+ "background": "#FFD90D",
+ "margin": "5px",
+ "padding": "20px",
+ "text": "#027B0E",
+ "textTransform": "lowercase",
+ "textSize": "16px",
+ "textWeight": "bold",
+ "fontFamily": "Verdana",
+ "fontStyle": "Italic",
+ "border": "#F76F01",
+ "borderStyle": "dashed",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "rotation": "3deg"
+ },
+ }}
+ compFactory={CardComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Animation Style"
+ description="The Following Examples Show different Animation Styles on the Content Card Component."
+ >
+ <Example
+ title="Bounce Animation"
+ hideSettings={true}
+ config={{
+ animationStyle:
+ {
+ "animation": "bounce",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite",
+ },
+ title: "Jennifer Holmes",
+ metaTitle: "Head Cook",
+ metaDesc: "Responsible for the daily preparation of food for participants, including the cooking of meals, and maintaining high standards of food quality, food production and portion control using the standardized menu. ",
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "IconColor": "#FF0101",
+ "activateColor": "#5589F2",
+ "containerBodyPadding": "20px",
+ "padding": "10px",
+ "border": "#023BFF",
+ "borderStyle": "dashed",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "boxShadow": "16px 16px 16px",
+ "boxShadowColor": "#181717",
+ },
+ headerStyle: {
+ "background": "linear-gradient(90deg, #fa709a 0%, #fee140 100%)",
+ "margin": "10px",
+ "padding": "20px",
+ "text": "#4A5EC4",
+ "textTransform": "Uppercase",
+ "textDecoration": "underline",
+ "textSize": "20px",
+ "textWeight": "bold",
+ "fontFamily": "Courier New",
+ "fontStyle": "Italic",
+ "border": "#FA0101",
+ "radius": "20px",
+ "borderWidth": "3px",
+ },
+ bodyStyle: {
+ "background": "#FFD90D",
+ "margin": "5px",
+ "padding": "20px",
+ "text": "#027B0E",
+ "textTransform": "lowercase",
+ "textSize": "12px",
+ "textWeight": "bold",
+ "fontFamily": "Verdana",
+ "fontStyle": "Italic",
+ "border": "#F76F01",
+ "borderStyle": "solid",
+ "radius": "20px",
+ "borderWidth": "3px",
+ },
+ }}
+ compFactory={CardComp}
+ />
+ <Example
+ title="Swing Animation"
+ hideSettings={true}
+ config={{
+ title: "Jennifer Holmes",
+ metaTitle: "Head Cook",
+ metaDesc: "Responsible for the daily preparation of food for participants, including the cooking of meals, and maintaining high standards of food quality, food production and portion control using the standardized menu. ",
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "IconColor": "#FF0101",
+ "activateColor": "#5589F2",
+ "containerBodyPadding": "20px",
+ "padding": "10px",
+ "border": "#023BFF",
+ "borderStyle": "dashed",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "boxShadow": "16px 16px 16px",
+ "boxShadowColor": "#181717",
+ },
+ headerStyle: {
+ "background": "linear-gradient(90deg, #fa709a 0%, #fee140 100%)",
+ "margin": "10px",
+ "padding": "20px",
+ "text": "#4A5EC4",
+ "textTransform": "Uppercase",
+ "textDecoration": "underline",
+ "textSize": "20px",
+ "textWeight": "bold",
+ "fontFamily": "Courier New",
+ "fontStyle": "Italic",
+ "border": "#FA0101",
+ "radius": "20px",
+ "borderWidth": "3px",
+ },
+ bodyStyle: {
+ "background": "#FFD90D",
+ "margin": "5px",
+ "padding": "20px",
+ "text": "#027B0E",
+ "textTransform": "lowercase",
+ "textSize": "12px",
+ "textWeight": "bold",
+ "fontFamily": "Verdana",
+ "fontStyle": "Italic",
+ "border": "#F76F01",
+ "borderStyle": "solid",
+ "radius": "20px",
+ "borderWidth": "3px",
+ },
+ animationStyle: {
+ "animation": "swing",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={CardComp}
+ />
+ <Example
+ title="Tada Animation"
+ hideSettings={true}
+ config={{
+ title: "Jennifer Holmes",
+ metaTitle: "Head Cook",
+ metaDesc: "Responsible for the daily preparation of food for participants, including the cooking of meals, and maintaining high standards of food quality, food production and portion control using the standardized menu. ",
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "IconColor": "#FF0101",
+ "activateColor": "#5589F2",
+ "containerBodyPadding": "20px",
+ "padding": "10px",
+ "border": "#023BFF",
+ "borderStyle": "dashed",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "boxShadow": "16px 16px 16px",
+ "boxShadowColor": "#181717",
+ },
+ headerStyle: {
+ "background": "linear-gradient(90deg, #fa709a 0%, #fee140 100%)",
+ "margin": "10px",
+ "padding": "20px",
+ "text": "#4A5EC4",
+ "textTransform": "Uppercase",
+ "textDecoration": "underline",
+ "textSize": "20px",
+ "textWeight": "bold",
+ "fontFamily": "Courier New",
+ "fontStyle": "Italic",
+ "border": "#FA0101",
+ "radius": "20px",
+ "borderWidth": "3px",
+ },
+ bodyStyle: {
+ "background": "#FFD90D",
+ "margin": "5px",
+ "padding": "20px",
+ "text": "#027B0E",
+ "textTransform": "lowercase",
+ "textSize": "12px",
+ "textWeight": "bold",
+ "fontFamily": "Verdana",
+ "fontStyle": "Italic",
+ "border": "#F76F01",
+ "borderStyle": "solid",
+ "radius": "20px",
+ "borderWidth": "3px",
+ },
+ animationStyle: {
+ "animation": "tada",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={CardComp}
+ />
+ </ExampleGroup>
</>
);
}
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx
index f6a05c68b..102723691 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx
@@ -30,14 +30,29 @@ export default function MentionCompExample() {
}}
compFactory={MentionComp}
/>
+ <Example
+ title="Disabling the Mention Component"
+ config={{
+ disabled: true,
+ }}
+ compFactory={MentionComp}
+ />
+ <Example
+ title="Hiding the Mention Component"
+ config={{
+ hidden: true,
+ }}
+ compFactory={MentionComp}
+ />
</ExampleGroup>
<ExampleGroup
- title="Styling Properties"
- description="The Following Examples Show the Styling Properties of the Mention Component."
+ title="Label Properties"
+ description="The Following Examples Show the Label Properties of the Mention Component."
>
<Example
title="Label Name"
+ width={500}
config={{
label: {
"text": "Mention Component",
@@ -47,6 +62,7 @@ export default function MentionCompExample() {
/>
<Example
title="Label Tooltip"
+ width={500}
config={{
label: {
"text": "Mention Component",
@@ -57,6 +73,7 @@ export default function MentionCompExample() {
/>
<Example
title="Label Position & Alignment - Left & Left"
+ width={500}
config={{
label: {
"text": "Mention Component",
@@ -68,6 +85,7 @@ export default function MentionCompExample() {
/>
<Example
title="Label Position & Alignment - Left & Right"
+ width={500}
config={{
label: {
"text": "Mention Component",
@@ -79,6 +97,7 @@ export default function MentionCompExample() {
/>
<Example
title="Label Position & Alignment - Top & Left"
+ width={500}
config={{
label: {
"text": "Mention Component",
@@ -90,6 +109,7 @@ export default function MentionCompExample() {
/>
<Example
title="Label Position & Alignment - Top & Right"
+ width={500}
config={{
label: {
"text": "Mention Component",
@@ -101,6 +121,7 @@ export default function MentionCompExample() {
/>
<Example
title="Label Width - 10%"
+ width={500}
config={{
label: {
"text": "Mention Component",
@@ -122,6 +143,107 @@ export default function MentionCompExample() {
compFactory={MentionComp}
/>
</ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling properties on the Segmented Control Component."
+ >
+ <Example
+ title="Background Color, Border Radius,Style,Width,Color"
+ config={{
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "border": "#0139FF",
+ "borderStyle": "dashed",
+ "radius": "10px",
+ "borderWidth": "2px",
+ "accent": "#FAD301",
+ },
+ }}
+ compFactory={MentionComp}
+ />
+ <Example
+ title="Margin & Padding"
+ config={{
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "margin": "5px",
+ "padding": "10px",
+ "border": "#0139FF",
+ "borderStyle": "dashed",
+ "radius": "10px",
+ "borderWidth": "2px",
+ "accent": "#FAD301",
+ },
+ }}
+ compFactory={MentionComp}
+ />
+ <Example
+ title="Text Color, Size, Weight, Font family, Border properties"
+ config={{
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "margin": "5px",
+ "padding": "10px",
+ "text": "#FF0404",
+ "textTransform": "uppercase",
+ "textDecoration": "underline",
+ "textSize": "20px",
+ "textWeight": "bold",
+ "fontFamily": "Courier New",
+ "fontStyle": "oblique",
+ "border": "#0139FF",
+ "borderStyle": "dashed",
+ "radius": "10px",
+ "borderWidth": "2px",
+ "accent": "#FAD301",
+ },
+ }}
+ compFactory={MentionComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Animation Style"
+ description="The Following Examples Show different animations on the Segmented Control Component."
+ >
+ <Example
+ title="Bounce Animation"
+ config={{
+ animationStyle: {
+ "animation": "bounce",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={MentionComp}
+ />
+ <Example
+ title="Swing Animation"
+ config={{
+ animationStyle: {
+ "animation": "swing",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={MentionComp}
+ />
+ <Example
+ title="Tada Animation"
+ config={{
+ animationStyle: {
+ "animation": "tada",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={MentionComp}
+ />
+ </ExampleGroup>
</>
);
}
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/Form.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/Form.tsx
index eaa8ddada..bb9d05308 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/Form.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/Form.tsx
@@ -186,7 +186,7 @@ export default function FormExample() {
hideSettings={true}
config={{
container: container,
- disableSubmit: "true",
+ disableSubmit: "true",
}}
compFactory={FormComp}
/>
@@ -199,9 +199,26 @@ export default function FormExample() {
}}
compFactory={FormComp}
/>
+ <Example
+ title="Reset after Form Submit - True"
+ hideSettings={true}
+ config={{
+ container: container,
+ resetAfterSubmit: true,
+ }}
+ compFactory={FormComp}
+ />
+ <Example
+ title="Reset after Form Submit - False"
+ hideSettings={true}
+ config={{
+ container: container,
+ resetAfterSubmit: false,
+ }}
+ compFactory={FormComp}
+ />
</ExampleGroup>
-
<ExampleGroup
title="Layout"
description="The Following Examples Show the Layout options on the Form Component."
@@ -659,6 +676,380 @@ export default function FormExample() {
compFactory={FormComp}
/>
</ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling properties on the Form Component."
+ >
+ <Example
+ title="Background Color, Border Radius,Style,Width,Color"
+ hideSettings={true}
+ config={{
+ container: {
+ "header": {
+ "layout": {
+ "68d42007": {
+ "i": "68d42007",
+ "h": 5,
+ "w": 24,
+ "x": 0,
+ "y": 0
+ }
+ },
+ "items": {
+ "68d42007": {
+ "compType": "text",
+ "comp": {
+ "text": "### Welcome Back",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "showDataLoadingIndicators": false,
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "formTitle1"
+ }
+ }
+ },
+ "body": {
+ "0": {
+ "view": {
+ "layout": {
+ "4b9ae86d": {
+ "i": "4b9ae86d",
+ "h": 7,
+ "w": 8,
+ "x": 0,
+ "y": 0,
+ "pos": 0
+ },
+ "e74dc9d9": {
+ "i": "e74dc9d9",
+ "h": 7,
+ "w": 8,
+ "x": 0,
+ "y": 7,
+ "pos": 1
+ }
+ },
+ "items": {
+ "4b9ae86d": {
+ "compType": "input",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Email",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "validationType": "Email",
+ "showDataLoadingIndicators": false,
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "input1"
+ },
+ "e74dc9d9": {
+ "compType": "password",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Password",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "validationType": "Regex",
+ "regex": "test",
+ "visibilityToggle": true,
+ "showDataLoadingIndicators": false,
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "password1"
+ }
+ }
+ }
+ }
+ },
+ "footer": {
+ "layout": {
+ "64227c09": {
+ "i": "64227c09",
+ "h": 6,
+ "w": 5,
+ "x": 19,
+ "y": 0
+ }
+ },
+ "items": {
+ "64227c09": {
+ "compType": "button",
+ "comp": {
+ "text": "Login",
+ "type": "submit",
+ "form": "form1",
+ "showDataLoadingIndicators": false,
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "formButton1"
+ }
+ }
+ },
+ "showHeader": true,
+ "showBody": true,
+ "showFooter": true,
+ "autoHeight": "auto",
+ "showVerticalScrollbar": false,
+ "horizontalGridCells": 24,
+ "scrollbars": false,
+ "style": {
+ "border": "#3377FF",
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "borderStyle": "dashed",
+ },
+ "appliedThemeId": ""
+ },
+ }}
+ compFactory={FormComp}
+ />
+ <Example
+ title="Margin & Padding"
+ hideSettings={true}
+ config={{
+ container: {
+ "header": {
+ "layout": {
+ "68d42007": {
+ "i": "68d42007",
+ "h": 5,
+ "w": 24,
+ "x": 0,
+ "y": 0
+ }
+ },
+ "items": {
+ "68d42007": {
+ "compType": "text",
+ "comp": {
+ "text": "### Welcome Back",
+ "autoHeight": "auto",
+ "type": "markdown",
+ "horizontalAlignment": "center",
+ "contentScrollBar": true,
+ "verticalAlignment": "center",
+ "margin": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "padding": {
+ "left": "",
+ "right": "",
+ "top": "",
+ "bottom": ""
+ },
+ "showDataLoadingIndicators": false,
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "formTitle1"
+ }
+ }
+ },
+ "body": {
+ "0": {
+ "view": {
+ "layout": {
+ "4b9ae86d": {
+ "i": "4b9ae86d",
+ "h": 7,
+ "w": 8,
+ "x": 0,
+ "y": 0,
+ "pos": 0
+ },
+ "e74dc9d9": {
+ "i": "e74dc9d9",
+ "h": 7,
+ "w": 8,
+ "x": 0,
+ "y": 7,
+ "pos": 1
+ }
+ },
+ "items": {
+ "4b9ae86d": {
+ "compType": "input",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Email",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "validationType": "Email",
+ "showDataLoadingIndicators": false,
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "input1"
+ },
+ "e74dc9d9": {
+ "compType": "password",
+ "comp": {
+ "defaultValue": "",
+ "value": "",
+ "label": {
+ "text": "Password",
+ "width": "33",
+ "widthUnit": "%",
+ "position": "row",
+ "align": "left"
+ },
+ "validationType": "Regex",
+ "regex": "test",
+ "visibilityToggle": true,
+ "showDataLoadingIndicators": false,
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "password1"
+ }
+ }
+ }
+ }
+ },
+ "footer": {
+ "layout": {
+ "64227c09": {
+ "i": "64227c09",
+ "h": 6,
+ "w": 5,
+ "x": 19,
+ "y": 0
+ }
+ },
+ "items": {
+ "64227c09": {
+ "compType": "button",
+ "comp": {
+ "text": "Login",
+ "type": "submit",
+ "form": "form1",
+ "showDataLoadingIndicators": false,
+ "preventStyleOverwriting": false,
+ "appliedThemeId": "",
+ "version": "latest"
+ },
+ "name": "formButton1"
+ }
+ }
+ },
+ "showHeader": true,
+ "showBody": true,
+ "showFooter": true,
+ "autoHeight": "auto",
+ "showVerticalScrollbar": false,
+ "horizontalGridCells": 24,
+ "scrollbars": false,
+ "style": {
+ "border": "#3377FF",
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "borderStyle": "dashed",
+ "margin": "5px",
+ "padding": "20px"
+ },
+ "appliedThemeId": ""
+ },
+ }}
+ compFactory={FormComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Animation Style"
+ description="The Following Examples Show different animations on the Form Component."
+ >
+ <Example
+ title="Bounce Animation"
+ hideSettings={true}
+ config={{
+ container: container,
+ animationStyle: {
+ "animation": "bounce",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={FormComp}
+ />
+ <Example
+ title="Swing Animation"
+ hideSettings={true}
+ config={{
+ container: container,
+ animationStyle: {
+ "animation": "swing",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={FormComp}
+ />
+ <Example
+ title="Tada Animation"
+ hideSettings={true}
+ config={{
+ container: container,
+ animationStyle: {
+ "animation": "tada",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={FormComp}
+ />
+ </ExampleGroup>
</>
);
}
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONEditor.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONEditor.tsx
index dc1b3db1f..6f618a863 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONEditor.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONEditor.tsx
@@ -18,9 +18,6 @@ export default function JsonEditorExample() {
title="A Simple JSON Editor Form "
hideSettings={true}
config={{
- schema: schema,
- uiSchema: uiSchema,
- data: data,
}}
compFactory={JsonEditorComp}
/>
@@ -28,9 +25,6 @@ export default function JsonEditorExample() {
title="Hiding the JSON Editor Form "
hideSettings={true}
config={{
- schema: schema,
- uiSchema: uiSchema,
- data: data,
hidden: true,
}}
compFactory={JsonEditorComp}
@@ -127,6 +121,51 @@ export default function JsonEditorExample() {
compFactory={JsonEditorComp}
/>
</ExampleGroup>
+
+ <ExampleGroup
+ title="Animation Style"
+ description="The Following Examples Show different animations on the JSON Editor Component."
+ >
+ <Example
+ title="Bounce Animation"
+ hideSettings={true}
+ config={{
+ animationStyle: {
+ "animation": "bounce",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={JsonEditorComp}
+ />
+ <Example
+ title="Swing Animation"
+ hideSettings={true}
+ config={{
+ animationStyle: {
+ "animation": "swing",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={JsonEditorComp}
+ />
+ <Example
+ title="Tada Animation"
+ hideSettings={true}
+ config={{
+ animationStyle: {
+ "animation": "tada",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={JsonEditorComp}
+ />
+ </ExampleGroup>
</>
);
}
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONExplorer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONExplorer.tsx
index 022c55088..156e3b15f 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONExplorer.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONExplorer.tsx
@@ -68,6 +68,51 @@ export default function JsonExplorerExample() {
compFactory={JsonExplorerComp}
/>
</ExampleGroup>
+
+ <ExampleGroup
+ title="Animation Style"
+ description="The Following Examples Show different animations on the JSON Explorer Component."
+ >
+ <Example
+ title="Bounce Animation"
+ hideSettings={true}
+ config={{
+ animationStyle: {
+ "animation": "bounce",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={JsonExplorerComp}
+ />
+ <Example
+ title="Swing Animation"
+ hideSettings={true}
+ config={{
+ animationStyle: {
+ "animation": "swing",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={JsonExplorerComp}
+ />
+ <Example
+ title="Tada Animation"
+ hideSettings={true}
+ config={{
+ animationStyle: {
+ "animation": "tada",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={JsonExplorerComp}
+ />
+ </ExampleGroup>
</>
);
}
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx
index 61b2fa22a..834169e73 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx
@@ -13,28 +13,96 @@ export default function jsonSchemaFormExample() {
<Example
title="A Simple JSON Schema Form"
hideSettings={true}
- config={{
- schema:
- '{\n "title": "User profile",\n "description": "form example",\n "type": "object",\n "required": [\n "name",\n "phone"\n ],\n "properties": {\n "name": {\n "type": "string",\n "title": "Name"\n },\n "phone": {\n "type": "string",\n "title": "Phone",\n "minLength": 11\n },\n "birthday": {\n "type": "string",\n "title": "Birthday"\n }\n }\n}',
- uiSchema:
- '{\n "name": {\n "ui:autofocus": true,\n "ui:emptyValue": ""\n },\n "phone": {\n "ui:help": "Please input a 11 digits number"\n },\n "birthday": {\n "ui:widget": "date"\n }\n}',
- data: '{\n "name": "Tom",\n "phone": "13488886666",\n "birthday": "1980-03-16"\n}',
- }}
+ config={{}}
compFactory={JsonSchemaFormComp}
/>
<Example
title="Hiding the JSON Schema Form"
hideSettings={true}
config={{
- schema:
- '{\n "title": "User profile",\n "description": "form example",\n "type": "object",\n "required": [\n "name",\n "phone"\n ],\n "properties": {\n "name": {\n "type": "string",\n "title": "Name"\n },\n "phone": {\n "type": "string",\n "title": "Phone",\n "minLength": 11\n },\n "birthday": {\n "type": "string",\n "title": "Birthday"\n }\n }\n}',
- uiSchema:
- '{\n "name": {\n "ui:autofocus": true,\n "ui:emptyValue": ""\n },\n "phone": {\n "ui:help": "Please input a 11 digits number"\n },\n "birthday": {\n "ui:widget": "date"\n }\n}',
- data: '{\n "name": "Tom",\n "phone": "13488886666",\n "birthday": "1980-03-16"\n}',
hidden: true,
}}
compFactory={JsonSchemaFormComp}
/>
+ <Example
+ title="Reset after Form Submit - True"
+ hideSettings={true}
+ config={{
+ resetAfterSubmit: true,
+ }}
+ compFactory={JsonSchemaFormComp}
+ />
+ <Example
+ title="Reset after Form Submit - False"
+ hideSettings={true}
+ config={{
+ resetAfterSubmit: false,
+ }}
+ compFactory={JsonSchemaFormComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling properties on the JSON Schema Component."
+ >
+ <Example
+ title="Background Color, Border Radius and Color"
+ hideSettings={true}
+ config={{
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "border": "#3377FF",
+ "radius": "20px"
+ },
+ }}
+ compFactory={JsonSchemaFormComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Animation Style"
+ description="The Following Examples Show different animations on the JSON Schema Component."
+ >
+ <Example
+ title="Bounce Animation"
+ hideSettings={true}
+ config={{
+ animationStyle: {
+ "animation": "bounce",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={JsonSchemaFormComp}
+ />
+ <Example
+ title="Swing Animation"
+ hideSettings={true}
+ config={{
+ animationStyle: {
+ "animation": "swing",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={JsonSchemaFormComp}
+ />
+ <Example
+ title="Tada Animation"
+ hideSettings={true}
+ config={{
+ animationStyle: {
+ "animation": "tada",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={JsonSchemaFormComp}
+ />
</ExampleGroup>
</>
);
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/RangeSlider.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/RangeSlider.tsx
index 66d448281..c01ecb089 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/RangeSlider.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/RangeSlider.tsx
@@ -8,45 +8,57 @@ export default function RangeSliderExample() {
<>
<ExampleGroup
title={trans("componentDoc.basicUsage")}
- description={trans("componentDoc.basicDemoDescription")}
+ description="The Following Examples Show the Basic Usage of the Range Slider Component."
>
<Example
title={trans("componentDoc.default")}
config={{
- value: "60",
- disabled: "false",
- start: "10",
- end: "70",
- min: "0",
- max: "100",
- step: "10",
}}
compFactory={RangeSliderComp}
/>
<Example
title={trans("componentDoc.disabled")}
config={{
- value: "60",
disabled: "true",
- start: "10",
- end: "70",
- max: "100",
- min: "0",
- step: "10",
}}
compFactory={RangeSliderComp}
/>
<Example
- title={trans("componentDoc.default")}
+ title="Hiding the Range Slider component"
+ config={{
+ hidden: true,
+ }}
+ compFactory={RangeSliderComp}
+ />
+ <Example
+ title="Step Size - 10"
config={{
- value: "60",
- disabled: "false",
- start: "10",
- end: "70",
- min: "0",
- max: "100",
step: "10",
- vertical: true,
+ }}
+ compFactory={RangeSliderComp}
+ />
+ <Example
+ title="Step Size - 20"
+ config={{
+ step: "20",
+ }}
+ compFactory={RangeSliderComp}
+ />
+ <Example
+ title="Setting Minimum & Maximum Values"
+ config={{
+ min: "30",
+ max: "150",
+ }}
+ compFactory={RangeSliderComp}
+ />
+ <Example
+ title="Setting Minimum & Maximum Values"
+ config={{
+ min: "30",
+ max: "150",
+ start: "70",
+ end: "140",
}}
compFactory={RangeSliderComp}
/>
@@ -97,6 +109,198 @@ export default function RangeSliderExample() {
}}
compFactory={RangeSliderComp}
/>
+ <Example
+ title="Tooltip on Hover"
+ config={{
+ label: {
+ text: trans("componentDoc.labelText"),
+ tooltip: "This is a Tooltip displayed on Hover",
+ },
+ }}
+ compFactory={RangeSliderComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Layout Options"
+ description="The Following Examples Show the Layout Options of the Slider Component."
+ >
+ <Example
+ title="Prefix Icon"
+ config={{
+ prefixIcon: "/icon:solid/arrow-down-wide-short",
+ }}
+ compFactory={RangeSliderComp}
+ />
+ <Example
+ title="Suffix Icon"
+ config={{
+ suffixIcon: "/icon:solid/arrow-up-wide-short",
+ }}
+ compFactory={RangeSliderComp}
+ />
+ <Example
+ title="Prefix & Suffix Icon"
+ config={{
+ prefixIcon: "/icon:solid/arrow-down-wide-short",
+ suffixIcon: "/icon:solid/arrow-up-wide-short",
+ }}
+ compFactory={RangeSliderComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling properties on the Range Slider Component."
+ >
+ <Example
+ title="Background Color, Border Radius,Style,Width,Color"
+ config={{
+ style: {
+ "background": "#00FFFF",
+ "border": "#3377FF",
+ "radius": "10px",
+ "borderWidth": "3px",
+ "borderStyle": "solid",
+ },
+ }}
+ compFactory={RangeSliderComp}
+ />
+ <Example
+ title="Margin & Padding"
+ config={{
+ style: {
+ "background": "#00FFFF",
+ "border": "#3377FF",
+ "radius": "10px",
+ "borderWidth": "3px",
+ "margin": "10px",
+ "padding": "10px",
+ "borderStyle": "dashed",
+ },
+ }}
+ compFactory={RangeSliderComp}
+ />
+ <Example
+ title="Opacity - 0.2"
+ config={{
+ style: {
+ "opacity": "0.2",
+ },
+ }}
+ compFactory={RangeSliderComp}
+ />
+ <Example
+ title="Opacity - 0.5"
+ config={{
+ style: {
+ "opacity": "0.5",
+ },
+ }}
+ compFactory={RangeSliderComp}
+ />
+ <Example
+ title="Opacity - 0.7"
+ config={{
+ style: {
+ "opacity": "0.7",
+ },
+ }}
+ compFactory={RangeSliderComp}
+ />
+ <Example
+ title="Opacity - 1"
+ config={{
+ style: {
+ "opacity": "1",
+ },
+ }}
+ compFactory={RangeSliderComp}
+ />
+ <Example
+ title="Rotation - 90deg"
+ config={{
+ style: {
+ "rotation": "90deg",
+ },
+ }}
+ compFactory={RangeSliderComp}
+ />
+ <Example
+ title="Label - Text Color, Size, Weight, Font family, Border properties"
+ config={{
+ labelStyle: {
+ "margin": "5px",
+ "padding": "5px",
+ "label": "#3377FF",
+ "textTransform": "Uppercase",
+ "textDecoration": "underline",
+ "textSize": "13px",
+ "textWeight": "bold",
+ "fontFamily": "Courier New",
+ "fontStyle": "Italic",
+ "border": "#36B389",
+ "borderStyle": "solid",
+ "borderWidth": "2px",
+ },
+ }}
+ compFactory={RangeSliderComp}
+ />
+ <Example
+ title="Input Field Style"
+ config={{
+ inputFieldStyle: {
+ "fill": "#36B389",
+ "thumbBorder": "#222222",
+ "thumb": "#FFD501",
+ "track": "#E68E50",
+ "margin": "5px",
+ },
+ }}
+ compFactory={RangeSliderComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Animation Style"
+ description="The Following Examples Show different animations on the Slider Component."
+ >
+ <Example
+ title="Bounce Animation"
+ config={{
+ animationStyle: {
+ "animation": "bounce",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite",
+ },
+ }}
+ compFactory={RangeSliderComp}
+ />
+ <Example
+ title="Swing Animation"
+ config={{
+ animationStyle: {
+ "animation": "swing",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite",
+ },
+ }}
+ compFactory={RangeSliderComp}
+ />
+ <Example
+ title="Tada Animation"
+ config={{
+ animationStyle: {
+ "animation": "tada",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite",
+ },
+ }}
+ compFactory={RangeSliderComp}
+ />
</ExampleGroup>
</>
);
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/Slider.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/Slider.tsx
index 24fbdbf66..3fab535bb 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/Slider.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/Slider.tsx
@@ -8,16 +8,12 @@ export default function SliderExample() {
<>
<ExampleGroup
title={trans("componentDoc.basicUsage")}
- description={trans("componentDoc.basicDemoDescription")}
+ description="The Following Examples Show the Basic Usage of the Slider Component."
>
<Example
title={trans("componentDoc.default")}
config={{
value: "60",
- disabled: "false",
- min: "0",
- max: "100",
- step: "10",
}}
compFactory={SliderComp}
/>
@@ -25,28 +21,43 @@ export default function SliderExample() {
title={trans("componentDoc.disabled")}
config={{
disabled: "true",
- value: "60",
- max: "100",
- min: "0",
- step: "10",
}}
compFactory={SliderComp}
/>
<Example
- title={trans("componentDoc.default")}
+ title="Hiding the Slider component"
+ config={{
+ hidden: "true",
+ }}
+ compFactory={SliderComp}
+ />
+ <Example
+ title="Step Size - 10"
config={{
- value: "60",
- disabled: "false",
- min: "0",
- max: "100",
step: "10",
- vertical: true,
+ }}
+ compFactory={SliderComp}
+ />
+ <Example
+ title="Step Size - 20"
+ config={{
+ step: "20",
+ }}
+ compFactory={SliderComp}
+ />
+ <Example
+ title="Setting Minimum & Maximum Values"
+ config={{
+ min: "30",
+ max: "150",
}}
compFactory={SliderComp}
/>
</ExampleGroup>
- <ExampleGroup title={trans("componentDoc.labelText")} description="">
+ <ExampleGroup
+ title={trans("componentDoc.labelText")}
+ description="The Following Examples Show the Basic Usage of the Slider Component.">
<Example
title={trans("componentDoc.leftLeftAlign")}
config={{
@@ -91,6 +102,198 @@ export default function SliderExample() {
}}
compFactory={SliderComp}
/>
+ <Example
+ title="Tooltip on Hover"
+ config={{
+ label: {
+ text: trans("componentDoc.labelText"),
+ tooltip: "This is a tooltip displayed on Slider component",
+ },
+ }}
+ compFactory={SliderComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Layout Options"
+ description="The Following Examples Show the Layout Options of the Slider Component."
+ >
+ <Example
+ title="Prefix Icon"
+ config={{
+ prefixIcon: "/icon:solid/arrow-down-wide-short",
+ }}
+ compFactory={SliderComp}
+ />
+ <Example
+ title="Suffix Icon"
+ config={{
+ suffixIcon: "/icon:solid/arrow-up-wide-short",
+ }}
+ compFactory={SliderComp}
+ />
+ <Example
+ title="Prefix & Suffix Icon"
+ config={{
+ prefixIcon: "/icon:solid/arrow-down-wide-short",
+ suffixIcon: "/icon:solid/arrow-up-wide-short",
+ }}
+ compFactory={SliderComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling properties on the Slider Component."
+ >
+ <Example
+ title="Background Color, Border Radius,Style,Width,Color"
+ config={{
+ style: {
+ "background": "#00FFFF",
+ "border": "#3377FF",
+ "radius": "10px",
+ "borderWidth": "3px",
+ "borderStyle": "solid",
+ },
+ }}
+ compFactory={SliderComp}
+ />
+ <Example
+ title="Margin & Padding"
+ config={{
+ style: {
+ "background": "#00FFFF",
+ "border": "#3377FF",
+ "radius": "10px",
+ "borderWidth": "3px",
+ "margin": "10px",
+ "padding": "10px",
+ "borderStyle": "dashed",
+ },
+ }}
+ compFactory={SliderComp}
+ />
+ <Example
+ title="Opacity - 0.2"
+ config={{
+ style: {
+ "opacity": "0.2",
+ },
+ }}
+ compFactory={SliderComp}
+ />
+ <Example
+ title="Opacity - 0.5"
+ config={{
+ style: {
+ "opacity": "0.5",
+ },
+ }}
+ compFactory={SliderComp}
+ />
+ <Example
+ title="Opacity - 0.7"
+ config={{
+ style: {
+ "opacity": "0.7",
+ },
+ }}
+ compFactory={SliderComp}
+ />
+ <Example
+ title="Opacity - 1"
+ config={{
+ style: {
+ "opacity": "1",
+ },
+ }}
+ compFactory={SliderComp}
+ />
+ <Example
+ title="Rotation - 90deg"
+ config={{
+ style: {
+ "rotation": "90deg",
+ },
+ }}
+ compFactory={SliderComp}
+ />
+ <Example
+ title="Label - Text Color, Size, Weight, Font family, Border properties"
+ config={{
+ labelStyle: {
+ "margin": "5px",
+ "padding": "5px",
+ "label": "#3377FF",
+ "textTransform": "Uppercase",
+ "textDecoration": "underline",
+ "textSize": "13px",
+ "textWeight": "bold",
+ "fontFamily": "Courier New",
+ "fontStyle": "Italic",
+ "border": "#36B389",
+ "borderStyle": "solid",
+ "borderWidth": "2px",
+ },
+ }}
+ compFactory={SliderComp}
+ />
+ <Example
+ title="Input Field Style"
+ config={{
+ inputFieldStyle: {
+ "fill": "#36B389",
+ "thumbBorder": "#222222",
+ "thumb": "#FFD501",
+ "track": "#E68E50",
+ "margin": "5px",
+ },
+ }}
+ compFactory={SliderComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Animation Style"
+ description="The Following Examples Show different animations on the Slider Component."
+ >
+ <Example
+ title="Bounce Animation"
+ config={{
+ animationStyle: {
+ "animation": "bounce",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite",
+ },
+ }}
+ compFactory={SliderComp}
+ />
+ <Example
+ title="Swing Animation"
+ config={{
+ animationStyle: {
+ "animation": "swing",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite",
+ },
+ }}
+ compFactory={SliderComp}
+ />
+ <Example
+ title="Tada Animation"
+ config={{
+ animationStyle: {
+ "animation": "tada",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite",
+ },
+ }}
+ compFactory={SliderComp}
+ />
</ExampleGroup>
</>
);
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx
index 40e21298b..bb01d6691 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx
@@ -157,6 +157,113 @@ export default function KanbanExample() {
}}
compFactory={ChartCompWithDefault}
/>
+ <Example
+ title="Separate Sections by Assignees"
+ hideSettings={true}
+ width={1000}
+ config={{
+ data: data,
+ assigneeOptions: assigneeOptions,
+ separateAssigneeSections: true,
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling properties of the Kanban Component."
+ >
+ <Example
+ title="Board Styling - Text Size & Color"
+ hideSettings={true}
+ width={1000}
+ config={{
+ data: data,
+ assigneeOptions: assigneeOptions,
+ boardStyles: {
+ "textSize": "22px",
+ "textColor": "#07875C",
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ <Example
+ title="Card Header Styling - Text Size & Color"
+ hideSettings={true}
+ width={1000}
+ config={{
+ data: data,
+ assigneeOptions: assigneeOptions,
+ cardHeaderStyles: {
+ "textSize": "22px",
+ "textColor": "#6D83F2",
+ },
+ boardStyles: {
+ "textSize": "22px",
+ "textColor": "#07875C",
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ <Example
+ title="Card Styling - Padding, Text Size, Border properties, Box Shadow"
+ hideSettings={true}
+ width={1000}
+ config={{
+ data: data,
+ assigneeOptions: assigneeOptions,
+ cardContentStyles: {
+ "padding": "12px",
+ "textSize": "16px",
+ "backgroundColor": "linear-gradient(135deg, RGB(123, 156, 174) 0%, rgba(150,230,161,1) 100%)",
+ "border": "#36B389",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "boxShadow": "0px 4px 8px",
+ },
+ boardStyles: {
+ "textSize": "22px",
+ "textColor": "#07875C",
+ },
+ cardHeaderStyles: {
+ "textSize": "22px",
+ "textColor": "#6D83F2",
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
+ <Example
+ title="Tag Styling - Text Size & Color"
+ hideSettings={true}
+ width={1000}
+ config={{
+ data: data,
+ assigneeOptions: assigneeOptions,
+ cardContentStyles: {
+ "padding": "12px",
+ "textSize": "16px",
+ "backgroundColor": "linear-gradient(135deg, RGB(123, 156, 174) 0%, rgba(150,230,161,1) 100%)",
+ "border": "#36B389",
+ "radius": "20px",
+ "borderWidth": "3px",
+ "boxShadow": "0px 4px 8px",
+ },
+ boardStyles: {
+ "textSize": "22px",
+ "textColor": "#07875C",
+ },
+ cardHeaderStyles: {
+ "textSize": "22px",
+ "textColor": "#6D83F2",
+ },
+ tagStyles: {
+ "textSize": "14px",
+ "textColor": "#F40101",
+ },
+ }}
+ compFactory={ChartCompWithDefault}
+ />
</ExampleGroup>
</>
);
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/comment.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/comment.tsx
index 5f4d1ea61..1c4123a1d 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/comment.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/comment.tsx
@@ -12,6 +12,7 @@ export default function CommentExample() {
>
<Example
title="Setting Title of the Comment Component"
+ width={500}
config={{
title: "%d Comments in Total",
}}
@@ -19,6 +20,7 @@ export default function CommentExample() {
/>
<Example
title="Hiding the Comment Component"
+ width={500}
config={{
hidden: true,
}}
@@ -26,6 +28,7 @@ export default function CommentExample() {
/>
<Example
title="Disallowing Users to Comment"
+ width={500}
config={{
sendCommentAble: false,
}}
@@ -33,6 +36,7 @@ export default function CommentExample() {
/>
<Example
title="Allowing Users to Delete a Comment"
+ width={500}
config={{
deleteAble: true,
}}
@@ -46,6 +50,7 @@ export default function CommentExample() {
>
<Example
title="Setting the Button Title and Placeholder Text on the Comment Component"
+ width={500}
config={{
buttonText:"Click on me to Comment",
placeholder:"I am Placeholder text on the Comment Component :)",
@@ -53,6 +58,70 @@ export default function CommentExample() {
compFactory={CommentComp}
/>
</ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling properties on the Comment Component."
+ >
+ <Example
+ title="Background Color, Border Radius and Color"
+ width={500}
+ config={{
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "margin": "10px",
+ "padding": "20px",
+ "radius": "20px",
+ }
+ }}
+ compFactory={CommentComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Animation Style"
+ description="The Following Examples Show different animations on the Comment Component."
+ >
+ <Example
+ title="Bounce Animation"
+ width={600}
+ config={{
+ animationStyle: {
+ "animation": "bounce",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={CommentComp}
+ />
+ <Example
+ title="Swing Animation"
+ width={600}
+ config={{
+ animationStyle: {
+ "animation": "swing",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={CommentComp}
+ />
+ <Example
+ title="Tada Animation"
+ width={600}
+ config={{
+ animationStyle: {
+ "animation": "tada",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={CommentComp}
+ />
+ </ExampleGroup>
</>
);
}
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/divider.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/divider.tsx
index 00071dae1..e71949115 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/divider.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/divider.tsx
@@ -197,6 +197,63 @@ export default function DividerExample() {
compFactory={DividerComp}
/>
</ExampleGroup>
+
+ <ExampleGroup
+ title="Animation Style"
+ description="The Following Examples Show different animations on the Cascader Component."
+ >
+ <Example
+ title="Bounce Animation"
+ config={{
+ style: {
+ borderStyle: "solid",
+ border: "#000",
+ borderWidth: "2px"
+ },
+ animationStyle: {
+ "animation": "bounce",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={DividerComp}
+ />
+ <Example
+ title="Swing Animation"
+ config={{
+ style: {
+ borderStyle: "solid",
+ border: "#000",
+ borderWidth: "2px"
+ },
+ animationStyle: {
+ "animation": "swing",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={DividerComp}
+ />
+ <Example
+ title="Tada Animation"
+ config={{
+ style: {
+ borderStyle: "solid",
+ border: "#000",
+ borderWidth: "2px"
+ },
+ animationStyle: {
+ "animation": "tada",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={DividerComp}
+ />
+ </ExampleGroup>
</>
);
}
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/fileViewer.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/fileViewer.tsx
index 8471b2e2f..f351eeef7 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/fileViewer.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/fileViewer.tsx
@@ -9,10 +9,10 @@ export default function FileViewerExample() {
<>
<ExampleGroup
title={trans("componentDoc.basicUsage")}
- description={trans("componentDoc.basicDemoDescription")}
+ description="The Following Examples Show the Basic Usage of the File Viewer Component."
>
<Example
- title=""
+ title="Default File Viewer component"
width={1000}
height={600}
blackListConfig={blackListConfig}
@@ -22,6 +22,117 @@ export default function FileViewerExample() {
}}
compFactory={FileViewerComp}
/>
+ <Example
+ title="Hiding the File Viewer component"
+ width={1000}
+ height={600}
+ blackListConfig={blackListConfig}
+ hideSettings={true}
+ config={{
+ src: "https://pdfa.org/wp-content/uploads/2021/06/The-Low-Code-Revolution-and-PDF.pdf",
+ hidden: true,
+ }}
+ compFactory={FileViewerComp}
+ />
+
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling properties of the File Viewer Component."
+ >
+ <Example
+ title="Background Color, Margin & Padding"
+ width={1000}
+ height={600}
+ blackListConfig={blackListConfig}
+ hideSettings={true}
+ config={{
+ src: "https://pdfa.org/wp-content/uploads/2021/06/The-Low-Code-Revolution-and-PDF.pdf",
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "margin": "10px",
+ "padding": "40px",
+ },
+ }}
+ compFactory={FileViewerComp}
+ />
+ <Example
+ title="Border Color, Radius & Width"
+ width={1000}
+ height={600}
+ blackListConfig={blackListConfig}
+ hideSettings={true}
+ config={{
+ src: "https://pdfa.org/wp-content/uploads/2021/06/The-Low-Code-Revolution-and-PDF.pdf",
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "border": "#3377FF",
+ "radius": "20px",
+ "margin": "10px",
+ "padding": "40px",
+ "borderWidth": "3px"
+ },
+ }}
+ compFactory={FileViewerComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Animation Style"
+ description="The Following Examples Show different animations on the Cascader Component."
+ >
+ <Example
+ title="Bounce Animation"
+ width={1000}
+ height={600}
+ blackListConfig={blackListConfig}
+ hideSettings={true}
+ config={{
+ src: "https://pdfa.org/wp-content/uploads/2021/06/The-Low-Code-Revolution-and-PDF.pdf",
+ animationStyle: {
+ "animation": "bounce",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={FileViewerComp}
+ />
+ <Example
+ title="Swing Animation"
+ width={1000}
+ height={600}
+ blackListConfig={blackListConfig}
+ hideSettings={true}
+ config={{
+ src: "https://pdfa.org/wp-content/uploads/2021/06/The-Low-Code-Revolution-and-PDF.pdf",
+ animationStyle: {
+ "animation": "swing",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={FileViewerComp}
+ />
+ <Example
+ title="Tada Animation"
+ width={1000}
+ height={600}
+ blackListConfig={blackListConfig}
+ hideSettings={true}
+ config={{
+ src: "https://pdfa.org/wp-content/uploads/2021/06/The-Low-Code-Revolution-and-PDF.pdf",
+ animationStyle: {
+ "animation": "tada",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={FileViewerComp}
+ />
</ExampleGroup>
</>
);
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/gridView.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/gridView.tsx
index 31eaea4cc..404e17908 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/gridView.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/gridView.tsx
@@ -95,6 +95,8 @@ const container={
}
};
+const rows= "[\n {\n \"rate\": \"9.2\",\n \"title\": \"The Shawshank Redemption\",\n \"url\": \"https://www.imdb.com/title/tt0111161/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.2\",\n \"title\": \"The Godfather\",\n \"url\": \"https://www.imdb.com/title/tt0068646/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.0\",\n \"title\": \"The Dark Knight\",\n \"url\": \"https://www.imdb.com/title/tt0468569/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.0\",\n \"title\": \"The Godfather Part II\",\n \"url\": \"https://www.imdb.com/title/tt0071562/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMWMwMGQzZTItY2JlNC00OWZiLWIyMDctNDk2ZDQ2YjRjMWQ0XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.0\",\n \"title\": \"12 Angry Men\",\n \"url\": \"https://www.imdb.com/title/tt0050083/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMWU4N2FjNzYtNTVkNC00NzQ0LTg0MjAtYTJlMjFhNGUxZDFmXkEyXkFqcGdeQXVyNjc1NTYyMjg@._V1_UX45_CR0,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"8.9\",\n \"title\": \"Schindler's List\",\n \"url\": \"https://www.imdb.com/title/tt0108052/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BNDE4OTMxMTctNmRhYy00NWE2LTg3YzItYTk3M2UwOTU5Njg4XkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_UX45_CR0,0,45,67_AL_.jpg\"\n }\n]";
+
export default function GridViewExample() {
const blackListConfig: string[] = [
@@ -237,6 +239,111 @@ export default function GridViewExample() {
compFactory={GridComp}
/>
</ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling Properties on the ListView Component."
+
+ >
+ <Example
+ title="Background Color, Border Color & Radius"
+ hideSettings
+ config={{
+ container: container,
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "border": "#043CFF",
+ "radius": "20px",
+ },
+ noOfRows: rows,
+ }}
+ blackListConfig={blackListConfig}
+ compFactory={GridComp}
+ />
+ <Example
+ title="Rotation - 45 Deg"
+ hideSettings
+ config={{
+ container: container,
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "border": "#043CFF",
+ "radius": "20px",
+ "rotation": "45deg"
+ },
+ noOfRows: rows,
+ }}
+ blackListConfig={blackListConfig}
+ compFactory={GridComp}
+ />
+ <Example
+ title="Rotation - 135 Deg"
+ hideSettings
+ config={{
+ container: container,
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "border": "#043CFF",
+ "radius": "20px",
+ "rotation": "135deg"
+ },
+ noOfRows: rows,
+ }}
+ blackListConfig={blackListConfig}
+ compFactory={GridComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Animation Style"
+ description="The Following Examples Show different animations on the List View Component."
+ >
+ <Example
+ title="Bounce Animation"
+ hideSettings={true}
+ config={{
+ noOfRows: rows,
+ container: container,
+ animationStyle: {
+ "animation": "bounce",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={GridComp}
+ />
+ <Example
+ title="Swing Animation"
+ hideSettings={true}
+ config={{
+ noOfRows: rows,
+ container: container,
+ animationStyle: {
+ "animation": "swing",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={GridComp}
+ />
+ <Example
+ title="Tada Animation"
+ hideSettings={true}
+ config={{
+ noOfRows: rows,
+ container: container,
+ animationStyle: {
+ "animation": "tada",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={GridComp}
+ />
+ </ExampleGroup>
</>
);
}
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx
index 51d5704e5..a00a6c191 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/listView.tsx
@@ -100,6 +100,9 @@ export default function ListViewExample() {
const blackListConfig: string[] = [
"container"
];
+
+ const rows= "[\n {\n \"rate\": \"9.2\",\n \"title\": \"The Shawshank Redemption\",\n \"url\": \"https://www.imdb.com/title/tt0111161/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.2\",\n \"title\": \"The Godfather\",\n \"url\": \"https://www.imdb.com/title/tt0068646/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.0\",\n \"title\": \"The Dark Knight\",\n \"url\": \"https://www.imdb.com/title/tt0468569/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.0\",\n \"title\": \"The Godfather Part II\",\n \"url\": \"https://www.imdb.com/title/tt0071562/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMWMwMGQzZTItY2JlNC00OWZiLWIyMDctNDk2ZDQ2YjRjMWQ0XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.0\",\n \"title\": \"12 Angry Men\",\n \"url\": \"https://www.imdb.com/title/tt0050083/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMWU4N2FjNzYtNTVkNC00NzQ0LTg0MjAtYTJlMjFhNGUxZDFmXkEyXkFqcGdeQXVyNjc1NTYyMjg@._V1_UX45_CR0,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"8.9\",\n \"title\": \"Schindler's List\",\n \"url\": \"https://www.imdb.com/title/tt0108052/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BNDE4OTMxMTctNmRhYy00NWE2LTg3YzItYTk3M2UwOTU5Njg4XkEyXkFqcGdeQXVyNjU0OTQ0OTY@._V1_UX45_CR0,0,45,67_AL_.jpg\"\n }\n]";
+
return (
<>
<ExampleGroup
@@ -112,7 +115,7 @@ export default function ListViewExample() {
hideSettings
config={{
container: container,
- noOfRows: "[\n {\n \"rate\": \"9.2\",\n \"title\": \"The Shawshank Redemption\",\n \"url\": \"https://www.imdb.com/title/tt0111161/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.2\",\n \"title\": \"The Godfather\",\n \"url\": \"https://www.imdb.com/title/tt0068646/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.0\",\n \"title\": \"The Dark Knight\",\n \"url\": \"https://www.imdb.com/title/tt0468569/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n }\n]",
+ noOfRows: rows,
}}
blackListConfig={blackListConfig}
compFactory={ListViewComp}
@@ -122,8 +125,8 @@ export default function ListViewExample() {
hideSettings
config={{
container: container,
- hidden: "true",
- noOfRows: "[\n {\n \"rate\": \"9.2\",\n \"title\": \"The Shawshank Redemption\",\n \"url\": \"https://www.imdb.com/title/tt0111161/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.2\",\n \"title\": \"The Godfather\",\n \"url\": \"https://www.imdb.com/title/tt0068646/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.0\",\n \"title\": \"The Dark Knight\",\n \"url\": \"https://www.imdb.com/title/tt0468569/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n }\n]",
+ hidden: true,
+ noOfRows: rows,
}}
blackListConfig={blackListConfig}
compFactory={ListViewComp}
@@ -136,7 +139,7 @@ export default function ListViewExample() {
pagination:{
pageSize:"2",
},
- noOfRows: "[\n {\n \"rate\": \"9.2\",\n \"title\": \"The Shawshank Redemption\",\n \"url\": \"https://www.imdb.com/title/tt0111161/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.2\",\n \"title\": \"The Godfather\",\n \"url\": \"https://www.imdb.com/title/tt0068646/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.0\",\n \"title\": \"The Dark Knight\",\n \"url\": \"https://www.imdb.com/title/tt0468569/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n }\n]",
+ noOfRows: rows,
}}
blackListConfig={blackListConfig}
compFactory={ListViewComp}
@@ -156,7 +159,7 @@ export default function ListViewExample() {
pagination:{
pageSize:"2",
},
- noOfRows: "[\n {\n \"rate\": \"9.2\",\n \"title\": \"The Shawshank Redemption\",\n \"url\": \"https://www.imdb.com/title/tt0111161/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.2\",\n \"title\": \"The Godfather\",\n \"url\": \"https://www.imdb.com/title/tt0068646/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.0\",\n \"title\": \"The Dark Knight\",\n \"url\": \"https://www.imdb.com/title/tt0468569/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n }\n]",
+ noOfRows: rows,
}}
blackListConfig={blackListConfig}
compFactory={ListViewComp}
@@ -170,7 +173,7 @@ export default function ListViewExample() {
pageSize:"2",
showQuickJumper: true,
},
- noOfRows: "[\n {\n \"rate\": \"9.2\",\n \"title\": \"The Shawshank Redemption\",\n \"url\": \"https://www.imdb.com/title/tt0111161/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.2\",\n \"title\": \"The Godfather\",\n \"url\": \"https://www.imdb.com/title/tt0068646/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.0\",\n \"title\": \"The Dark Knight\",\n \"url\": \"https://www.imdb.com/title/tt0468569/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n }\n]",
+ noOfRows: rows,
}}
blackListConfig={blackListConfig}
compFactory={ListViewComp}
@@ -187,7 +190,7 @@ export default function ListViewExample() {
pageSizeOptions: "[2,4,6,8]",
},
- noOfRows: "[\n {\n \"rate\": \"9.2\",\n \"title\": \"The Shawshank Redemption\",\n \"url\": \"https://www.imdb.com/title/tt0111161/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.2\",\n \"title\": \"The Godfather\",\n \"url\": \"https://www.imdb.com/title/tt0068646/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.0\",\n \"title\": \"The Dark Knight\",\n \"url\": \"https://www.imdb.com/title/tt0468569/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n }\n]",
+ noOfRows: rows,
}}
blackListConfig={blackListConfig}
compFactory={ListViewComp}
@@ -209,7 +212,7 @@ export default function ListViewExample() {
pagination:{
pageSize:"2",
},
- noOfRows: "[\n {\n \"rate\": \"9.2\",\n \"title\": \"The Shawshank Redemption\",\n \"url\": \"https://www.imdb.com/title/tt0111161/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.2\",\n \"title\": \"The Godfather\",\n \"url\": \"https://www.imdb.com/title/tt0068646/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.0\",\n \"title\": \"The Dark Knight\",\n \"url\": \"https://www.imdb.com/title/tt0468569/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n }\n]",
+ noOfRows: rows,
}}
blackListConfig={blackListConfig}
compFactory={ListViewComp}
@@ -223,11 +226,116 @@ export default function ListViewExample() {
pageSize:"2",
showQuickJumper: true,
},
- noOfRows: "[\n {\n \"rate\": \"9.2\",\n \"title\": \"The Shawshank Redemption\",\n \"url\": \"https://www.imdb.com/title/tt0111161/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.2\",\n \"title\": \"The Godfather\",\n \"url\": \"https://www.imdb.com/title/tt0068646/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UY67_CR1,0,45,67_AL_.jpg\"\n },\n {\n \"rate\": \"9.0\",\n \"title\": \"The Dark Knight\",\n \"url\": \"https://www.imdb.com/title/tt0468569/\",\n \"cover\": \"https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UY67_CR0,0,45,67_AL_.jpg\"\n }\n]",
+ noOfRows: rows,
+ }}
+ blackListConfig={blackListConfig}
+ compFactory={ListViewComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling Properties on the ListView Component."
+
+ >
+ <Example
+ title="Background Color, Border Color & Radius"
+ hideSettings
+ config={{
+ container: container,
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "border": "#043CFF",
+ "radius": "20px",
+ },
+ noOfRows: rows,
+ }}
+ blackListConfig={blackListConfig}
+ compFactory={ListViewComp}
+ />
+ <Example
+ title="Rotation - 45 Deg"
+ hideSettings
+ config={{
+ container: container,
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "border": "#043CFF",
+ "radius": "20px",
+ "rotation": "45deg"
+ },
+ noOfRows: rows,
}}
blackListConfig={blackListConfig}
compFactory={ListViewComp}
/>
+ <Example
+ title="Rotation - 135 Deg"
+ hideSettings
+ config={{
+ container: container,
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "border": "#043CFF",
+ "radius": "20px",
+ "rotation": "135deg"
+ },
+ noOfRows: rows,
+ }}
+ blackListConfig={blackListConfig}
+ compFactory={ListViewComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Animation Style"
+ description="The Following Examples Show different animations on the List View Component."
+ >
+ <Example
+ title="Bounce Animation"
+ hideSettings={true}
+ config={{
+ noOfRows: rows,
+ container: container,
+ animationStyle: {
+ "animation": "bounce",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={ListViewComp}
+ />
+ <Example
+ title="Swing Animation"
+ hideSettings={true}
+ config={{
+ noOfRows: rows,
+ container: container,
+ animationStyle: {
+ "animation": "swing",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={ListViewComp}
+ />
+ <Example
+ title="Tada Animation"
+ hideSettings={true}
+ config={{
+ noOfRows: rows,
+ container: container,
+ animationStyle: {
+ "animation": "tada",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={ListViewComp}
+ />
</ExampleGroup>
</>
);
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/File.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/File.tsx
index be97c5bdb..964ce918b 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/File.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/File.tsx
@@ -139,6 +139,102 @@ export default function FileExample() {
compFactory={FileComp}
/>
</ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling properties on the Cascader Component."
+ >
+ <Example
+ title="Background Color, Border Radius,Style,Width,Color"
+ config={{
+ style: {
+ "background": "#00FFFF",
+ "border": "#3377FF",
+ "radius": "10px",
+ "borderWidth": "3px",
+ "borderStyle": "solid",
+ },
+ }}
+ compFactory={FileComp}
+ />
+ <Example
+ title="Margin & Padding"
+ config={{
+ style: {
+ "background": "#00FFFF",
+ "border": "#3377FF",
+ "radius": "10px",
+ "borderWidth": "3px",
+ "margin": "10px",
+ "padding": "10px",
+ "borderStyle": "dashed",
+ },
+ }}
+ compFactory={FileComp}
+ />
+ <Example
+ title="Text Color, Size, Weight, Font family, Border properties"
+ config={{
+ style: {
+ "margin": "5px",
+ "padding": "5px",
+ "label": "#3377FF",
+ "textTransform": "Uppercase",
+ "textDecoration": "underline",
+ "textSize": "13px",
+ "textWeight": "bold",
+ "fontFamily": "Courier New",
+ "fontStyle": "Italic",
+ "border": "#36B389",
+ "borderStyle": "solid",
+ "borderWidth": "2px"
+ },
+ }}
+ compFactory={FileComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Animation Style"
+ description="The Following Examples Show different animations on the Cascader Component."
+ >
+ <Example
+ title="Bounce Animation"
+ config={{
+ animationStyle: {
+ "animation": "bounce",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={FileComp}
+ />
+ <Example
+ title="Swing Animation"
+ config={{
+ animationStyle: {
+ "animation": "swing",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={FileComp}
+ />
+ <Example
+ title="Tada Animation"
+ config={{
+ animationStyle: {
+ "animation": "tada",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={FileComp}
+ />
+ </ExampleGroup>
</>
);
}
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/SegmentedControl.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/SegmentedControl.tsx
index aa134c2d7..724d9faf9 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/SegmentedControl.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/SegmentedControl.tsx
@@ -29,13 +29,12 @@ export default function SegmentedControlExample() {
<>
<ExampleGroup
title={trans("componentDoc.basicUsage")}
- description={trans("componentDoc.basicDemoDescription")}
+ description="The Following Examples Show the Basic Usage of the Segmented Control Component."
>
<Example
title={trans("componentDoc.value")}
config={{
- value: trans("componentDoc.appleOptionLabel"),
- disabled: false,
+ defaultValue: trans("componentDoc.appleOptionLabel"),
options: options,
label: {
text: trans("componentDoc.likedFruits"),
@@ -48,7 +47,6 @@ export default function SegmentedControlExample() {
title={trans("componentDoc.noDefaultValue")}
config={{
value: trans("componentDoc.noValue"),
- disabled: false,
options: options,
label: {
text: trans("componentDoc.likedFruits"),
@@ -60,7 +58,6 @@ export default function SegmentedControlExample() {
<Example
title={trans("componentDoc.disabled")}
config={{
- value: trans("componentDoc.appleOptionLabel"),
disabled: true,
options: options,
label: {
@@ -70,12 +67,27 @@ export default function SegmentedControlExample() {
blackListConfig={blackListConfig}
compFactory={SegmentedControlComp}
/>
+ <Example
+ title="Hiding the Segmented Control Component"
+ config={{
+ hidden: true,
+ options: options,
+ label: {
+ text: trans("componentDoc.likedFruits"),
+ },
+ }}
+ blackListConfig={blackListConfig}
+ compFactory={SegmentedControlComp}
+ />
</ExampleGroup>
- <ExampleGroup title={trans("componentDoc.labelText")} description="">
+
+ <ExampleGroup
+ title={trans("componentDoc.labelText")}
+ description="The Following Examples Show the different Label alignment of the Segmented Control Component.">
<Example
title={trans("componentDoc.leftLeftAlign")}
config={{
- value: trans("componentDoc.appleOptionLabel"),
+ defaultValue: trans("componentDoc.coconutOptionLabel"),
options: options,
label: {
text: trans("componentDoc.likedFruits"),
@@ -89,7 +101,7 @@ export default function SegmentedControlExample() {
<Example
title={trans("componentDoc.leftRightAlign")}
config={{
- value: trans("componentDoc.appleOptionLabel"),
+ defaultValue: trans("componentDoc.appleOptionLabel"),
options: options,
label: {
text: trans("componentDoc.likedFruits"),
@@ -103,7 +115,7 @@ export default function SegmentedControlExample() {
<Example
title={trans("componentDoc.topLeftAlign")}
config={{
- value: trans("componentDoc.appleOptionLabel"),
+ defaultValue: trans("componentDoc.appleOptionLabel"),
options: options,
label: {
text: trans("componentDoc.likedFruits"),
@@ -117,7 +129,7 @@ export default function SegmentedControlExample() {
<Example
title={trans("componentDoc.topRightAlign")}
config={{
- value: trans("componentDoc.appleOptionLabel"),
+ defaultValue: trans("componentDoc.appleOptionLabel"),
options: options,
label: {
text: trans("componentDoc.likedFruits"),
@@ -128,7 +140,21 @@ export default function SegmentedControlExample() {
blackListConfig={blackListConfig}
compFactory={SegmentedControlComp}
/>
+ <Example
+ title="Displaying Tooltip on Hover"
+ config={{
+ defaultValue: trans("componentDoc.appleOptionLabel"),
+ options: options,
+ label: {
+ text: trans("componentDoc.likedFruits"),
+ tooltip: "This is a Tooltip on Segmented Control component"
+ },
+ }}
+ blackListConfig={blackListConfig}
+ compFactory={SegmentedControlComp}
+ />
</ExampleGroup>
+
<ExampleGroup title={trans("componentDoc.validation")}>
<Example
title={trans("componentDoc.required")}
@@ -143,6 +169,173 @@ export default function SegmentedControlExample() {
compFactory={SegmentedControlComp}
/>
</ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling properties on the Segmented Control Component."
+ >
+ <Example
+ title="Background Color, Border Radius,Style,Width,Color"
+ width={500}
+ config={{
+ options: options,
+ label: {
+ text: trans("componentDoc.likedFruits"),
+ },
+ style: {
+ "background": "#00FFFF",
+ "border": "#3377FF",
+ "radius": "10px",
+ "borderWidth": "3px",
+ "borderStyle": "solid",
+ },
+ }}
+ compFactory={SegmentedControlComp}
+ />
+ <Example
+ title="Margin & Padding"
+ width={500}
+ config={{
+ options: options,
+ label: {
+ text: trans("componentDoc.likedFruits"),
+ },
+ style: {
+ "background": "#00FFFF",
+ "border": "#3377FF",
+ "radius": "10px",
+ "borderWidth": "3px",
+ "margin": "10px",
+ "padding": "10px",
+ "borderStyle": "dashed",
+ },
+ }}
+ compFactory={SegmentedControlComp}
+ />
+ <Example
+ title="Text Color, Size, Weight, Font family, Border properties"
+ width={500}
+ config={{
+ defaultValue: trans("componentDoc.coconutOptionLabel"),
+ options: options,
+ label: {
+ text: trans("componentDoc.likedFruits"),
+ },
+ style: {
+ "margin": "3px",
+ "padding": "3px",
+ "textTransform": "Uppercase",
+ "textDecoration": "underline",
+ "textSize": "13px",
+ "textWeight": "bold",
+ "fontFamily": "Courier New",
+ "fontStyle": "Italic",
+ "border": "#36B389",
+ "borderStyle": "solid",
+ "borderWidth": "3px",
+ "background": "#00FFFF",
+ "indicatorBackground": "#F4EA05",
+
+ },
+ }}
+ compFactory={SegmentedControlComp}
+ />
+ <Example
+ title="Rotation - 90deg"
+ config={{
+ options: options,
+ label: {
+ text: trans("componentDoc.likedFruits"),
+ },
+ style: {
+ "rotation": "90deg",
+ },
+ }}
+ compFactory={SegmentedControlComp}
+ />
+ <Example
+ title="Label - Text Color, Size, Weight, Font family, Border properties"
+ width={500}
+ config={{
+ options: options,
+ label: {
+ text: trans("componentDoc.likedFruits"),
+ },
+ labelStyle: {
+ "margin": "5px",
+ "padding": "5px",
+ "label": "#3377FF",
+ "textTransform": "Uppercase",
+ "textDecoration": "underline",
+ "textSize": "13px",
+ "textWeight": "bold",
+ "fontFamily": "Courier New",
+ "fontStyle": "Italic",
+ "border": "#36B389",
+ "borderStyle": "solid",
+ "borderWidth": "2px"
+ },
+ }}
+ compFactory={SegmentedControlComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Animation Style"
+ description="The Following Examples Show different animations on the Segmented Control Component."
+ >
+ <Example
+ title="Bounce Animation"
+ width={500}
+ config={{
+ options: options,
+ label: {
+ text: trans("componentDoc.likedFruits"),
+ },
+ animationStyle: {
+ "animation": "bounce",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={SegmentedControlComp}
+ />
+ <Example
+ title="Swing Animation"
+ width={500}
+ config={{
+ options: options,
+ label: {
+ text: trans("componentDoc.likedFruits"),
+ },
+ animationStyle: {
+ "animation": "swing",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={SegmentedControlComp}
+ />
+ <Example
+ title="Tada Animation"
+ width={500}
+ config={{
+ options: options,
+ label: {
+ text: trans("componentDoc.likedFruits"),
+ },
+ animationStyle: {
+ "animation": "tada",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={SegmentedControlComp}
+ />
+ </ExampleGroup>
</>
);
}
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/StepControl.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/StepControl.tsx
index d2e51248a..535ca1b8b 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/StepControl.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/StepControl.tsx
@@ -23,6 +23,41 @@ export default function StepControlExample() {
}}
compFactory={StepComp}
/>
+ <Example
+ title="Start Step Numbers at - 0"
+ config={{
+ initialValue: "0",
+ }}
+ compFactory={StepComp}
+ />
+ <Example
+ title="Start Step Numbers at - 1"
+ config={{
+ initialValue: "1",
+ }}
+ compFactory={StepComp}
+ />
+ <Example
+ title="Start Step Numbers at - 2"
+ config={{
+ initialValue: "2",
+ }}
+ compFactory={StepComp}
+ />
+ <Example
+ title="Selectable Steps - True"
+ config={{
+ selectable: true,
+ }}
+ compFactory={StepComp}
+ />
+ <Example
+ title="Selectable Steps - False"
+ config={{
+ selectable: false,
+ }}
+ compFactory={StepComp}
+ />
</ExampleGroup>
<ExampleGroup
@@ -106,7 +141,111 @@ export default function StepControlExample() {
}}
compFactory={StepComp}
/>
- </ExampleGroup>
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling properties on the Step Control Component."
+ >
+ <Example
+ title="Background Color, Border Radius,Style,Width,Color"
+ config={{
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "border": "#0139FF",
+ "borderStyle": "dashed",
+ "radius": "10px",
+ "borderWidth": "2px",
+ "accent": "#FAD301",
+ },
+ }}
+ compFactory={StepComp}
+ />
+ <Example
+ title="Margin & Padding"
+ config={{
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "margin": "5px",
+ "padding": "10px",
+ "border": "#0139FF",
+ "borderStyle": "dashed",
+ "radius": "10px",
+ "borderWidth": "2px",
+ "accent": "#FAD301",
+ },
+ }}
+ compFactory={StepComp}
+ />
+ <Example
+ title="Text Color, Size, Weight, Font family, Border properties"
+ config={{
+ style: {
+ "background": "linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
+ "margin": "5px",
+ "padding": "10px",
+ "text": "#FF0404",
+ "textTransform": "uppercase",
+ "textDecoration": "underline",
+ "textSize": "20px",
+ "textWeight": "bold",
+ "fontFamily": "Courier New",
+ "fontStyle": "oblique",
+ "border": "#0139FF",
+ "borderStyle": "dashed",
+ "radius": "10px",
+ "borderWidth": "2px",
+ "accent": "#FAD301",
+ },
+ }}
+ compFactory={StepComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Animation Style"
+ description="The Following Examples Show different animations on the Step Control Component."
+ >
+ <Example
+ title="Bounce Animation"
+ width={600}
+ config={{
+ animationStyle: {
+ "animation": "bounce",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={StepComp}
+ />
+ <Example
+ title="Swing Animation"
+ width={600}
+ config={{
+ animationStyle: {
+ "animation": "swing",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={StepComp}
+ />
+ <Example
+ title="Tada Animation"
+ width={600}
+ config={{
+ animationStyle: {
+ "animation": "tada",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={StepComp}
+ />
+ </ExampleGroup>
</>
);
}
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Switch.tsx b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Switch.tsx
index 60e2df337..6fb21b012 100644
--- a/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Switch.tsx
+++ b/client/packages/lowcoder/src/pages/ComponentDoc/examples/selectInputComp/Switch.tsx
@@ -14,7 +14,6 @@ export default function SwitchExample() {
title={trans("componentDoc.open")}
config={{
value: "true",
- disabled: false,
}}
compFactory={SwitchComp}
/>
@@ -22,7 +21,6 @@ export default function SwitchExample() {
title={trans("componentDoc.close")}
config={{
value: "false",
- disabled: false,
}}
compFactory={SwitchComp}
/>
@@ -34,7 +32,16 @@ export default function SwitchExample() {
}}
compFactory={SwitchComp}
/>
+ <Example
+ title="Hiding the Switch component"
+ config={{
+ value: "true",
+ hidden: true,
+ }}
+ compFactory={SwitchComp}
+ />
</ExampleGroup>
+
<ExampleGroup title={trans("componentDoc.labelText")} description="">
<Example
title={trans("componentDoc.leftLeftAlign")}
@@ -84,6 +91,181 @@ export default function SwitchExample() {
}}
compFactory={SwitchComp}
/>
+ <Example
+ title="Tooltip on Hover"
+ config={{
+ value: "true",
+ label: {
+ text: trans("componentDoc.labelText"),
+ tooltip: "This is a tooltip on Switch component"
+ },
+ }}
+ compFactory={SwitchComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Styling Properties"
+ description="The Following Examples Show the different Styling properties on the Switch Component."
+ >
+ <Example
+ title="Background Color, Border Radius,Style,Width,Color"
+ config={{
+ value: "true",
+ style: {
+ "background": "#00FFFF",
+ "border": "#3377FF",
+ "radius": "10px",
+ "borderWidth": "3px",
+ "borderStyle": "solid",
+ },
+ }}
+ compFactory={SwitchComp}
+ />
+ <Example
+ title="Margin & Padding"
+ config={{
+ value: "true",
+ style: {
+ "background": "#00FFFF",
+ "border": "#3377FF",
+ "radius": "10px",
+ "borderWidth": "3px",
+ "margin": "10px",
+ "padding": "10px",
+ "borderStyle": "dashed",
+ },
+ }}
+ compFactory={SwitchComp}
+ />
+ <Example
+ title="Opacity - 0.2"
+ config={{
+ value: "true",
+ style: {
+ "opacity": "0.2",
+ },
+ }}
+ compFactory={SwitchComp}
+ />
+ <Example
+ title="Opacity - 0.5"
+ width={500}
+ config={{
+ value: "true",
+ style: {
+ "opacity": "0.5",
+ },
+ }}
+ compFactory={SwitchComp}
+ />
+ <Example
+ title="Opacity - 0.7"
+ config={{
+ value: "true",
+ style: {
+ "opacity": "0.7",
+ },
+ }}
+ compFactory={SwitchComp}
+ />
+ <Example
+ title="Opacity - 1"
+ config={{
+ value: "true",
+ style: {
+ "opacity": "1",
+ },
+ }}
+ compFactory={SwitchComp}
+ />
+ <Example
+ title="Rotation - 90deg"
+ width={500}
+ config={{
+ value: "true",
+ style: {
+ "rotation": "90deg",
+ },
+ }}
+ compFactory={SwitchComp}
+ />
+ <Example
+ title="Label - Text Color, Size, Weight, Font family, Border properties"
+ config={{
+ value: "true",
+ labelStyle: {
+ "margin": "5px",
+ "padding": "5px",
+ "label": "#3377FF",
+ "textTransform": "Uppercase",
+ "textDecoration": "underline",
+ "textSize": "13px",
+ "textWeight": "bold",
+ "fontFamily": "Courier New",
+ "fontStyle": "Italic",
+ "border": "#36B389",
+ "borderStyle": "solid",
+ "borderWidth": "2px"
+ },
+ }}
+ compFactory={SwitchComp}
+ />
+ <Example
+ title="Input Field Style"
+ config={{
+ inputFieldStyle: {
+ "handle": "#D71616",
+ "unchecked": "#F7DF01",
+ "checked": "#36B389",
+ },
+ }}
+ compFactory={SwitchComp}
+ />
+ </ExampleGroup>
+
+ <ExampleGroup
+ title="Animation Style"
+ description="The Following Examples Show different animations on the Switch Component."
+ >
+ <Example
+ title="Bounce Animation"
+ config={{
+ value: "true",
+ animationStyle: {
+ "animation": "bounce",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={SwitchComp}
+ />
+ <Example
+ title="Swing Animation"
+ config={{
+ animationStyle: {
+ "animation": "swing",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={SwitchComp}
+ />
+ <Example
+ title="Tada Animation"
+ config={{
+ value: "true",
+ animationStyle: {
+ "animation": "tada",
+ "animationDelay": "1s",
+ "animationDuration": "3s",
+ "animationIterationCount": "infinite"
+ },
+ }}
+ compFactory={SwitchComp}
+ />
</ExampleGroup>
</>
);