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

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

看一个桶能装多少水不是看这个桶的长板有多高,而要看他的短板有多高,一个关键性的短板决定了我们是否可以真正地把Fuse用于实际的App生产环境中。OK,言归正传,Fuse目前只有文本框组件,而对于其它类型的表单元素组件我们要如何来解决这些App上经常会用到的功能呢?国外有网友有人已经给出了答案,我们给以通过这种实现方式来举一返三,实现其它的组件功能。


enable

有哪些表单forms控件呢?(官方目前已将些控件列为待开发项目清单上了)

下面我们来自建一个复选框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日
博客被黑,挪窝简书安家……

上一篇下一篇

猜你喜欢

热点阅读