阿里云赞助

<switch>

<switch>

v0.6.1+

The weex builtin component switch is used to create and manage an IOS styled On/Off buttons, for example, the Airplane mode button in the Settings app is a switch button.

Child Components

There are no child components for the switch component.

Attributes

  • checked <boolean> true|false, default value is false, indicating whether the button is on or not.
  • disabled <boolean> true|false, default value is false, indicating whether the button is enable or not.

Styles

Notes: There are several style properties that you mustn’t use on this component. And here are all the invalid properties:

  • width
  • height
  • min-width
  • min-height
  • margin and margin-xxs
  • padding and padding-xxs
  • border and border-xxs

Notes: If the container of <switch> is not set to align-items:flex-start, the switch in android will be stretched.

common styles: check out common styles for components

Events

Parameters of events’ object for onchange event:

  • value: the value of the component who dispatched this event, which is the boolean value true or false.
  • timestamp: the time stamp of the event.

Examples

<template>
<div>
<div class="example">
<text class="label">normal</text>
<switch></switch>
</div>
<div class="example">
<text class="label">checked</text>
<switch checked="true"></switch>
</div>
<div class="example">
<text class="label">disabled</text>
<switch disabled="true" checked="true"></switch>
<switch disabled="true"></switch>
</div>
<div class="example">
<text class="label">onchange</text>
<switch @change="onchange"></switch>
<text class="info">{{checked}}</text>
</div>
</div>
</template>
<script>
export default {
data () {
return {
checked: false
}
},
methods: {
onchange (event) {
console.log(`onchage, value: ${event.value}`)
this.checked = event.value
}
}
}
</script>
<style scoped>
.example {
flex-direction: row;
justify-content: flex-start;
margin-top: 60px;
}
.label {
font-size: 40px;
line-height: 60px;
width: 350px;
color: #666;
text-align: right;
margin-right: 20px;
}
.info {
font-size: 30px;
line-height: 60px;
color: #BBB;
margin-left: 10px;
}
</style>

try it

Apache Incubator
Disclaimer: Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.


ApacheCopyright(c) 2017 The Apache Software Foundation. Licensed under the Apache License, Version 2.0