发布于 2015-09-02 06:49:46 | 231 次阅读 | 评论: 0 | 来源: 网友投递
Semantic UI开源前端框架
Semantic UI是一个免费开源的前端开发框架.Semantic UI拥有支持情态动词、手风琴元素、元素调光器、3D转换,甚至是评级等多种功能。
Semantic UI 2.1.0 发布,此版本更新内容如下:
新 UI 特性:
API - Added encodeParameters
option to enable/disable parameters being encoded with encodeURIComponent
#2752
API Added new setting hideError
, defaults to auto
(will automatically hide error for elements that are not forms). #2586
Build Tools - Packaged .overrides
file are now an optional include
Button - colored basic
button are now colored before :hover
in the default theme, this is more in line with common usage across other websites.
Button - Added labeled button
variation for display a count next to a button.
Cards - Added documentation for stackable
cards which was available but undocumented in previous versions.
Checkbox - Added 4 new callbacks beforeChecked
, beforeUnchecked
, beforeDeterminate
, beforeIndeterminate
. You can now cancel a state change by returning false from these callbacks.
Divider - Vertical divider can now be used multiple times in a single column row (not just 50/50 split). #2808
Dropdown - Dropdown using remote data, can now customize the property names returned by api call using fields
(similar to search).
Dropdown - Dropdown will now automatically update selected values when hidden input value changes (so long as change
event is triggered) #2626
Dropdown - Dropdown with user additions now will use custom templated messages to distinguish added choice from preselected choice #2923
Form Validation - Added credit card validation, supports array of card types, and international cards including non luhn cards like China UnionPay #2729
Form Validation - Updated appearance of form validation prompts to use a more lightweight style. Added variables for controlling error validation prompt styles in form.variables
Grid - Added new responsive reversed
variations for reversing column order, these are also compatible with other grid types like divided
and celled
by device #2685
Icon - Added fitted
icon variation, and new small sizes tiny
and mini
Input - Added disabled
state for inputs #2694
Input - Added ability for labeled input to be attached to both sides #2922 Thanks @maturano
Label - Added a new basic label
style, works symbiotically with other label types to provide a more lightweight style label
Menu - Added new tabular
menu types, right tabular
, bottom tabular
, added many new tabular
menu variables for customizing
Menu - Appearance of labeled icon menu
has been modified. Horizontal menus now have icons above text, and icons are slightly larger than before.
Search - Search now can use any server response mapping, use the fields
parameter to pass in a mapping of server response to content thanks @anibalmf1 #2645
Site - Added global variable @focusedFormBorderColor
for controlling form focus border color
Table - New fixed
table variation added for use with table-layout: fixed;
. This also supports "..." ellipsis when used with single line
content
Breadcrumb - Breadcrumb no longer receives vertical spacing by default. This may often cause vertical alignment issues when displayed next to other inline-block
content.
Dropdown - Added get default text
and get placeholder text
behaviors for returning text values.
Dropdown - Pointing dropdown (dropdown with arrows) now support upward
, and will automatically move pointer arrows when appearing upward #2733
Form - inverted form
now remove input border, added new variables for controlling inverted form input styles
GitHub Theme - Added github icon theme with port of Octicons.
Label - Added basic
label variation, useful for item counts
Menu - inverted menu
now support colored
individual items Thanks @maturano #2850
Menu - text menu
now uses padding for hitboxes to make target area for links larger
Build Tools - gulp build
now correctly calls callback
, allowing those importing tasks to chain it correctly #2836 Thanks @artemkaint
Dropdown - Dropdown show
and hide
are now cancellable by returning false
from onShow
or onHide
callbacks.
Flag - England flag alias is now correctly set #2770 Thanks @eduardom
Form Validation - Added number
and decimal
validations to form Thanks @TonnyORG #2537
Form Validation - Form onSuccess
and onFailure
now receive current form fields as a parameter Thanks @guodong
Popup - Popup will now look for inline popup as any next adjacent sibling #2772 Thanks @malacalypse
Accordion - Added missing notation for accordion docs #2812
Build Tools - Fixed bug where gulp version
would show x.x
[#2875 #2920
Build Tools - Fixes issue where component glob {tab, table}
caused table to be included twice in concatenated source **
Button - Fixes inverted button missing an active
and active focus
state #2635
Button - Fixes issue where basic button
would not have focus color text when colored #2264
Checkbox - Clicking a link inside an initialized checkbox label
will now work correctly, and will not toggle the checkbox. #2804
Container - Fix issue with fluid container
being 100% + gutter
at mobile resolution (causing overflow)
Dropdown - forceSelection
no longer sets current value in search selection when current query is blank #2058
Dropdown - Dropdown @arrowSize
will now automatically reposition itself if size is changed with variable
Dropdown - Dropdown arrow now has a variable @dropdownArrowSize
, and is slightly smaller than previously
Dropdown - Fix left menu
inside ui menu
appearing horizontally #2778
Dropdown - Fixed error where menu would disappear when entering spaced words using allowAdditions: true
caused by value matching its own whitespace-trimed value #2853
Dropdown - Fixed issue where "no results" message would be still be visible before search query on input focus #2824
Dropdown - Fixed issue where onChange
would not fire when using action: 'hide'
. #2818
Dropdown - Fixed issue where selected item would not be shown when being re-shown after filtering with single search selection #2824
Dropdown - Fixes issues with setting "" (empty quote) values when placeholder: false
is used. Fixes issues with using clear
and restore defaults
without placeholders. #2637
Dropdown - Remove use of trim
which causes issues IE 11 and below #2806
Embed - Remove accidental console.log
statements in js #2760
Form / Input - Fixes ::placeholder
text color for ui error input
, modifies form error placeholder color to distinguish from form value error color #2786
Form / Input - Fixes issue where ui input
would sometimes collapse to 0px
width, especially when used inside an inline field
[#2705 [#2621 #2821
Form - disabled field(s)
now remove pointer-events
allowing it to disable checkbox and dropdown functionality #555
Form - Date input and other special input in chrome now are the same height as normal input (adds custom vendor shadow dom styling) #2704
Form - Form will no longer show messages that are empty in error
, warning
, or success
state.
Grid - Fixed issue where relaxed stackable grid
would have incorrect margin on mobile width
Grid - Fixed issue where nested stackable grid
would have incorrect margin on mobile.
Header - Fixed attached header
to have the correct bottom border on top attached
and attached
variations. #2798
Icon - Fixed typo in cube icon alias caused by bad grep #2765
Input - Fixed issue with appearance of left corner labeled left icon input
#2782
Item - Fixed bottom aligned
not working in item due to incorrect flex value #2826
List - Lists can now be right floated
or left floated
Menu - Fixed (x) column
nested grid with alignment stacking vertically (wrong flex-direction) #2810
Menu - Sub menus now work correctly and are correctly spaced inside secondary menu
and text menu` #2862
Modal - Fix autofocus setting in modal not working due to improper selector #2737
Modal - Increased close
specificity, modal will now only close on > .close
#2736
Popup - Fixes issue where variation would not be added to a pre-existing popup even if specified in javascript #26011
Search - Calling .search('show results')
no longer fails when input is not focused #2842
Table/Label - ribbon labels
will now automatically position themselves when used inside a table #1930
Transition - Transition callbacks now all have the correct this
set. #2758
API - API debug is now false
by default, like other modules. #2817
Build Tools - Removed octal literals from install scripts (for color escaping), and uses of future ECMAScript reserved words [#2838 #2839 Thanks @artemkaint
Dropdown - Fixed issue where label could not be removed when using a numeric value due to mismatched types [#2754 #2755 Thanks @dgurkaynak
Menu - Fixes tabular menu missing variable for background. Thanks @frontdevde
Step - Fixed issue with display of step groups with only one step having incorrect border radius Thanks @elliotisonfire #2869
Sticky - Sticky now sets width and height with !important
to avoid inheritance issues in some cases Thanks @lauri-elevant #2710
Tab - Fixed issue where simple path would be tested before full path, i.e. first/
vs /second/first/
causing tab to not open in some cases Thanks @habibutsu #2843
其他 bug 修复
API - API now will use automatically use form
action if no api event is specified now when form is stateContext
but not intialized element
Build Tools - Fixes issue on win
platform where packaged theme would not correctly update when using watch due to regExp not matching windows path separators.
Dropdown - Dropdown will no longer fire native onchange
event on hidden input when setting value during initial load (unless fireOnInit: true
) #2795 Thanks @lauri-elevant
Dropdown - Fixed issue where forceSelection
would not occur when pageLostFocus
(clicked into another tab and back)
Dropdown - Fixed issue where using the specific value value="false"
would cause an option to not be removable from a multiple select
Dropdown - When useLabels: false
placeholder text will now show up when 0 items selected, instead of the text "0 items selected"
Dropdown/Tab - Fixed an instance where metadata
was not referencing settings metadata value
Form Validation - Fixed issue with get value(s)
where unchecked checkboxes would not correctly retrieve values
Form - Dropdown in inline field
now use auto width instead of 100%
Grid / Container - ui relaxed grid container
and ui very relaxed grid container
will now all render at same container width
Grid - Fixed stackable celled grid
having doubled border width between rows
Header - Fixed issue with em sizing of chubby
and bookish
header themes appearing too large
Icons - Fixed issue where active icon
or emphasized icon
would not adjust opacity inside menus
Input - labeled input
now keeps border on label edge so that focus color appears correctly
Input - Input now will reset font-weight
and font-style
if set on parent;
Input action input
and labeled input
now have focused border on inner edge with label/button
Label - pointing
and attached
labels are now word order sensitive to allow them to work correctly with other directional variations.
Label - pointint label
now rounds to exact pixel em value, should align correctly in more cases
Menu - @pressedItemColor
has been renamed to @pressedItemTextColor
to match naming conventions of other variables
Menu - Added flex: 0 0 auto
to menu item to make sure menu do not collapse text content to reduce space
Menu - Fix text align on dropdown item
inside icon menu
Menu - Fixed hybrid initialization not creating menu
correctly. Fixed docs example of hybrid <select>
initialization
Menu - Fixed issue with labeled input
text inside menu not appearing vertically centered
Popup - Fixed onRemove
firing even when popup is not removed
Reveal - Reveal now uses display: inherit
instead of forcing inline-block
下载:https://github.com/Semantic-Org/Semantic-UI/archive/2.1.0.zip。
Semantic UI—完全语义化的前端界面开发框架,跟 Bootstrap 和 Foundation 比起来,还是有些不同的,在功能特性上、布局设计上、用户体验上均存在很多差异。
Semantic UI是一个免费开源的前端开发框架.Semantic UI拥有支持情态动词、手风琴元素、元素调光器、3D转换,甚至是评级等多种功能。
Semantic UI 特点:
文档和演示非常完善
易于学习和使用
配备网格布局
支持 Sass 和 LESS 动态样式语言
有一些非常实用的附加配置,例如inverted类。
对于社区贡献来说是比较开放的。
有一个非常好的按钮实现,情态动词,和进度条。
在许多功能上使用图标字体。
Semantic UI 对浏览器的支持:
Last 2 Versions FF, Chrome, IE (aka 10+)
Safari 6
IE 9+ (Browser prefix only)
Android 4
Blackberry 10