[
https://issues.apache.org/jira/browse/WEEX-260?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=16474184#comment-16474184
]
Adam Feng commented on WEEX-260:
--------------------------------
Greate contribution!
> Support setting color about <switch>
> ------------------------------------
>
> Key: WEEX-260
> URL: https://issues.apache.org/jira/browse/WEEX-260
> Project: Weex
> Issue Type: Improvement
> Components: iOS
> Reporter: Apache Spark
> Assignee: Adam Feng
> Priority: Major
>
> h2. Better layout:
> [https://gist.github.com/tw93/cd9d847b16854af13e49d996dc853a05|http://example.com/]
> h2. Background
> * Currently, the component in Weex only support the default green color, But
> many times the business needs to set color for the theme tone of the product,
> So needs to support setting the color.
> h2. New Support && Demo
> * tintColor: Background color when the switch is turned on.
> * onTintColor: Border color and background color on Android when the switch
> is turned off.
> * thumbTintColor: Color of the foreground switch grip.
> |iOS|Web|
> |!https://gw.alipayobjects.com/zos/rmsportal/echgZhufHYAqYQSSSyKJ.gif|width=240!|!https://gw.alipayobjects.com/zos/rmsportal/zlyOBlQnVbloIizCdWKU.gif|width=240!|
> h2. How to Use
> <switch on-tint-color="#C33D3E"
> thumb-tint-color="#FF7703"
> tint-color="#850B0B"
> checked="true"></switch>
> h2. My solution
> h3. Code
> * Weex iOS:
> **
> [WXSwitchComponent.m|https://github.com/tw93/incubator-weex/blob/ios-feature-switch/ios/sdk/WeexSDK/Sources/Component/WXSwitchComponent.m]
> * Weex Web：
> **
> [switch/index.js|https://github.com/tw93/weex-vue-render/blob/master/src/components/switch/index.js]
> **
> [switch/index.css|https://github.com/tw93/weex-vue-render/blob/master/src/components/switch/style.css]
> * Weex Vue Demo:
> ** [http://dotwe.org/vue/99a13cce5a429c7b9bce9bea24253935]
> ** [Demo Bundle
> JS|http://dotwe.org/raw/dist/99a13cce5a429c7b9bce9bea24253935.bundle.wx]
> h3. Details
> h4. iOS
> It can be overwritten with the
> {{onTintColor}}、{{thumbTintColor}}、{{tintColor}} attributes of
> {{switchView}}, as well as the job of updating the attributes.
> ...
> _switchView.onTintColor = _onTintColor;
> _switchView.thumbTintColor = _thumbTintColor;
> _switchView.tintColor = _tintColor;
> h4. Web
> Override the corresponding CSS styles.
> Welcome to put forward any suggestion about the solution or other
> requirements for the component, Thanks！
> h2.
--
This message was sent by Atlassian JIRA
(v7.6.3#76005)
