el-button怎么自己设置按钮大小
时间: 2023-08-12 08:06:29 浏览: 3923
在使用 Element UI 中的 el-button 组件时,可以通过设置不同的 class 或 style 来自定义按钮的大小。以下是两种常见的方法:
1. 使用 class
可以通过设置按钮的 class 属性来改变按钮的大小,例如:
```html
<el-button class="small-button">小按钮</el-button>
<el-button class="large-button">大按钮</el-button>
```
然后在 CSS 文件中定义对应的样式:
```css
.small-button {
font-size: 12px;
padding: 5px 10px;
}
.large-button {
font-size: 16px;
padding: 10px 20px;
}
```
2. 使用 style
也可以通过设置按钮的 style 属性来改变按钮的大小,例如:
```html
<el-button style="font-size: 12px; padding: 5px 10px;">小按钮</el-button>
<el-button style="font-size: 16px; padding: 10px 20px;">大按钮</el-button>
```
其中,`font-size` 控制按钮的字体大小,`padding` 控制按钮的内边距。根据实际需要调整这些属性即可。
相关问题
el-radio-button设置按钮的大小
在使用 Element UI 库中的 `<el-radio-button>` 组件时,可以通过添加 `size` 属性来设置按钮的大小。`size` 属性接受三个预设的值,分别是 `large`、`default` 和 `small`,分别对应大、中、小三种尺寸。如果不设置 `size` 属性,按钮将采用默认大小。
以下是如何设置 `<el-radio-button>` 按钮大小的示例代码:
```html
<template>
<!-- 设置为大号尺寸 -->
<el-radio-button label="1" size="large">选项一</el-radio-button>
<!-- 默认尺寸 -->
<el-radio-button label="2">选项二</el-radio-button>
<!-- 设置为小号尺寸 -->
<el-radio-button label="3" size="small">选项三</el-radio-button>
</template>
```
在上述示例中,三个单选按钮分别被设置为大号、默认和小号尺寸,通过 `size` 属性来实现。
el-button按钮的大小设置
可以通过设置按钮的`size`属性来调整按钮的大小。`size`属性可选值有:`medium`(默认值)、`small`和`mini`。例如:
```html
<el-button size="small">小号按钮</el-button>
<el-button>中号按钮</el-button>
<el-button size="medium">中号按钮</el-button>
<el-button size="mini">迷你按钮</el-button>
```
此外,你还可以通过设置按钮的`width`和`height`属性来自定义按钮的大小。例如:
```html
<el-button style="width: 100px; height: 50px;">自定义大小按钮</el-button>
```
阅读全文