Space 间距

基本使用

主色调 提示按钮 警示按钮

<div class="space-container">
	<div class="space-container-item">
		<amber-space>
			<amber-button type="primary" @click.native="handleClick">主色调</amber-button>
			<amber-button type="warning">提示按钮</amber-button>
			<amber-button type="danger">警示按钮</amber-button>
		</amber-space>
	</div>
</div>
<script>
  export default {
    methods: {
      handleClick(e) {
        console.log("点击了按钮", e)
      }
    }
  }
</script>

显示代码 复制代码 复制代码

垂直间距

主色调 提示按钮 警示按钮

<div class="space-container">
	<div class="space-container-item">
		<amber-space direction="vertical">
			<amber-button type="primary">主色调</amber-button>
			<amber-button type="warning">提示按钮</amber-button>
			<amber-button type="danger">警示按钮</amber-button>
		</amber-space>
	</div>
</div>

显示代码 复制代码 复制代码

间距大小

单选A 单选B 单选C

<div class="space-container">
	<div class="space-container-item">
		<amber-space size="12px">
			<amber-radio label="a" v-model="radioValue" @change="handleRadioChange">单选A</amber-radio>
			<amber-radio label="b" v-model="radioValue" @change="handleRadioChange">单选B</amber-radio>
			<amber-radio label="c" v-model="radioValue" @change="handleRadioChange">单选C</amber-radio>
		</amber-space>
	</div>
</div>
<script>
  export default {
    data() {
      return {
        radioValue: 'a'
      }
    },
    methods: {
		handleRadioChange(value) {
			this.radioValue = value
		}
    }
  }
</script>

显示代码 复制代码 复制代码

API

Space

参数	说明	类型	默认值	版本
direction	间距方向。可选horizontal vertical	string	horizontal
size	间距大小	string	8px