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
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 |