Semantic UI 1.0 发布,前端 UI 框架

来源: 投稿
作者: NinjaSquid

Semantic UI 1.0 发布了,改进记录包括:

Breaking Changes

  • Word Order - Many multi word variations now require proper word order, for exampleleft alignedorright floatedclassnames must be adjacent. This is to prevent conflicts with other multiple word variations

  • Form - Date field has been removed, use aui icon inputwith acalendar iconinstead

  • Label - Corner labels no longer support text, only icons.

  • Dropdown - Sub menus inside dropdowns now need a wrapping div text around sub-menu descriptions

  • Checkbox - Checkbox "enable" and "disable" have been replaced with "check" and "uncheck"

  • Modal - Modalleftandrightsections are now replaced withimageanddescription

  • Accordion - Accordions are now unstyled by default allowing for simpler coupling with other UI without having to override styles. Styled accordions are now included as a variationui styled accordion

  • List - List item selectors are now more strict, list items must be immediate children ofui listorui list list

  • Item - 0.x.x's UI card has been adjusted heavily. Vertically listed content should useui itemwhile floated grouped content should continue to useui card. Some 'card' view content has been slightly adjusted. Please refer to documentation

  • Header / Icon - Inverted headers and icons no longer invert background colors, but instead use a lighter version of colors more legible on dark backgrounds. Inverted circular icons, still however invert the color of the circle.

  • Input - Labeled inputs now havecornerleftandtoplabel types. Any labeled inputs should be converted tocorner labeled inputto preserve functionality from0.x

  • Modal - allowMultiple (allowing multiple modals at once) is now set to false by default.

  • Table - Tables are no longer striped by default, instead you must specify the 'striped' variation

  • Transition - Complete, and Start callbacks are nowonCompleteandonStart


  • General - CSS animations now hint with will change properties to increase performance in supported browsers

  • General - Many modules now use DOM Mutations and event delegation to allow content adjustment after initialization

  • Accordion - Accordion now includes all icons in an embedded font instead of requiring icons

  • Button - Now has compact form, used for fitting into tight spaces

  • Button - Now has CSS loaders to allow loading state to maintain other styles

  • Checkbox - Now correctly handles read-only and disabled, has read-only and disabled states

  • Checkbox - All styles have been redone. Standard checkboxes are now based around PX and not EM making sure there are no unusual circles or rounding issues. Checkboxes also now use a custom font for glyphs instead of CSS tricks.

  • Checkbox - Checkbox now have afireOnInitsetting for firing callbacks on page load

  • Checkbox - Checkbox now receive acheckedclass when checked, making it easier to write css selectors on checked checkboxes, for example when using sibling selectors.ui.checked.checkbox + .content { // style }

  • Dropdown - New dropdown type, searchable selection for large lists of choices

  • Dropdown - Dropdowns can now be initialized directly on a<select>element without any html

  • Dropdown - New action combo will change text of adjacent button, select will select element but not change text

  • Dropdown - Many new content types now work inside dropdowns, headers, dividers, images, inputs, labels and more

  • Form - Form now has a success state which will automatically display success messages

  • Dimmer - Dimmer will now automatically determine whether click-to-close is enabled bysettings.on

  • Dimmer - Multiple dimmers can now be used on the same context withdimmerName

  • Dimmer - Dimmer variations can be specified when creating a dimmer from javascript usingvariationsetting.

  • Form - Grouped fields and inline fields can now have labels

  • Form - Forms in 'success' state will now show success messages inside

  • Form - Inputs now use 1em font size and correctly match selection dropdown height

  • Form - Inverted form now properly styles loader

  • Form - New field typerequiredformats labels to show filling out field is mandatory

  • Grid -ui dividercan now be used inside of row columns as well asvertically divided gridvariation

  • Grid - Grid rows and columns now support color variations

  • Grid - Grid has been rewritten to automatically create row flow without row wrappers

  • Grid - Divided and celled grids can now be inverted for dark backgrounds

  • Grid - Elements inside a grid that are not rows or columns will now align properly

  • Grid - Fixed page grid allows for fixed pixel size containers used with a grid instead of percentage

  • Grid - Vertically divided grid now does not include left/right gutters in divider

  • Header - Linked headers now receive link colors

  • Image - Newbordered imagevariation

  • Item - Items now have a horizontal list view for content lists

  • Label - Added tag label and empty circular label style

  • Label - Now has compact form, for fitting into tight spaces

  • Label - Now has more sizes available

  • List - Child lists can now be formatted to sit inside text content

  • List - List images can now specify vertical alignment

  • List - List spacing defaults have been adjusted to be more consistent

  • Popup - Popup can now allow itself not to be closed when hovered over

  • Popup - A popup element can now be specified on initialization.

  • Reveal - Reveals now all use css properties with GPU acceleration

  • Popup - Positioned popups will now extend in the opposite direction to fit better with floated content

  • Rating - Rating now uses an embedded icon font to maximize compatibility

  • Rating - Rating can now automatically generate icons without including them

  • Rating - Rating can use data attributes to specify individual ratings

  • Sidebar - Sidebar now has tall / very tall variations for resizing top/bottom sidebars

  • Shape - Shape now is better at calculating sizes when animating

  • Shape - You can now disable repeated animations by setting, so animation wont queue if side is currently visible

  • Steps - Steps can now have icons, descriptions and titles. Step default theme has been modified significantly to be more flexible.

  • Table - Tables now have 'basic' and 'very' basic variations

  • Transition - Transition will now keep block position of elements hidden with visibility hidden

  • Transition - Transitions now will handle multiple display types more consistently

  • Transition - Transition now has a newstartcallback, before animation starts

  • Transition - Complete callback now does not occur if animation is interrupted before completing

  • Transition - You can now specify the final displayType of a transitioning element in metadata or settings (not just automatically detected)

  • More untracked changes we're added as well

    ** Bug Fixes **

  •             See Closed GitHub Issues


Semantic UI—完全语义化的前端界面开发框架,跟 Bootstrap 和 Foundation 比起来,还是有些不同的,在功能特性上、布局设计上、用户体验上均存在很多差异。

64 收藏
最新评论 (22)


新的主题,太帅了。 所有的example跑了一遍,非常顺畅。 棒!
2014-11-27 13:24
新的主题,太帅了。 所有的example跑了一遍,非常顺畅。 棒!
2014-11-27 12:54
2014-11-26 15:11
毕竟是国外刚成熟的一个轻量框架,要IE8的自行ZUI,bt,amazeUI去啊,要支持IE6的就自己写css吧,反正也没法加特效和响应式,就整天hack吧。我觉得国内兼容按此规则,1,js层面兼容到ie6, mvvm用knockout,avalon还保持对IE6支持,json补丁array补丁打好还是可以的。2,DOM操作层面,html5shiv补丁,然后还有jquery撑着。 3, 样式层面 ie6 7下能操作就不错了,IE8无响应式固定宽度,无圆角阴影无css3动画,可保证基本交互。
2014-11-26 15:01


国内开发者最常用的句子:1.不支持ie8,垃圾 2.有没有中文文档?3.求破解码。。。。
2014-11-26 10:06




对于淘汰IE的进程有这样一句话: 明日复明日, 明日何其多. 为何国内市场如此抱残守旧, 开发者也是有责任的.
2014-11-26 10:06
IE 9+ (Browser prefix only),果断放弃了!
2014-11-26 10:03
2014-11-26 08:23
国内开发者最常用的句子:1.不支持ie8,垃圾 2.有没有中文文档?3.求破解码。。。。
2014-11-25 22:33
2014-11-25 22:31
22 评论
64 收藏