Drawing smart line widget for Titanium Alloy. This widget draw a line with high-light called ZURUI-SEN(ズルい線) in Japanese.
- Download and deploy the widget under
app/widgets/net.hoyohoyo.zuruiline. - Add the widget as a dependency to your
app/config.jsonfile like so:
…
"dependencies": {
"net.hoyohoyo.zuruiline": "1.0"
}- Use the widget in a view with
Widgettag like so:
<Widget id="line" src="net.hoyohoyo.zuruiline" />- Set style in a tss file like so:
'#line': {
top: '100dp',
width: '75%',
alphaBlack: 0.3,
alphaWhite: 0.7
}
'#line1': {
top: '50dp',
width: '75%',
alphaBlack: 0.3,
alphaWhite: 0.7
},
'#line2': {
top: '100dp',
width: '50%',
alphaWhite: 0.9,
gradientEnabled: false
},
'#line3': {
top: '150dp',
width: '80%',
alphaBlack: 0.4,
alphaWhite: 1,
gradientPosition: 0.5
},
'#line4': {
top: '200dp',
width: Ti.UI.FILL,
alphaBlack: 0.1,
gradientEnabled: false
},
'#line5': {
top: '250dp',
width: '50%',
gradientPosition: 0.1
}- iOS
- Android
| name | type | description |
|---|---|---|
| alphaBlack | Number | Alpha channel value of black line. (Default: 0.5, Range: 0 to 1) |
| alphaWhite | Number | Alpha channel value of white line. (Default: 0.5, Range: 0 to 1) |
| bottom | Number/String | Line's bottom position, in platform-specific units. |
| gradientEnabled | Boolean | Determines whether the alpha channel gradation on sides is enabled. (Default: true) |
| gradientPosition | Number | Position end of gradation on sides. (Default: 0.25, Range: 0 to 0.5) |
| left | Number/String | Line's left position, in platform-specific units. |
| right | Number/String | Line's right position, in platform-specific units. |
| top | Number/String | Line's top position, in platform-specific units. |
| width | Number/String | Line's width, in platform-specific units. |
For information about ZURUI-SEN, check out the following links. This widget is inspired by @ken_c_lo and @machida.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent