semi design modal设置宽度
时间: 2025-07-25 09:24:49 浏览: 0
<think>我们正在讨论Semi Design的模态框(Modal)宽度设置问题。根据Semi Design文档,设置模态框宽度可以通过`width`属性来实现。该属性可以接受数字(单位为像素)或字符串(如百分比)。例如,设置宽度为600像素或80%。
在Semi Design中,模态框的基本用法如下:
```jsx
import { Modal } from '@douyinfe/semi-ui';
function MyModal() {
return (
<Modal
visible={true}
onOk={() => console.log('Ok')}
onCancel={() => console.log('Cancel')}
width={600} // 设置宽度为600px
>
<p>这是模态框内容</p>
</Modal>
);
}
```
或者使用百分比:
```jsx
<Modal
visible={true}
width="80%"
>
...
</Modal>
```
另外,Semi Design还提供了`size`属性来设置预设的尺寸,包括`small`(448px)、`medium`(684px)和`large`(920px)。但是,如果同时设置了`width`和`size`,则`width`会覆盖`size`。
因此,调整模态框宽度最直接的方式就是使用`width`属性。
如果用户需要更复杂的样式调整,也可以通过`style`属性或`className`来自定义样式。例如:
```jsx
<Modal
visible={true}
style={{ width: '90%', maxWidth: '1000px' }}
>
...
</Modal>
```
或者通过className来应用自定义CSS类:
```jsx
<Modal
visible={true}
className="custom-modal"
>
...
</Modal>
```
然后在CSS中:
```css
.custom-modal {
width: 90% !important;
max-width: 1000px;
}
```
注意:使用自定义样式时,可能需要使用`!important`来覆盖默认样式,因为模态框的样式可能具有较高的优先级。
总结一下,设置Semi Design模态框宽度的方法有:
1. 使用`width`属性,直接设置宽度(数字或字符串)。
2. 使用`size`属性选择预设尺寸(small, medium, large)。
3. 使用`style`属性内联设置样式。
4. 使用`className`属性添加自定义类名,并通过CSS定义样式。
根据实际需求选择合适的方法即可。
[^1]: Semi Design官方文档:Modal组件API部分。</think>### Semi Design 模态框宽度设置指南
在 Semi Design 中,调整模态框(Modal)宽度主要通过以下方式实现:
#### 1. 使用 `width` 属性(推荐)
直接在 Modal 组件上设置 `width` 属性:
```jsx
<Modal
visible={true}
width={800} // 数字类型(单位:px)
// 或
width="90%" // 字符串类型(百分比)
>
内容区域
</Modal>
```
- 支持数字(像素值)或字符串(百分比)
- 优先级高于 `size` 属性
#### 2. 使用 `size` 预设尺寸
```jsx
<Modal size="small">...</Modal> // 448px
<Modal size="medium">...</Modal> // 684px(默认)
<Modal size="large">...</Modal> // 920px
```
#### 3. 自定义样式(高级)
通过 `style` 或 `className` 深度定制:
```jsx
// 方式1:行内样式
<Modal
style={{ width: "min(900px, 85vw)" }}
>
// 方式2:CSS类名
<Modal className="custom-modal">
```
对应 CSS:
```css
.custom-modal {
--modal-width: 720px !important;
max-width: 95vw;
}
```
#### 响应式适配技巧
```jsx
<Modal
width={window.innerWidth > 768 ? 800 : "90%"}
/>
```
> **注意事项**:
> 1. 当同时设置 `width` 和 `size` 时,`width` 优先级更高
> 2. 内容超出高度时会自动出现滚动条
> 3. 移动端建议使用百分比宽度(如 `width="90%"`)
[^1]: Semi Design 官方文档 - Modal 组件 API 参考
阅读全文
相关推荐


















