看一個桶能裝多少水不是看這個桶的長板有多高,而要看他的短板有多高,一個關(guān)鍵性的短板決定了我們是否可以真正地把Fuse用于實際的App生產(chǎn)環(huán)境中。OK,言歸正傳,F(xiàn)use目前只有文本框組件惰匙,而對于其它類型的表單元素組件我們要如何來解決這些App上經(jīng)常會用到的功能呢?國外有網(wǎng)友有人已經(jīng)給出了答案铃将,我們給以通過這種實現(xiàn)方式來舉一返三项鬼,實現(xiàn)其它的組件功能。
有哪些表單forms控件呢劲阎?(官方目前已將些控件列為待開發(fā)項目清單上了)
- DatePicker
- Select or Dropdown
- Radio Button
- Checkbox
下面我們來自建一個復選框Checkbox組件吧秃臣!
首先我們要在項目文件夾的根目錄建一個.ux
后綴的文件,我們這里把他命名為Checkbox.ux
哪工,內(nèi)容如下:
<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>
注意奥此,此處引用了一個字體資源用于顯示復選框上的勾,所以需要下載字體文件放到項目的根目錄雁比,本文后面有提供下載稚虎,字體效果參見字體官網(wǎng):
http://fortawesome.github.io/Font-Awesome/icon/check/
好的,到此為止我們已經(jīng)做好了這個自定義的控件了偎捎,剩下的便是在項目主文件中調(diào)用了蠢终,調(diào)用方式如下序攘。
<Checkbox ux:Name="myCheckbox" />
最終效果參見圖片:
未選狀態(tài)
選中狀態(tài)
字體下載:
<a href="http://www.xend.live/wp-content/uploads/2016/05/fontawesome-webfont.ttf_.zip"rel="">fontawesome-webfont.ttf</a>
另外說一下,官方推薦目前沒有控件的情況下用如下的方式來實現(xiàn):
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表單組件
發(fā)布時間:2016年05月03日
博客被黑寻拂,挪窩簡書安家……