Menu

New in 2.6
An introduction to new features found in the latest release

Toasty loaders

Fomantic 2.6 brings a new components for handling content loading ui placeholder, as well as a new type of segment used to reserve space for content: ui placeholder segment.

Additionally several important component updates are included in this release.

Modals have been re-architected to use hybrid flex support, falling back to JS positioning for more complex use-cases (or older browsers).
Dropdowns now include a clearable setting for letting users reset dropdowns to its empty state.

We are also introducing the new Toast component

If you are upgrading from a previous SUI version, be sure to add @placeholder & @toast to your theme.config to include the placeholder or toast components in your code.

New UI Component

Placeholders

Placeholders can be used to reduce the jarringness, and perceived load time when loading new content

Simulate Loading
Add
Delete
Lindsay
Joined in 2013
Primary Contact
Add
Delete
Semantic-Org/Semantic-UI-Docs
Updated 22 mins ago

Placeholder Segment

Placeholder segments allow you to reserve space in your design for where content is intended to appear. This is useful when a page should prompt a user about its intended functionality, even when no content is present.

No users have been added yet
Add User
Or
Find Country
Add New Country
Create

New Features

Clearable Dropdowns

Now dropdowns can specify that their content can be cleared with clearable: true.

Show me classes currently available.

Improved Flexbox Modals

Although flex-box were introduced in 2.3.0 there were limitations which may have prevented some advanced use-cases. For example, flexbox modals did not support modals that used detachable: false and werent directly inside dimmer flex containers. Also some flex browsers (IE11) do not support absolutely positioned elements inside flex containers, so multiple overlapping modals could not be used in those cases.

2.4.0 solves this by introducing a hybrid flex system, that will fall back to javascript positioning for browsers or layouts that aren't compatible with flex.

The beginning of something new

Fomantic-UI is starting to mature and we are starting to push bigger and better updates, we hope you like the new Calendar and Range slider modules!

New Components

Calendar

Range Slider


FontAwesome 5.3.1

We have updated the icons to the newest FontAwesome release

Colored Loaders

More Inverted Components

In 2.5 we made a big push to add more support for inverted components

Comments

Comments

Matt
How artistic!
Elliot Fu

This has been very useful for my research. Thanks as well!

Jenny Hess
Elliot you are always so right :)
Joe Henderson
Dude, this is awesome. Thanks so much
Feed
Just now
Elliot Fu posted on his page
Hey there !
Elliot Fu added you as a friend
1 Hour Ago
Step
Shipping
Choose your shipping options
Billing
Enter billing information
Confirm Order
Verify order details
Cards
Matt Giampietro
Matthew is an interior designer living in New York.
Joined in 2013 75 Friends
Molly
Coworker
Molly is a personal assistant living in Paris.
Joined in 2011 35 Friends
Elyse
Elyse is a copywriter working in New York.
Joined in 2014 151 Friends

Horizontal Cards

Matt Giampietro
Matthew is an interior designer living in New York.
Molly
Coworker
Molly is a personal assistant living in Paris.

A new life

With active development slowing down the community has stood up to start a new life for Semantic, welcome to Fomantic-UI.

You can read the release notes here.

New Features

Inverted & basic Primary and Secondary buttons

You can now use primary and secondary basic and inverted buttons.

Tertiary buttons

New tertiary buttons allow for less important buttons

Primary & Secondary colors

Headers, Icons and Cards now all have primary and secondary colors

Primary Header
Secondary Header

Inverted dropdown variation

Dropdowns can now be inverted, they look sweet in inverted segments.

A New Approach

After an extended period of patches, Semantic UI 2.3 marks the return to significant feature changes for the project.

In upcoming Semantic releases we will be releasing more frequently, but with smaller changesets, to make it easier for users to upgrade and adjust to global changes.

New Features

Font Awesome 5.0 & Better Icon Searching

