完美的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