💄 fix: update Layout Pannel Styles

ant-design · Dec 6, 2023 · a3144ac · a3144ac
1 parent fed6ff8
commit a3144ac
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 14 deletions.
diff --git a/src/Layout/index.tsx b/src/Layout/index.tsx
@@ -35,6 +35,8 @@ interface PannelSettings {
   hide?: boolean;
   minWidth?: number;
   minHeight?: number;
+  maxWidth?: number;
+  maxHeight?: number;
   style?: React.CSSProperties;
   className?: string;
 }
@@ -52,6 +54,8 @@ const BasicLayout = (props: LayoutProps) => {
     | {
         placement: 'left' | 'right' | 'bottom';
         className?: string;
+        maxWidth?: number;
+        maxHeight?: number;
         defaultSize?: Partial<Size>;
       }
     | false => {
@@ -60,21 +64,24 @@ const BasicLayout = (props: LayoutProps) => {
         return {
           placement: 'left',
           className: styles.leftPannel,
+          maxWidth: 500,
           defaultSize: {
-            width: '200',
+            width: '300',
           },
         };
       case 'right':
         return {
           placement: 'right',
           className: styles.rightPannel,
+          maxWidth: 500,
           defaultSize: {
-            width: '200',
+            width: '300',
           },
         };
       case 'bottom':
         return {
           placement: 'bottom',
+          maxHeight: 400,
           defaultSize: {
             height: '200',
           },
@@ -93,13 +100,14 @@ const BasicLayout = (props: LayoutProps) => {
       style,
       minHeight = 200,
       minWidth = 200,
+
       ...rest
     } = props || {};
     const pannelProps = getPannelProps(index);
     if (!pannelProps) {
       return (
-        <div className={cx(styles.centerPannel)}>
-          <div className={cx(styles.pannel, className)}>{children}</div>
+        <div className={cx(styles.pannel, styles.centerPannel)}>
+          <div className={cx(className)}>{children}</div>
         </div>
       );
     }

diff --git a/src/Layout/style.ts b/src/Layout/style.ts
@@ -7,6 +7,7 @@ export const useStyle = createStyles(({ css, token, cx }, prefixCls: string) =>
       css`
         height: 100vh;
         width: 100vw;
+        box-sizing: border-box;
         background-color: ${token.colorBgContainer};
         overflow: hidden;
         border-radius: ${token.borderRadius}px;
@@ -19,19 +20,20 @@ export const useStyle = createStyles(({ css, token, cx }, prefixCls: string) =>
     header: cx(
       `${prefixCls}-header`,
       css`
+        box-sizing: border-box;
         height: 48px;
         min-height: 48px;
         border-radius: ${token.borderRadius}px;
         background-color: ${token.colorFillQuaternary};
-        margin: ${token.margin / 4 + 2}px;
-        margin-bottom: 0;
+        margin: ${token.margin / 4}px;
       `,
     ),
     footer: cx(
       `${prefixCls}-footer`,
       css`
         height: 28px;
-        margin: ${token.margin / 4 + 2}px;
+        box-sizing: border-box;
+        margin: ${token.margin / 4}px;
         border-radius: ${token.borderRadius}px;
         background-color: ${token.colorFillQuaternary};
       `,
@@ -48,11 +50,6 @@ export const useStyle = createStyles(({ css, token, cx }, prefixCls: string) =>
       `${prefixCls}-center-pannel`,
       css`
         flex: 1;
-        .${prefixCls}-pannel {
-          height: calc(100% - ${token.margin / 2 - 2}px - ${token.margin + 4}px);
-          // width: calc(100% - ${token.margin / 2 - 2}px - ${token.margin + 4}px);
-          margin: ${token.margin / 4 + 2}px ${token.margin / 4 - 1}px;
-        }
       `,
     ),
 
@@ -61,15 +58,17 @@ export const useStyle = createStyles(({ css, token, cx }, prefixCls: string) =>
       css`
         flex: 1;
         display: flex;
+        clear: both;
       `,
     ),
     pannel: cx(
       `${prefixCls}-pannel`,
       css`
         border-radius: ${token.borderRadius}px;
+        box-sizing: border-box;
         background-color: ${token.colorFillQuaternary};
-        margin: ${token.margin / 4 + 2}px;
-        height: calc(100% - ${token.margin / 4}px - ${token.margin + 4}px);
+        margin: ${token.margin / 4}px;
+        height: calc(100% - ${token.margin / 2}px);
         padding: ${token.margin / 2 + 2}px;
       `,
     ),