iView UI参考手册
组件基础
Button 按钮
基础组件,触发业务逻辑时使用。
注意:非 template/render 模式下,需使用 i-button
。
代码示例
<template>
<Button type="default" ghost>Default</Button>
<Button type="primary" ghost>Primary</Button>
<Button type="dashed" ghost>Dashed</Button>
<Button type="text" ghost>Text</Button>
<Button type="info" ghost>Info</Button>
<Button type="success" ghost>Success</Button>
<Button type="warning" ghost>Warning</Button>
<Button type="error" ghost>Error</Button>
</template>
<script>
export default {
}
</script>
<template>
<Button type="primary" shape="circle" icon="ios-search"></Button>
<Button type="primary" icon="ios-search">Search</Button>
<Button type="primary" shape="circle" icon="ios-search">Search</Button>
<Button type="primary" shape="circle">Circle</Button>
<br><br>
<Button shape="circle" icon="ios-search"></Button>
<Button icon="ios-search">Search</Button>
<Button shape="circle" icon="ios-search">Search</Button>
<Button shape="circle">Circle</Button>
</template>
<script>
export default {
}
</script>
<template>
<div>
<RadioGroup v-model="buttonSize" type="button">
<Radio label="large">Large</Radio>
<Radio label="default">Default</Radio>
<Radio label="small">small</Radio>
</RadioGroup>
<br><br>
<Button :size="buttonSize" type="primary">Primary</Button>
<Button :size="buttonSize" type="default">Default</Button>
<Button :size="buttonSize" type="dashed">Dashed</Button>
<Button :size="buttonSize" type="text">Text</Button>
<br><br>
<Button :size="buttonSize" icon="ios-download-outline" type="primary" shape="circle"></Button>
<Button :size="buttonSize" icon="ios-download-outline" type="primary">Download</Button>
<br><br>
<ButtonGroup :size="buttonSize">
<Button :size="buttonSize" type="primary">
<Icon type="ios-arrow-back" />
Backward
</Button>
<Button :size="buttonSize" type="primary">
Forward
<Icon type="ios-arrow-forward" />
</Button>
</ButtonGroup>
</div>
</template>
<script>
export default {
data () {
return {
buttonSize: 'large'
}
},
}
</script>
<template>
<Button type="success" long>SUBMIT</Button>
<br><br>
<Button type="error" long>DELETE</Button>
</template>
<script>
export default {
}
</script>
<template>
<Button>Default</Button>
<Button disabled>Default(Disabled)</Button>
<br>
<Button type="primary">Primary</Button>
<Button type="primary" disabled>Primary(Disabled)</Button>
<br>
<Button type="dashed">Dashed</Button>
<Button type="dashed" disabled>Dashed(Disabled)</Button>
<br>
<Button type="text">Text</Button>
<Button type="text" disabled>Text(Disabled)</Button>
</template>
<script>
export default {
}
</script>
<template>
<Button type="primary" loading>Loading...</Button>
<Button type="primary" :loading="loading" @click="toLoading">
<span v-if="!loading">Click me!</span>
<span v-else>Loading...</span>
</Button>
<Button type="primary" :loading="loading2" icon="ios-power" @click="toLoading2">
<span v-if="!loading2">Click me!</span>
<span v-else>Loading...</span>
</Button>
<Button loading shape="circle"></Button>
<Button loading shape="circle" type="primary"></Button>
</template>
<script>
export default {
data () {
return {
loading: false,
loading2: false
}
},
methods: {
toLoading () {
this.loading = true;
},
toLoading2 () {
this.loading2 = true;
}
}
}
</script>
<template>
<h4>Basic</h4>
<br><br>
<ButtonGroup>
<Button>Cancel</Button>
<Button type="primary">Confirm</Button>
</ButtonGroup>
<ButtonGroup>
<Button disabled>Yesterday</Button>
<Button disabled>Today</Button>
<Button disabled>Tomorrow</Button>
</ButtonGroup>
<ButtonGroup>
<Button type="primary">L</Button>
<Button>M</Button>
<Button>M</Button>
<Button type="dashed">R</Button>
</ButtonGroup>
<br><br>
<h4>Icons</h4>
<br><br>
<ButtonGroup>
<Button type="primary">
<Icon type="ios-arrow-back"></Icon>
Backward
</Button>
<Button type="primary">
Forward
<Icon type="ios-arrow-forward"></Icon>
</Button>
</ButtonGroup>
<ButtonGroup>
<Button type="primary" icon="ios-skip-backward"></Button>
<Button type="primary" icon="ios-skip-forward"></Button>
</ButtonGroup>
<ButtonGroup>
<Button icon="ios-color-wand-outline"></Button>
<Button icon="ios-sunny-outline"></Button>
<Button icon="ios-crop"></Button>
<Button icon="ios-color-filter-outline"></Button>
</ButtonGroup>
<br><br>
<h4>Circle</h4>
<br><br>
<ButtonGroup shape="circle">
<Button type="primary">
<Icon type="ios-arrow-back"></Icon>
Backward
</Button>
<Button type="primary">
Forward
<Icon type="ios-arrow-forward"></Icon>
</Button>
</ButtonGroup>
<ButtonGroup shape="circle">
<Button type="primary" icon="ios-skip-backward"></Button>
<Button type="primary" icon="ios-skip-forward"></Button>
</ButtonGroup>
<ButtonGroup shape="circle">
<Button icon="ios-color-wand-outline"></Button>
<Button icon="ios-sunny-outline"></Button>
<Button icon="ios-crop"></Button>
<Button icon="ios-color-filter-outline"></Button>
</ButtonGroup>
<br><br>
<h4>Size</h4>
<br><br>
<ButtonGroup size="large">
<Button>Large</Button>
<Button>Large</Button>
</ButtonGroup>
<ButtonGroup>
<Button>Default</Button>
<Button>Default</Button>
</ButtonGroup>
<ButtonGroup size="small">
<Button>Small</Button>
<Button>Small</Button>
</ButtonGroup>
<br><br>
<ButtonGroup size="large" shape="circle">
<Button>Large</Button>
<Button>Large</Button>
</ButtonGroup>
<ButtonGroup shape="circle">
<Button>Default</Button>
<Button>Default</Button>
</ButtonGroup>
<ButtonGroup size="small" shape="circle">
<Button>Small</Button>
<Button>Small</Button>
</ButtonGroup>
</template>
<script>
export default {
}
</script>
<template>
<ButtonGroup vertical>
<Button icon="logo-facebook"></Button>
<Button icon="logo-twitter"></Button>
<Button icon="logo-googleplus"></Button>
<Button icon="logo-tumblr"></Button>
</ButtonGroup>
</template>
<script>
export default {
}
</script>
<template>
<Button to="/components/icon-en">Normal</Button>
<Button to="/components/icon-en" replace>No history</Button>
<Button to="//iviewui.com" target="_blank">New window</Button>
</template>
<script>
export default {
}
</script>
API
Button props
属性 |
说明 |
类型 |
默认值 |
---|---|---|---|
type |
按钮类型,可选值为 default、primary、dashed、text、info、success、warning、error或者不设置 |
String |
default |
ghost |
幽灵属性,使按钮背景透明 |
Boolean |
false |
size |
按钮大小,可选值为large、small、default或者不设置 |
String |
default |
shape |
按钮形状,可选值为circle或者不设置 |
String |
- |
long |
开启后,按钮的长度为 100% |
Boolean |
false |
html-type |
设置button原生的type,可选值为button、submit、reset |
String |
button |
disabled |
设置按钮为禁用状态 |
Boolean |
false |
loading |
设置按钮为加载中状态 |
Boolean |
false |
icon |
设置按钮的图标类型 |
String |
- |
custom-icon |
设置按钮的自定义图标 |
String |
- |
to |
跳转的链接,支持 vue-router 对象 |
String | Object |
- |
replace |
路由跳转时,开启 replace 将不会向 history 添加新记录 |
Boolean |
false |
target |
相当于 a 链接的 target 属性 |
String |
_self |
ButtonGroup props
属性 |
说明 |
类型 |
默认值 |
---|---|---|---|
size |
按钮组合大小,可选值为large、small、default或者不设置 |
String |
default |
shape |
按钮组合形状,可选值为circle或者不设置 |
String |
- |
vertical |
是否纵向排列按钮组 |
Boolean |
false |