[
https://issues.apache.org/jira/browse/WEEX-260?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Apache Spark updated WEEX-260:
------------------------------
Description:
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.
was:
h2. Better layout:
[https://gist.github.com/tw93/cd9d847b16854af13e49d996dc853a05|http://example.com|https://gist.github.com/tw93/cd9d847b16854af13e49d996dc853a05]
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.
|!https://gw.alipayobjects.com/zos/rmsportal/hZDrwsawQMFqaNyEdNka.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
h4. Code
*
Weex iOS:
**
[WXSwitchComponent.m|https://github.com/tw93/incubator-weex/blob/ios-feature-switch/ios/sdk/WeexSDK/Sources/Component/WXSwitchComponent.m]
*
Weex Vue Demo:
** [http://dotwe.org/vue/99a13cce5a429c7b9bce9bea24253935]
*
** [Demo Bundle
JS|http://dotwe.org/raw/dist/99a13cce5a429c7b9bce9bea24253935.bundle.wx]
h4. Details
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; }}
Welcome to put forward any suggestion about the solution or other requirements
for the component, Thanks！
> 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)
