2017-11-03 10:46:18 +00:00
|
|
|
<template>
|
|
|
|
|
<div id="components-button-demo-button-group">
|
|
|
|
|
<h4>Basic</h4>
|
2018-01-23 10:55:39 +00:00
|
|
|
<a-button-group>
|
|
|
|
|
<a-button>Cancel</a-button>
|
|
|
|
|
<a-button type="primary">OK</a-button>
|
|
|
|
|
</a-button-group>
|
|
|
|
|
<a-button-group>
|
|
|
|
|
<a-button disabled>L</a-button>
|
|
|
|
|
<a-button disabled>M</a-button>
|
|
|
|
|
<a-button disabled>R</a-button>
|
|
|
|
|
</a-button-group>
|
|
|
|
|
<a-button-group>
|
|
|
|
|
<a-button type="primary">L</a-button>
|
|
|
|
|
<a-button>M</a-button>
|
|
|
|
|
<a-button>M</a-button>
|
|
|
|
|
<a-button type="dashed">R</a-button>
|
|
|
|
|
</a-button-group>
|
2017-11-03 10:46:18 +00:00
|
|
|
|
|
|
|
|
<h4>With Icon</h4>
|
2018-01-23 10:55:39 +00:00
|
|
|
<a-button-group>
|
|
|
|
|
<a-button type="primary">
|
|
|
|
|
<a-icon type="left" />Go back
|
|
|
|
|
</a-button>
|
|
|
|
|
<a-button type="primary">
|
|
|
|
|
Go forward<a-icon type="right" />
|
|
|
|
|
</a-button>
|
|
|
|
|
</a-button-group>
|
|
|
|
|
<a-button-group>
|
|
|
|
|
<a-button type="primary" icon="cloud" />
|
|
|
|
|
<a-button type="primary" icon="cloud-download" />
|
|
|
|
|
</a-button-group>
|
2017-11-03 10:46:18 +00:00
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<style>
|
|
|
|
|
#components-button-demo-button-group h4 {
|
|
|
|
|
margin: 16px 0;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
line-height: 1;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
}
|
|
|
|
|
#components-button-demo-button-group h4:first-child {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
}
|
|
|
|
|
#components-button-demo-button-group .ant-btn-group {
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
