Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
<template>
	<div>
		<h2>Panel Align</h2>
		<div class="smenu">
      <RadioButton inputId="r1" name="groupname" value="left" v-model="palign"></RadioButton>
			<Label for="r1">Left</Label>
		</div>
		<div class="smenu">
      <RadioButton inputId="r2" name="groupname" value="right" v-model="palign"></RadioButton>
			<Label for="r2">Right</Label>
		</div>
		<div style="margin:0 40px">
		<Label for="c1" align="top">Select a value:</Label>
		<ComboBox inputId="c1" style="width:200px"
				v-model="value" 
				:data="data"
				:editable="false"
				:panelAlign="palign"
				:panelStyle="{width:'220px'}"></ComboBox>
		</div>
	</div>
</template>

<script>
export default {
  data() {
    return {
      palign: "left",
      value: 11,
      data: this.getData()
    };
  },
  methods: {
    getData() {
      return [
        { value: 11, text: "Mr. Nice" },
        { value: 12, text: "Narco" },
        { value: 13, text: "Bombasto" },
        { value: 14, text: "Celeritas" },
        { value: 15, text: "Magneta" },
        { value: 16, text: "RubberMan" },
        { value: 17, text: "Dynama" },
        { value: 18, text: "Dr IQ" },
        { value: 19, text: "Magma" },
        { value: 20, text: "Tornado" }
      ];
    }
  }
};
</script>
<style>
.smenu {
  margin: 0 40px 10px 40px;
}
.smenu label {
  margin-left: 10px;
}
</style>