We promise to not show more than one small ad per page. Dont worry, hiding this message will make sure you won't get nagged again.
Types
Dimmer
A simple dimmer displays no content
// left button $('.segment').dimmer('show'); // right button $('.segment').dimmer('hide');
Overlayable Section
Overlayable Section
Content Dimmer
A dimmer can display content
Overlayable Section
Dimmed Message!
Page Dimmer
A dimmer can be formatted to be fixed to the page
Hello
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
Title
Dimmer
Simple Dimmer
A dimmer can be controlled without Javascript
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
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:
$('.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 |