Menu

Dimmer
A dimmer hides distractions to focus attention on particular content

Download

Types

Dimmer

A simple dimmer displays no content

// left button $('.segment').dimmer('show'); // right button $('.segment').dimmer('hide');
A dimmer will automatically be created when a dimming behavior is triggered on an element.

Overlayable Section

Overlayable Section

Content Dimmer

A dimmer can display content

Since
2.3
dimmers with content now only need a single wrapping content container.

Overlayable Section

Dimmed Message!

Page Dimmer

A dimmer can be formatted to be fixed to the page

Hello
Show

States

Active

An active dimmer will dim its parent container

Disabled

A disabled dimmer cannot be activated

Variations

Dimmable

Blurring New in 2.0

A dimmable element can blur its contents

Alignment

Vertical Alignment New in 2.3

A dimmer can have its content top or bottom aligned.

Title

Add
View

Title

Add
View

Dimmer

Simple Dimmer

A dimmer can be controlled without Javascript

Having any parent element receive the class ui dimmable dimmed will trigger the dimmer to display.

Inverted Dimmer

A dimmer can be formatted to have its colors inverted

Examples

Dimmer Events

A dimmer can trigger a visibility change on an event

$('.event.example .image') .dimmer({ on: 'hover' }) ;

Title

Add
View
Add
View

Loaders inside Dimmers

Any loader inside a dimmer will automatically use an appropriate color to match

Loading

Usage

Display

You can display a dimmer by either invoking .dimmer('show') on a section or a dimmer itself. If you choose to dim a dimmable section, a dimmer will automatically be created.

// these two are the same $('.ui.dimmable') .dimmer('show') ; $('.ui.dimmable .dimmer') .dimmer('show') ;

Creating Dimmers

If a dimmer does not exist inside the element it will be created on first use.

$('h4') .dimmer('toggle') ;

Showing a Specific Dimmer

If a dimmer is already inside an element, you can call behavior on the dimmable section or the dimmer itself.

// If a dimmer exists on a page, you can make it appear by calling it directly $('.page.dimmer:first') .dimmer('toggle') ;

Behavior

All the following behaviors can be called using the syntax:

Behaviors must be called on the same content which you originally initialize the dimmer, whether it is the dimmable context, or the ui dimmer
$('.your.element') .dimmer('behavior name', argumentOne, argumentTwo) ;
Behavior Description
add content (element) Detaches a given element from DOM and reattaches element inside dimmer
show Shows dimmer
hide Hides dimmer
toggle Toggles current dimmer visibility
set opacity(opacity) Changes dimmer opacity
create Creates a new dimmer in dimmable context
get duration Returns current duration for show or hide event depending on current visibility
get dimmer Returns DOM element for dimmer
has dimmer Returns whether current dimmable has a dimmer
is active Whether section's dimmer is active
is animating Whether dimmer is animating
is dimmer Whether current element is a dimmer
is dimmable Whether current element is a dimmable section
is disabled Whether dimmer is disabled
is enabled Whether dimmer is not disabled
is page Whether dimmable section is body
is page dimmer Whether dimmer is a page dimmer
set active Sets page dimmer to active
set dimmable Sets an element as a dimmable section
set dimmed Sets a dimmable section as dimmed
set page dimmer Sets current dimmer as a page dimmer
set disabled Sets a dimmer as disabled

Dimmer

Behavior

Default Description
useFlex true Whether dimmers should use flex or legacy positioning
variation false Specify a variation to add when generating dimmer, like inverted
dimmerName false If initializing a dimmer on a dimmable context, you can use dimmerName to distinguish between multiple dimmers in that context.
closable auto Whether clicking on the dimmer should hide the dimmer (Defaults to auto, closable only when settings.on is not hover
on false Can be set to hover or click to show/hide dimmer on dimmable event
useCSS true Whether to dim dimmers using CSS transitions.
duration
duration : { show : 500, hide : 500 }
Animation duration of dimming. If an integer is used, that value will apply to both show and hide animations.
transition Fade Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions

Callbacks

Context Description
onShow dimmable Callback on element show
onHide dimmable Callback on element hide
onChange dimmable Callback on element show or hide

Module

These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.

Default Description
namespace dimmer Event namespace. Makes sure module teardown does not effect other events attached to an element.
selector
selector: { dimmable : '.dimmable', dimmer : '.ui.dimmer', content : '.ui.dimmer > .content, .ui.dimmer > .content > .center' }
Object containing selectors used by module.
template
template : { dimmer: function() { return $('
').attr('class', 'ui dimmer'); } }
Templates used to generate dimmer content
className
className : { active : 'active', dimmable : 'dimmable', dimmed : 'dimmed', disabled : 'disabled', pageDimmer : 'page', hide : 'hide', show : 'show', transition : 'transition' }
Class names used to attach style to state
name Dimmer Name used in debug logs
silent False Silences all console output including error messages, regardless of other debug settings.
debug False Provides standard debug output to console
performance True Provides standard debug output to console
verbose True Provides ancillary debug output to console
errors
error : { method : 'The method you called is not defined.' }
Error messages displayed to console

Dimmer Message
Dimmer sub-header