Fuse短板之如何实现各类表单元素及组件(一)
看一个桶能装多少水不是看这个桶的长板有多高,而要看他的短板有多高,一个关键性的短板决定了我们是否可以真正地把Fuse用于实际的App生产环境中。OK,言归正传,Fuse目前只有文本框组件,而对于其它类型的表单元素组件我们要如何来解决这些App上经常会用到的功能呢?国外有网友有人已经给出了答案,我们给以通过这种实现方式来举一返三,实现其它的组件功能。
enable
有哪些表单forms控件呢?(官方目前已将些控件列为待开发项目清单上了)
- DatePicker
- Select or Dropdown
- Radio Button
- Checkbox
下面我们来自建一个复选框Checkbox组件吧!
首先我们要在项目文件夹的根目录建一个.ux
后缀的文件,我们这里把他命名为Checkbox.ux
,内容如下:
<ToggleControl ux:Class="Checkbox" HitTestMode="LocalBounds">
<Clicked>
<Toggle Target="this"/>
</Clicked>
<Font File="fontawesome-webfont.ttf" ux:Global="fa_icons" />
<Rectangle Width="15" Height="15" CornerRadius="3" >
<LinearGradient StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#f0f0f0" />
<GradientStop Offset="1" Color="#e0e0e0" />
</LinearGradient>
<Text ux:Name="checkbox" Font="fa_icons"/>
<WhileTrue Source="this">
<Change checkbox.Value=""/>
</WhileTrue>
</Rectangle>
</ToggleControl>
注意,此处引用了一个字体资源用于显示复选框上的勾,所以需要下载字体文件放到项目的根目录,本文后面有提供下载,字体效果参见字体官网:
http://fortawesome.github.io/Font-Awesome/icon/check/
好的,到此为止我们已经做好了这个自定义的控件了,剩下的便是在项目主文件中调用了,调用方式如下。
<Checkbox ux:Name="myCheckbox" />
最终效果参见图片:
disable
未选状态
enable选中状态
字体下载:
<a href="http://www.xend.live/wp-content/uploads/2016/05/fontawesome-webfont.ttf_.zip"rel="">fontawesome-webfont.ttf</a>
另外说一下,官方推荐目前没有控件的情况下用如下的方式来实现:
We have
Switch
at the moment that fills the role ofCheckbox
. You can create your own style if you want it to appear like a traditional checkbox.
Tag:fuse表单组件
发布时间:2016年05月03日
博客被黑,挪窝简书安家……