mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
feat: 优化图片展示组件外观尺寸配置 (#11058)
Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com>
This commit is contained in:
qkiroc
GitHub
parent
c6d2f8289c
commit
0e2d2de60d
@ -187,34 +187,35 @@ export class ImagePlugin extends BasePlugin {
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'width',
|
||||
label: '宽度',
|
||||
type: 'input-number',
|
||||
onChange: (value: any) => {
|
||||
const node = context.node;
|
||||
node.updateState({
|
||||
width: value
|
||||
});
|
||||
requestAnimationFrame(() => {
|
||||
node.calculateHighlightBox();
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'height',
|
||||
label: '高度',
|
||||
type: 'input-number',
|
||||
onChange: (value: any) => {
|
||||
const node = context.node;
|
||||
node.updateState({
|
||||
height: value
|
||||
});
|
||||
requestAnimationFrame(() => {
|
||||
node.calculateHighlightBox();
|
||||
});
|
||||
}
|
||||
},
|
||||
// 通过外观的尺寸来设置
|
||||
// {
|
||||
// name: 'width',
|
||||
// label: '宽度',
|
||||
// type: 'input-number',
|
||||
// onChange: (value: any) => {
|
||||
// const node = context.node;
|
||||
// node.updateState({
|
||||
// width: value
|
||||
// });
|
||||
// requestAnimationFrame(() => {
|
||||
// node.calculateHighlightBox();
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// name: 'height',
|
||||
// label: '高度',
|
||||
// type: 'input-number',
|
||||
// onChange: (value: any) => {
|
||||
// const node = context.node;
|
||||
// node.updateState({
|
||||
// height: value
|
||||
// });
|
||||
// requestAnimationFrame(() => {
|
||||
// node.calculateHighlightBox();
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
|
||||
isUnderField
|
||||
? null
|
||||
@ -341,7 +342,7 @@ export class ImagePlugin extends BasePlugin {
|
||||
|
||||
getSchemaTpl('theme:size', {
|
||||
label: '尺寸',
|
||||
name: 'themeCss.imageControlClassName.size:default'
|
||||
name: 'themeCss.imageContentClassName.size:default'
|
||||
})
|
||||
]
|
||||
},
|
||||
|
||||
@ -1 +1,9 @@
|
||||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 .002h16v16.005H0z"/><g transform="translate(2 1.336)" stroke="#5C5F66" stroke-linejoin="round" stroke-width="1.5"><rect y="6.002" width="12" height="7.335" rx=".667"/><path d="M2.667 6.002V3.334a3.334 3.334 0 1 1 6.666 0v2.668M6 8.669v2.001" stroke-linecap="round"/></g></g></svg>
|
||||
<svg viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M753.845117 371.674021l-17.46272 0 0-83.669608c0-59.275012-22.62837-115.203812-63.715137-157.482731-42.170448-43.394323-99.369172-67.291592-161.058163-67.291592-126.040624 0-224.772276 98.731652-224.772276 224.7733l0 83.669608-16.680914 0c-62.788022 0-113.688295 50.900274-113.688295 113.688295L156.467611 842.961784c0 62.788022 50.900274 113.688295 113.688295 113.688295l483.690234 0c62.788022 0 113.688295-50.900274 113.688295-113.688295L867.534436 485.362316C867.532389 422.574295 816.633139 371.674021 753.845117 371.674021zM328.176344 288.005436c0-102.858646 80.573083-183.432753 183.431729-183.432753 50.423413 0 97.093339 19.447934 131.410935 54.762231 33.547047 34.519188 52.021817 80.214926 52.021817 128.670521l0 83.669608L328.176344 371.675044 328.176344 288.005436zM826.191842 842.961784c0 39.956014-32.390711 72.346725-72.346725 72.346725L270.154883 915.308509c-39.956014 0-72.346725-32.390711-72.346725-72.346725L197.808158 485.362316c0-39.956014 32.390711-72.346725 72.346725-72.346725l483.690234 0c39.956014 0 72.346725 32.390711 72.346725 72.346725L826.191842 842.961784z"
|
||||
fill="currentColor"></path>
|
||||
<path
|
||||
d="M509.932921 580.446905c-11.416004 0-20.670785 9.254781-20.670785 20.670785l0 109.554138c0 11.414981 9.254781 20.670785 20.670785 20.670785 11.416004 0 20.670785-9.254781 20.670785-20.670785L530.603707 601.116667C530.602683 589.701686 521.348925 580.446905 509.932921 580.446905z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 391 B After Width: | Height: | Size: 1.5 KiB |
@ -1 +1,9 @@
|
||||
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h16v16H0z"/><g transform="translate(2.75 1.333)" stroke="#5C5F66" stroke-linejoin="round" stroke-width="1.5"><rect y="6.016" width="10.5" height="7.333" rx=".667"/><path d="M1.917 6V3.335C1.915 1.623 3.224.189 4.945.017 6.666-.155 8.24.991 8.583 2.67M5.25 8.667v2" stroke-linecap="round"/></g></g></svg>
|
||||
<svg viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M757.810429 373.751333 325.645708 373.751333l0-83.895759c0-103.694687 81.507362-184.922686 185.559183-184.922686 78.121242 0 146.053424 46.74565 173.062568 119.090329 3.865028 10.352789 15.384385 15.609513 25.742291 11.746532 10.351766-3.866051 15.609513-15.390525 11.744485-25.742291C688.844707 121.877815 606.198405 64.918545 511.204891 64.918545c-61.918211 0-119.246895 23.662933-161.423483 66.63156-41.3692 42.142819-64.151066 98.363262-64.151066 158.305469l0 83.895759-20.007683 0c-60.774155 0-110.042255 49.267077-110.042255 110.042255l0 366.139981c0 60.774155 49.267077 110.042255 110.042255 110.042255l492.187769 0c60.775178 0 110.042255-49.267077 110.042255-110.042255L867.852684 483.793588C867.852684 423.01841 818.585607 373.751333 757.810429 373.751333zM827.837318 849.933569c0 38.674834-31.352055 70.02689-70.02689 70.02689L265.62266 919.960459c-38.674834 0-70.02689-31.352055-70.02689-70.02689L195.59577 483.793588c0-38.674834 31.352055-70.02689 70.02689-70.02689l492.187769 0c38.674834 0 70.02689 31.352055 70.02689 70.02689L827.837318 849.933569z"
|
||||
fill="currentColor"></path>
|
||||
<path
|
||||
d="M509.715981 583.832002c-11.048637 0-20.007683 8.959046-20.007683 20.007683l0 110.042255c0 11.048637 8.958022 20.007683 20.007683 20.007683s20.007683-8.958022 20.007683-20.007683L529.723663 603.839685C529.723663 592.790024 520.765641 583.832002 509.715981 583.832002z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 415 B After Width: | Height: | Size: 1.5 KiB |
@ -64,6 +64,10 @@ $ns: cxd-;
|
||||
border-bottom: 1px solid #b8babf;
|
||||
border-right: 1px solid #b8babf;
|
||||
}
|
||||
.common-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
|
||||
@ -177,6 +177,7 @@ export interface ImageThumbProps
|
||||
onLoad?: React.EventHandler<any>;
|
||||
overlays?: JSX.Element;
|
||||
imageControlClassName?: string;
|
||||
imageContentClassName?: string;
|
||||
titleControlClassName?: string;
|
||||
desControlClassName?: string;
|
||||
iconControlClassName?: string;
|
||||
@ -254,6 +255,7 @@ export class ImageThumb extends React.Component<
|
||||
titleControlClassName,
|
||||
iconControlClassName,
|
||||
imageControlClassName,
|
||||
imageContentClassName,
|
||||
desControlClassName
|
||||
} = this.props;
|
||||
|
||||
@ -316,7 +318,8 @@ export class ImageThumb extends React.Component<
|
||||
<div
|
||||
className={cx(
|
||||
'Image-origin',
|
||||
thumbMode ? `Image-origin--${thumbMode}` : ''
|
||||
thumbMode ? `Image-origin--${thumbMode}` : '',
|
||||
imageContentClassName
|
||||
)}
|
||||
style={{height: height, width: width}}
|
||||
>
|
||||
@ -332,7 +335,8 @@ export class ImageThumb extends React.Component<
|
||||
thumbMode ? `Image-thumb--${thumbMode}` : '',
|
||||
thumbRatio
|
||||
? `Image-thumb--${thumbRatio.replace(/:/g, '-')}`
|
||||
: ''
|
||||
: '',
|
||||
imageContentClassName
|
||||
)}
|
||||
style={{height: height, width: width}}
|
||||
>
|
||||
@ -648,6 +652,12 @@ export class ImageField extends React.Component<
|
||||
id,
|
||||
themeCss
|
||||
})}
|
||||
imageContentClassName={setThemeClassName({
|
||||
...this.props,
|
||||
name: 'imageContentClassName',
|
||||
id,
|
||||
themeCss
|
||||
})}
|
||||
titleControlClassName={setThemeClassName({
|
||||
...this.props,
|
||||
name: 'titleControlClassName',
|
||||
@ -680,6 +690,9 @@ export class ImageField extends React.Component<
|
||||
{
|
||||
key: 'imageControlClassName'
|
||||
},
|
||||
{
|
||||
key: 'imageContentClassName'
|
||||
},
|
||||
{
|
||||
key: 'titleControlClassName'
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user