New in 2.4 | Semantic UI

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.

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

Simulate Loading

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.

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

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.

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.

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

Semantic UI 2.3 includes a rewrite of modal to include non-js flexbox positioning for vertical centering. No longer will you have to call $('.ui.modal').modal('refresh') if content height changes to recenter.

In addition there's a new setting centered: false which makes it easier to do top aligned modals when the internal may be dynamic and you dont want content to shift vertically.

Open Top Aligned Modal

$('.ui.special.modal') .modal({ centered: false }) .modal('attach events', '.modal.example .button') ;

Transition now includes zoom and glow. Glow is useful for highlighting elements on page,

$('.autumn.leaf') .transition('zoom') ;

$('.autumn.leaf') .transition('glow') ;

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;

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' ] }) ;

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();

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'

$('.ui.search') .search({ fullTextSearch: 'exact' // only matches exact matches (no fuzzy matching) }) ;

40 new features

70 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

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

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.

View All Icons

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.

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' } }) ;

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

$('.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() ; }) ;

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.

$('.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' } ] } } }) ;

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

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

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' }) ;

Dropdown settings

Popup settings

Search settings

Rating settings

Visibility settings

Tab settings

Shape settings

70 bug fixes

23 new UI updates

14 feature enhancements

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.

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

Tabular menus now support right and bottom positioning.

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

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

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

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

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.

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' } ] }) ;

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

$('.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' } ] } } }) ;

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

Maybe this will work

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

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

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

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

2.0 brings a whopping set of changes to the project:

There's just too much to cover in one page, but we've tried our best to give you examples of some of the new features available in 2.0

To see the full list of what's changed check out the project's release notes.

View Release Notes

Flexbox allows for elements to intuitively resize to fill available space, making many complex layouts much simpler.

13 components: Form, Grid, Menu, Message, Button, Segment, Step, Dropdown, Modal, Feed, Statistic, Card, Item now use flex for positioning.

All components have received a face-lift for 2.0. Styles give slightly more negative space and a few idiosyncratic design touches have been removed.

EM sizing has been improved in 2.0, with all values rounding to exact pixel values. This helps common relative sizing pitfalls like rounding errors in vertical alignment.

Em variables now use new globally calculated em ratios, like @relative4px, to express pixel values in terms of root em size. This makes sure components don't include confusing decimal or fractional values when dealing with sizing.

Grids in 2.0 now use flexbox so columns are always equal height across rows.

The new equal width variation adjusts column widths automatically splitting available width between columns.

If a column has a specified width, other columns will adapt to take available space around it.

Containers have been added as a simple way to limit content width.

The new stretched variation makes vertically aligning layouts much simpler. Columns will not only match heights, but stretch their contents to match heights.

Multiple select dropdowns are now available, and can generate automatically from standard HTML selects.

Dropdowns now all support advanced keyboard shortcuts like pagedown, delete, shift+left ctrl+click, and selection using first letter of item.

Additionally dropdowns will now automatically open upward if there is not enough space available in the viewport below a dropdown.

All dropdowns, single and multiple now support user tagging. Values can be automatically separated by a delimiter and placed in a hidden input, or extend an existing select element.

$('.ui.dropdown') .dropdown({ allowAdditions: true }) ;

All dropdowns now support loading remote data. Selected name value pairs retrieved remotely are stored in sessionStorage so that selected values are repopulated correctly even after a page refresh.

// somewhere in app $.api.settings.api = { queryTags: '//api.semantic-ui.com/tags/{query}' }; $('.ui.dropdown') .dropdown({ apiSettings: { action: 'queryTags' } }) ;

Scrolling menu and nested menus are now supported.

Listing choices in a nested menu will still give all the same keyboard shortcuts and filtering as regular menus.

Dropdowns now support advanced shortcuts like page down and page up, scrolling to selection on first letter press, i.e. "N" for New York, shift+left/right for group selection, and ctrl+click for modifying groups.

Dropdowns support many, many new features, including:

• Maximum selection count is supported for multiple selects
• Mutation observers will now watch for changes in menus or the elements they are generated from and will update choices automatically
• Custom templated error messages are now supported with dropdowns

API now supports sessionStorage caching. This setting makes repeated requests to a URL return results instantly across a user's session, drastically improving performance for components like search.

Try refreshing the page and searching the same letter, results will appear instantly without a server roundtrip.

$('.ui.dropdown') .dropdown({ apiSettings: { cache : 'local', url: '//api.semantic-ui.com/tags/{query}' } }) ;

API now lets you adjust a server's JSON response using a new callback, onResponse. This can let you restructure third party APIs to match your local data requirements.

$('.ui.search') .search({ type : 'category', minCharacters : 3, apiSettings : { onResponse: function(githubResponse) { var response = { results : {} } ; // translate GitHub API response to work with search $.each(githubResponse.items, function(index, item) { var language = item.language || 'Unknown', maxResults = 8 ; if(index >= maxResults) { return false; } // create new language category if(response.results[language] === undefined) { response.results[language] = { name : language, results : [] }; } // add result to category response.results[language].results.push({ title : item.name, description : item.description, url : item.html_url }); }); return response; }, url: '//api.github.com/search/repositories?q={query}' } })

API now supports mocked responses, letting you specify how responses are returned in advance.

$('.toggle.button') .api({ // lets pretend this took a while loadingDuration: 500, // lets treat this button as requesting this JSON mockResponse: { success: true } }) // successful responses will trigger a text state change .state({ text: { inactive : 'Off', active : 'On' } }) ;

Off

API can now use custom asynchronous callbacks for resolving API requests, this can let you use other custom XHR backends, or local data to resolve requests.

$('.toggle.button') .api({ // lets wait a half second then try your luck mockResponseAsync: function(settings, callback) { var luckyPerson = (Math.random() < 0.5), response = (luckyPerson) ? { success: true } : { success: false, message: 'You are not lucky' } ; // simulate this is an async task setTimeout(function() { callback(response); }, 500); }, successTest: function(response) { return response && response.success; }, onFailure: function (response) { alert(response.message); } }) .state({ text: { inactive : 'Off', active : 'On' } }) ;

Off

Form now include custom styling for browser autocompleted form fields. Autocompleted fields can also specify focused autocomplete, and errored autocomplete styles.

Dimmers now include blurring dimmer variations.

Other component can use blurring dimmers to add overlay content, modal also includes a blurring setting that affects its generated dimmer.

Checkboxes now support an indeterminate state. This is useful when a collection of checkboxes may be partially selected.

Horizontal groups are now available for segment.

Groups now use flexbox and fully support nesting.

Groups now support types like raised, stacked, or piled

Menus have been completely rewritten to use flexbox. Items inside a menu will automatically adjust to align with other menu items regardless of size.

Menus now include a new vertical tabular menu type.

Menus now have better coupling with other components like dropdown, search, button, and input.

$('.ui.menu .browse.item') .popup({ popup : '.classes.popup', hoverable : true, position : 'bottom left', delay : { show: 300, hide: 800 } }) ;

$('.ui.search') .search({ type: 'category', apiSettings: { action: 'categorySearch' } }) ;

Visibility APIs now include useful shortcuts for sticky content. A placeholder will automatically be added when an element is passed making sure other content does not shift position.

Additionally visibility and sticky have been rewritten to use a pub/sub pattern which is much more performant than 1.0

$('.overlay') .visibility({ type : 'fixed', offset : 15 // give some space from top of screen }) ;

.overlay { background-color: #FFFFFF; padding: 0.5em; box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); transition: all 0.5s ease; background: transparent; } /* change style */ .fixed.overlay { position: fixed; padding: 1em; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }