Skip to content

added examples for multiple components #1600

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 22, 2025
+11,659 −97
Merged

added examples for multiple components #1600

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
71f65b2
added examples for multiple components
adnanqaops Mar 28, 2025
131a2e2
Merge branch 'dev' into doc/existing_components
FalkWolsky May 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 115 additions & 4 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/ButtonComp/LinkButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -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}
/>
175 changes: 175 additions & 0 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/CalendarInputComp/Calendar.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
71 changes: 71 additions & 0 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GanttChart.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
102 changes: 102 additions & 0 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/GaugeChart.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>

</>
);
}
71 changes: 71 additions & 0 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/ChartsComp/HillChart.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
</>
);
3,023 changes: 3,022 additions & 1 deletion ...packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/CollapsibleContainer.tsx
View file

Large diffs are not rendered by default.

1,019 changes: 1,019 additions & 0 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ColumnLayout.tsx
View file

Large diffs are not rendered by default.

661 changes: 660 additions & 1 deletion client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/Container.tsx
View file

Large diffs are not rendered by default.

3,278 changes: 3,276 additions & 2 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/PageLayout.tsx
View file

Large diffs are not rendered by default.

179 changes: 177 additions & 2 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/ResponsiveLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
75 changes: 73 additions & 2 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/SplitLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
231 changes: 231 additions & 0 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/ContainersComp/TabbedContainer.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
16 changes: 15 additions & 1 deletion client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/BPMNEditor.tsx
View file
Original file line number Diff line number Diff line change
@@ -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}
327 changes: 327 additions & 0 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/ContentCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
126 changes: 124 additions & 2 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/MediaComp/Mention.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
395 changes: 393 additions & 2 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/Form.tsx
View file

Large diffs are not rendered by default.

51 changes: 45 additions & 6 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONEditor.tsx
View file
Original file line number Diff line number Diff line change
@@ -18,19 +18,13 @@ export default function JsonEditorExample() {
title="A Simple JSON Editor Form "
hideSettings={true}
config={{
schema: schema,
uiSchema: uiSchema,
data: data,
}}
compFactory={JsonEditorComp}
/>
<Example
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>
</>
);
}
45 changes: 45 additions & 0 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONExplorer.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
92 changes: 80 additions & 12 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/formComp/JSONSchemaform.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
</>
);
248 changes: 226 additions & 22 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/RangeSlider.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
</>
);
235 changes: 219 additions & 16 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/numberInputComp/Slider.tsx
View file
Original file line number Diff line number Diff line change
@@ -8,45 +8,56 @@ 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}
/>
<Example
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>
</>
);
107 changes: 107 additions & 0 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/Kanban.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
</>
);
69 changes: 69 additions & 0 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/comment.tsx
View file
Original file line number Diff line number Diff line change
@@ -12,27 +12,31 @@ export default function CommentExample() {
>
<Example
title="Setting Title of the Comment Component"
width={500}
config={{
title: "%d Comments in Total",
}}
compFactory={CommentComp}
/>
<Example
title="Hiding the Comment Component"
width={500}
config={{
hidden: true,
}}
compFactory={CommentComp}
/>
<Example
title="Disallowing Users to Comment"
width={500}
config={{
sendCommentAble: false,
}}
compFactory={CommentComp}
/>
<Example
title="Allowing Users to Delete a Comment"
width={500}
config={{
deleteAble: true,
}}
@@ -46,13 +50,78 @@ 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 :)",
}}
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>
</>
);
}
57 changes: 57 additions & 0 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/divider.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
115 changes: 113 additions & 2 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/fileViewer.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
</>
);
107 changes: 107 additions & 0 deletions client/packages/lowcoder/src/pages/ComponentDoc/examples/presentationComp/gridView.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
Loading