容器组件添加滚动条开关

container add scroll Switch

Author: mousheng

client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx

@@ -14,10 +14,12 @@ import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUt
 import { trans } from "i18n";
 import { BoolCodeControl } from "comps/controls/codeControl";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
+import { BoolControl } from "@lowcoder-ee/comps/controls/boolControl";
 
 export const ContainerBaseComp = (function () {
   const childrenMap = {
     disabled: BoolCodeControl,
+    showScroll: BoolControl.DEFAULT_TRUE,
   };
   return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
     return (
@@ -32,6 +34,8 @@ export const ContainerBaseComp = (function () {
           <Section name={sectionNames.interaction}>{disabledPropertyView(children)}</Section>
           <Section name={sectionNames.layout}>
             {children.container.getPropertyView()}
+            {!children.container.children.autoHeight.getView() && children.showScroll.propertyView({
+            label: trans("container.showScroll")})}
             {hiddenPropertyView(children)}
           </Section>
           <Section name={sectionNames.style}>{children.container.stylePropertyView()}</Section>

client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx

@@ -39,9 +39,11 @@ const BodyInnerGrid = styled(InnerGrid)<{
   showBorder: boolean;
   backgroundColor: string;
   borderColor: string;
+  showScroll?: boolean;
 }>`
   border-top: ${(props) => `${props.showBorder ? 1 : 0}px solid ${props.borderColor}`};
   flex: 1;
+  overflow: ${(props) => `${props.showScroll ? 'auto' : 'hidden'}`};
   ${(props) => props.backgroundColor && `background-color: ${props.backgroundColor};`}
   border-radius: 0;
 `;
@@ -59,6 +61,7 @@ const FooterInnerGrid = styled(InnerGrid)<{
 
 export type TriContainerProps = TriContainerViewProps & {
   hintPlaceholder?: ReactNode;
+  showScroll?: boolean;
 };
 
 export function TriContainer(props: TriContainerProps) {
@@ -110,6 +113,7 @@ export function TriContainer(props: TriContainerProps) {
             hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder}
             backgroundColor={style?.background}
             borderColor={style?.border}
+            showScroll={props?.showScroll}
             style={{padding: style.containerbodypadding}}
           />
         </BackgroundColorContext.Provider>

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -1355,6 +1355,7 @@ export const en = {
   },
   container: {
     title: "Container title",
+    showScroll: "Show scroll",
   },
   drawer: {
     placement: "Drawer placement",

client/packages/lowcoder/src/i18n/locales/zh.ts

@@ -1333,6 +1333,7 @@ selectionControl: {
 },
 container: {
     title: "容器标题",
+    showScroll: "显示滚动条",
 },
 drawer: {
     placement: "抽屉位置",