完美的HTML移動端UI框架，Framework7 v3新組件特性一覽

 

Toast 吐司

我在2016年開始使用Framework7，在Framework7較早的版本中，沒有吐司，只有alert，Toast需要自己實現，而吐司又是非常常用的組件，這是Framework7爲數不多的欠缺的地方，不過現在這個問題久不存在了，最新版的F7裏面已經增加了這個功能。

http://framework7.io/docs-demos/core/toast.html

Checkbox  Radio

Checkbox  Radio之前版本在list中樣式才能生效，新版本單獨即可使用。

<label class="checkbox"><input type="checkbox"><i class="icon-checkbox"></i></label>

http://framework7.io/docs-demos/core/checkbox.html

http://framework7.io/docs-demos/core/radio.html

 

Chips / Tags

http://framework7.io/docs-demos/core/chips.html

Data Table 表格

早先的Framework7也是沒有表格的，有時候用到表格，會配合其他框架，例如把bootstrap裏面的表格部分拿過來用，現在這個新版F7DE表格，比自己引入方便，UI和交互上也不突兀了。

http://framework7.io/docs-demos/core/data-table.html

Elevation 陰影

http://framework7.io/docs/elevation.html

Floating Action Button 浮動按鈕

浮動按鈕增加了新的玩法

http://framework7.io/docs-demos/core/floating-action-button.html

Gauge  儀表

http://framework7.io/docs-demos/core/gauge.html

Inputs

增加了清空按鈕 <span class="input-clear-button"></span>

增加了校驗及提示信息  required validate

 <div class="item-input-info">Full name please</div>

 

浮動標籤 Floating Labels (MD-theme only)

Notification

http://framework7.io/docs-demos/core/notification.html

Tooltip 工具提示

http://framework7.io/docs-demos/core/tooltip.html

智能視頻廣告

http://framework7.io/docs-demos/core/vi.html

另外還有

iPhone X Styles

Hairlines / Borders