Fuse短板之如何实现各类表单元素及组件（一）

2017-01-05 本文已影响17人衣咸

看一个桶能装多少水不是看这个桶的长板有多高，而要看他的短板有多高，一个关键性的短板决定了我们是否可以真正地把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 of Checkbox. You can create your own style if you want it to appear like a traditional checkbox.

Tag：fuse表单组件
发布时间：2016年05月03日
博客被黑，挪窝简书安家……

Fuse短板之如何实现各类表单元素及组件（一）

猜你喜欢

热点阅读