--- layout : 'default' css : '' title : 'Dimmer' description : "Dimmers hide distractions to focus user's attention on particular content" type : 'UI Module' ---

You're all signed up for the weekly dog tips newsletter!
Your first edition will be sent on January 22

<%- @partial('header', { tabs: 'module' }) %>

Types

Content Dimmer

A dimmer can display content

Content must be included inside .content .center to display centered correctly in the modal.

Dog Photos

Your poodle photo uploaded successfully!

Your poodle photo uploaded successfully!

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

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.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Inverted Dimmer

A dimmer can be formatted to have its colors inverted

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Dimmer Events

A dimmer can trigger a visibility change on an event

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

Puppy

Vote
View
Vote
View

Loaders inside Dimmers

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

Loading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

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.

$('h3') .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:

$('.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
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 dimmer Whether current element is a dimmer
is dimmable Whether current element is a dimmable section
is active Whether section's dimmer is active
is animating Whether dimmer is animating
is page Whether dimmable section is body
is enabled Whether dimmer is not disabled
is disabled Whether dimmer is disabled
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 Settings
Dimmer settings modify its behavior

Setting Default Description
closable true Whether clicking on the dimmer should close it automatically
on false Can be set to hover or click to show/hide dimmer on dimmable event
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
Callbacks specify a function to occur after a specific behavior.

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

Templates
Templates are used to generate DOM elements

Generates Default
dimmer
function() { return $('
').attr('class', 'ui dimmer'); }

DOM Settings
DOM settings specify how this module should interface with the DOM

Setting Default Description
namespace dimmer Event namespace. Makes sure module teardown does not effect other events attached to an element.
selector
selector: { dimmable : '.ui.dimmable', dimmer : '.ui.dimmer', content : '.ui.dimmer > .content, .ui.dimmer > .content > .center' }
Object containing selectors used by module.
className
className : { active : 'active', dimmable : 'ui dimmable', dimmed : 'dimmed', disabled : 'disabled', pageDimmer : 'page', hide : 'hide', show : 'show', transition : 'transition' }
Class names used to attach style to state

Debug Settings
Debug settings controls debug output to the console

Setting Default Description
name Dimmer Name used in debug logs
debug True 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.' }