✨ feat: 新增全局控制 padding props

arvinxx · Nov 28, 2021 · 7f9ad2e · 7f9ad2e · vercel · Nov 28, 2021
1 parent 20629c2
commit 7f9ad2e
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 9 deletions.
diff --git a/packages/asset-gallery/demos/Demo.tsx b/packages/asset-gallery/demos/Demo.tsx
@@ -15,6 +15,7 @@ const Demo = () => {
       }}
       data={images}
       darkBackground={'black'}
+      coverPadding={24}
     />
   );
 };

diff --git a/packages/asset-gallery/demos/YAMLDemo.tsx b/packages/asset-gallery/demos/YAMLDemo.tsx
@@ -8,14 +8,15 @@ import { yml } from './yml';
 
 const YAMLDemo = () => {
   return (
-    <div
+    <AssetGallery
+      data={yml}
+      darkBackground={'black'}
+      coverPadding={24}
       style={{
         background: '#fafafa',
         padding: 24,
       }}
-    >
-      <AssetGallery data={yml} darkBackground={'black'} />
-    </div>
+    />
   );
 };
 

diff --git a/packages/asset-gallery/src/AssetGallery.tsx b/packages/asset-gallery/src/AssetGallery.tsx
@@ -23,6 +23,7 @@ const AssetGallery: FC<AssetGalleryProps> = ({
   defaultColumns,
   onColumnsChange,
   style,
+  coverPadding,
 }) => {
   const [columns, setColumn] = useMergeValue(4, {
     value: columnsProps,
@@ -56,7 +57,7 @@ const AssetGallery: FC<AssetGalleryProps> = ({
         return (
           <AssetCard
             key={index}
-            padding={padding}
+            padding={padding || coverPadding}
             url={url}
             dark={dark}
             darkBackground={backgroundColor}

diff --git a/packages/asset-gallery/src/components/AssetCard.tsx b/packages/asset-gallery/src/components/AssetCard.tsx
@@ -18,7 +18,7 @@ import type { Asset } from '../types';
 import { copySketch } from '../utils/sketch';
 
 const AssetCard: FC<Asset> = ({
-  padding,
+  padding = 12,
   url,
   title,
   darkBackground,

diff --git a/packages/asset-gallery/src/style.less b/packages/asset-gallery/src/style.less
@@ -31,7 +31,6 @@
 
     &-ctn {
       position: relative;
-      padding: 24px;
     }
 
     &-type {

diff --git a/packages/asset-gallery/src/types.ts b/packages/asset-gallery/src/types.ts
@@ -112,9 +112,12 @@ export interface AssetGalleryProps {
    *  @enumOptions  [{ label: '显示', value: true }, { label: '隐藏', value: false }]
    */
   showSlider?: boolean;
-
   /**
-   * 样式
+   * @title 全局图片的内边距
+   */
+  coverPadding?: number | string;
+  /**
+   * @title 样式
    */
   style?: CSSProperties;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,6 +15,7 @@ const Demo = () => { @@
           }}
           data={images}
           darkBackground={'black'}
+          coverPadding={24}
         />
       );
     };
@@ Expand Down @@