In 2.3 icons now include a full port of Font Awesome 5.0.6, including 929 icons.

Icon categories now match icon categories in Font Awesome's documentation, making it easier to find icons between docs.

Smile
Smile Outline
Hand Rock
Hand Paper
Hand Scissors

Semantic UI icon docs now includes a global icon search with easy copy and paste access to html

Global Font Weight Variables

Theming now uses two no global variables @bold and @normal making it easier to modify font weights in a more complex font stack

/* Use some custom font weights */ @bold: 600; @normal: 400;

Local Category Search

You can now use category search with the source option without having to add API callbacks

var categoryContent = [ { category: 'South America', title: 'Brazil' }, { category: 'South America', title: 'Peru' }, { category: 'North America', title: 'Canada' }, { category: 'Asia', title: 'South Korea' }, { category: 'Asia', title: 'Japan' }, { category: 'Asia', title: 'China' }, { category: 'Europe', title: 'Denmark' }, { category: 'Europe', title: 'England' }, { category: 'Europe', title: 'France' }, { category: 'Europe', title: 'Germany' }, { category: 'Africa', title: 'Ethiopia' }, { category: 'Africa', title: 'Nigeria' }, { category: 'Africa', title: 'Zimbabwe' }, ]; $('.local-category.example .ui.search') .search({ type: 'category', source: categoryContent, searchFields: [ 'title', 'category' ] }) ;

Arrow Aligment on Small Popups

Semantic popups now detects when horizontally aligning the popup on it's arrow is more reasonable than matching edges with a popup.

To use this feature be sure to specify movePopup: false in your settings
$('.centering.example .avatar.image').popup();

Popups Support Multiple Coordinate Systems

Popups now can correctly place elements with two different coordinate systems. These are typically caused by having a parent element with css properties transform or position.

Button is in here

Button

Popup is in here

Button is in here

Button

Popup is in here

/* Activating element is inside #one with different positioning context */ #one { display: block; position: relative; padding: 50px 100px; background-color: #F0F0F0; } /* Popup is inside two with position relative (creating another positioning context) */ #two { display: block; background-color: #E2EAE4; position: relative; top: 10px; padding: 50px 8px; }
$('.complex-popup.example .ui.button') .popup({ movePopup: false, popup: $('.complex-popup.example .popup') }) ;

New Matching Options

In addition, search now includes three tiers of matched results, similar to the options available in dropdown. Fuzzy results now are turned off by the new default fullTextSearch: 'exact'

Query matches the start of field exactly
Query matches any part of field
New
Query "fuzzy" matches field
$('.ui.search') .search({ fullTextSearch: 'exact' // only matches exact matches (no fuzzy matching) }) ;

By The Numbers

2.2 represents nearly a half year of updates, many new features, and bug patches.

40 new features
70 bug fixes

For the complete list of bugs, their accompanying issue threads and the fixes please consult the release notes

Release Notes

Project Changes

Critical Bug Fixes

2.2 brings many new bug fixes. For a complete list please check out our release notes. Here is a highlight of some critical bugs

View Critical Bug List
All UI - Using component('setting, {}) to add multiple settings as an object literal, for example error: {}, will now deep extend the existing object instead of replacing it.
API - beforeSend would not correctly cancel request when return false; is used in callback.
API - cache: 'local' would not return the localstorage cached results in some cases
Divider - Descenders like "g" are cut off in horizontal divider
Dropdown - forceSelection will now automatically select values with multi dropdowns. When using userAdditions setting it will now automatically tokenize the current entered value
Dropdown - search selection would not let you move back in an entered search string with left arrow
Dropdown - Fixed issue where value set using javascript DOM metadata would be cleared when a message or user addition triggered refresh
Form Validation / Dropdown - Using "enter" key in a search dropdown could cause a form to be submitted
Form Validation - Fix issue with some foreign email addresses with extended charsets causing email validation to fail
Form Validation - Revalidating a field on: blur could cause fields not yet interacted with to be validated
Form - Fixed issue with (x) fields and equal width fields where middle rows would be slightly smaller because they include both left and right padding in % width. (Edges only have one side padding). Field groups now use negative margins instead.
Popup - Fixed issue where clicking element inside popup removed from DOM (like clicking a multi select label) would cause popup to close
Rail - Fixed incorrect width for close rail and very close rail caused by variable addition with mixed units px + em
Search - Fixed bug where a previously XHR query could cause the next one to fail depending on the latency of the request.
Search - Fixed an issue where onResult returning false would not prevent the search menu from hiding. Clicking on an empty results message will also no longer close the search results.
Sticky/Visibility - Added mutation observer to teardown element with destroy if removed from DOM context, fixing a possible memory leak
Video - Fixed issue with .video('change') behavior not properly changing video.

New Features

CSS-Only Tooltips

2.2 includes CSS only popups that work without JS initialization using the data-tooltip property on any element. CSS tooltips even support inversion and specified positioning.

Top Left
Top Center
Top Right
Bottom Left
Bottom Center
Bottom Right
Right Center
Left Center
Top Left
Top Center
Top Right
Bottom Left
Bottom Center
Bottom Right
Right Center
Left Center

New Icons

2.2 of Semantic UI includes the latest version of Font Awesome with 50+ new icons. For a complete breakdown of new icons please check Font Awesome's list.

Wheelchair
American Sign Language (ASL) Interpreting
Assistive Listening Systems
Audio Description
Blind
Braille
Deafness
Low Vision
Sign Language
Universal Access
Volume Control Phone
View All Icons

Rapid-Ready Progress

Progress bars in 2.2 have been recoded to handle rapid update events.

Now developers can trigger updates at fast intervals without causing animations to stutter, or easing tweens to occur unnaturally.

Waiting for you to press button
Rapidly Update
$('.rapid.example .ui.button') .on('click', function() { var $progress = $('.rapid.example .ui.progress'), $button = $(this), updateEvent ; clearInterval(window.fakeProgress) $progress.progress('reset'); // updates every 10ms until complete window.fakeProgress = setInterval(function() { $progress.progress('increment'); $button.text( $progress.progress('get value') ); // stop incrementing when complete if($progress.progress('is complete')) { clearInterval(window.fakeProgress) } }, 10); }) ; $('.rapid.example .ui.progress') .progress({ duration : 200, total : 200, text : { active: '{value} of {total} done' } }) ;

Reduced Memory Leaks

Sticky, visibility, popup, and dropdown, modules that can attach events on initialization to window and body, for example to detect changes in window scroll, will now use additional mutation observers to determine if they are removed from the DOM and automatically fire their destroy behaviors.

This can prevent memory leaks when the parent element of a component is removed without the element is propertly teared down by calling its destroy behavior.

Simulate Memory Leak
Not Active
This segment has visibility events attached to modify the button above to say "active" when it is on screen
$('.memory.example .demo.segment') .visibility({ onOnScreen: function() { // this will no longer fire even though element was removed indirectly $('.memory.example .display.segment').html('This is active'); } }) ; // button will remove parent of visibility element and callback will stop firing automatically $('.memory.example .ui.button') .on('click', function() { $('.memory.example .display.segment').html('De-activated'); $('.memory.example .wrapper') .remove() ; }) ;

Dependent Form Validation

Form field validation can now specify a depends property which will only cause validation to occur only when another field, like a checkbox or input, is selected.

Submit
$('.depends.example .ui.form') .form({ onSuccess: function() { alert('No form problems'); return false; }, fields: { yearsPracticed: { identifier : 'yearsPracticed', depends : 'isDoctor', rules : [ { type : 'empty', prompt : 'Please enter the number of years you have been a doctor' } ] } } }) ;

Faster Dropdown Selection

We've updated dropdowns to make it simpler to breeze through forms with dropdowns, and provide more intuitive selection controls

Multiple select dropdowns use a new algorithm for line breaks based on actual rendered pixels and not estimated length based on glyph width calculations, meaning more choices can squeeze on a line than before.
Dropdowns now change selections on keyboards without hitting "enter", this lets users quickly navigate between dropdown elements in a form without having to hit "enter" before "tab" after each field entry, saving an additional keystroke.
All dropdown menus now support letter keyboard shortcuts. Hitting "C" for instance will let you jump to "California" in a dropdown list, then hitting it again "Colorado", even without using a search selection dropdown.

More Basic Buttons

We've added primary, secondary, positive and negative basic buttons

Popup Boundaries and Scroll Context

Popups now include a new setting boundary that let you specify that a popup should not escape the boundary of another section. This can be useful in complex paned layouts

Additionally popups can now specify a scroll context, to allow for scroll containers other than window to cause a clicked popup to hide on scroll.

$('.boundary.example .button') .popup({ boundary: '.boundary.example .segment' }) ;
Hover Me

Normally this popup would open in the default position top center but because this would escape the boundaries of the segment it will search other available positions until it can find one to place the popup while staying inside the segment

New Settings

We've added many new settings to components to help provide more granular control for some use-cases.

Dropdowns

selectOnKeydown Whether dropdown should change active selection on keyboard shortcuts, preventing the requirement of hitting enter to confirm selection before the user tabs out of the field. (This will save one extra keystroke)
allowReselection Setting to true will allow onChange to be triggered even when reselecting the same option
fullTextSearch Setting to true will allow search across any part of string, setting to exact will disable fuzzy matching for dropdowns.
hideAdditions Setting to true will allow custom user additions without triggering a special dropdown message for "Add custom choice". This is now enabled by default
minCharacters Minimum characters required to begin showing filtered results
Dropdown settings

Popup

boundary A selector, or DOM element that the popup should never escape when positioning itself
scrollContext A selector or DOM element which should be used for determining if user has scrolled.
observeChanges Whether popup should automatically watch for its own removal from page to avoid memory leaks.
Popup settings

Search

selectFirstResult Whether the first search result element should be selected after results appear.
showNoResults Whether a message should appear when no search results are returned
Search settings

Rating

fireOnInit Whether the rating component should fire callbacks on initialization.
Rating settings

Visibility

zIndex Allows you to specify the z-index used with type: 'fixed'
onFixed A callback used with type: 'fixed' to occur when content is fixed to the page.
onUnfixed A callback used with type: 'fixed' to occur when content is fixed to the page.
onLoaded A callback used with type: 'image' to occur when content is loaded.
onAllLoaded A callback used with type: 'image' to occur when all images initialized together are loaded.
Visibility settings

Tab

cacheType When set to html will cache the tabs html after load, reloading with the exact same html. Setting to response will cache the serve response, allowing for load events to fire with same contents.
deactivate When set to siblings deactivates only DOM elements that are siblings of the selected tab activator. all will deactivate all other elements initialized at the same time.
Tab settings

Shape

width When set to next will use the size of the next side during the shape's animation. When set to initial it will use the size of the shape at initialization. When set to a specifix pixel width, will force the size to that width.
height When set to next will use the size of the next side during the shape's animation. When set to initial it will use the size of the shape at initialization. When set to a specifix pixel height, will force the size to that height.
Shape settings

The Tally

2.1 sums up around two months of work, including many new features, and updates to help bulletproof existing UI.

70 bug fixes
23 new UI updates
14 feature enhancements

To see the complete list of updates review our release notes

Labeled Buttons

Labeled buttons are a useful design pattern for displaying a tally alongside a button.

Labeled buttons are compatible with any label type, but looks great alongside a basic label.

Like
2,048
Forks
1,048
Hospitals
2,048
Star
1,048
2,048
Like

Basic Labels

We've added a new style basic label that is less intrusive, and compatible with all other label variations, reducing their complexity.

Basic Pointing Elliot Red Pointing Blue

Multiple Input Labels

Labeled input now supports labels on both sides of content at the same time.

$
.00

More Tabular Directions

Tabular menus now support right and bottom positioning.

This is an stretched grid column. This segment will always match the tab height
This is an stretched grid column. This segment will always match the tab height

Enhanced Vertical Dividers

Grids now support using multiple vertical dividers per column, in any specified arrangement.

and
and
not
nor

Inverted Colored Menu

Inverted menus now support individual item colors

Reversable Grid Columns

Grids now support reversing their column flow per-device. This can be useful when a column should appear on the opposite side of the screen on smaller screens.

Reversing grids are also designed to be compatible with column-order specific variations like divided or celled

Computer First
Tablet Fourth
Computer Second
Tablet Third
Computer Third
Tablet Second
Computer Fourth
Tablet First

Stackable Cards

Cards have a stackable variation so that they appear full width on mobile.

14h
Elliot
17 likes 3 comments
14h
Elliot
17 likes 3 comments
14h
Elliot
17 likes 3 comments
14h
Elliot
17 likes 3 comments

Fixed Tables

Tables now include a variation for using table-layout: fixed, which does not adjust column widths based on size.

This can help present data more cleanly with content that is uniformly formatted.

Fixed tables also support content collapsing using text-overflow: ellipsis when used with single line.

Name Status Gender
John Approved Male
Jamie Approved Male
Jill Denied Female

Fixed Tables

Name Status Description
John Approved This is much too long to fit I'm sorry about that
Jamie Approved Shorter description
Jill Denied Shorter description

New Behaviors

Fully Customizable JSON

In 2.1 all component that uses remote data will let you specify a fields array to modify expected JSON property names, saving you the trouble of specifying an onResponse callback to modify the data structure.

$('.ui.search') .search({ apiSettings: { url: '//api.github.com/search/repositories?q={query}' }, fields: { results : 'items', title : 'name', url : 'html_url' } }) ;

Fields can also be used with local search to simplify working with unusual search sources.

$('.ui.search') .search({ searchFields: ['pickle'], fields: { title : 'mustard' }, source: [ { mustard: 'Title #1', pickle: 'thing' }, { mustard: 'Title #2', pickle: 'another thing' }, { mustard: 'Title #3', pickle: 'thing 100' } ] }) ;

Credit Card Validation

We've added new validation rules for payment. These work with luhn and non-luhn card numbers. If you only accept a certain set of credit cards you can specify that too.

Try 4565340519181845 a test visa card number
Submit
$('.payment.example form') .form({ on: 'blur', inline: true, fields: { card: { identifier : 'card', rules: [ { type : 'creditCard', prompt : 'Please enter a valid credit card' } ] }, exactCard: { identifier : 'exact-card', rules: [ { type : 'creditCard[visa,amex]', prompt : 'Please enter a visa or amex card' } ] } } }) ;

Cancellable Checkboxes

Checkboxes now include four new callbacks beforeChecked, beforeUnchecked, beforeDeterminate, and beforeIndeterminate, returning false from these callbacks will cancel the action from occuring.

$('.cancel.example .ui.checkbox') .checkbox({ beforeChecked: function() { var luckyPerson = (Math.random() < 0.5) ; return luckyPerson; } }) ;

Theme Updates

Global Form Focus

Global variables have been added to modify form focus color across all components. The default theme now uses a light blue to signal selection.

Updated Form Validation

Form validation now uses basic label for validation prompts.

Colored Basic Buttons

Basic colored buttons now are colored without hover, making the style more similar to common usage on most sites.

Labeled Icon Menu

Horizontal labeled icon menu now use stacked icons to appear more in-tune with common icon menu usage.

Dimmer Message
Dimmer sub-header