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
A dimmable element can blur its contents
Alignment
Vertical Alignment
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
Dimmer Shades
A dimmer can be formatted to have a different depth of background shading using the additional classes medium, light or very light
Partially Dimmer
A dimmer can be displayed only partially and limited to the overall height of its content instead of the whole to be covered area. This can be used for example as a caption on any element by using top dimmer, center dimmer or bottom dimmer
Look!
ui top dimmer
Look!
ui center dimmer
Look!
ui bottom dimmer
$('.partially.example .dimmer')
.dimmer({
transition: 'fade up',
on: 'hover'
})
;
Look!
ui bottom dimmer
Look!
ui center dimmer
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
You can customize a loader in a dimmer via javascript
$('.dimmerloader.example .image')
.dimmer({
displayLoader: true,
loaderVariation: 'slow orange medium elastic',
loaderText: 'Wait a second, please...'
})
.dimmer('show')
;
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 |
| destroy | Destroys instance and removes all events |
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. |
| transition | fade | Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
Alternatively you can provide an object to set individual values for hide/show transitions as well as hide/show duration
{
showMethod : 'fade',
showDuration : 200,
hideMethod : 'zoom',
hideDuration : 500,
}
|
| 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. Will be ignored completely when individual hide/show duration values are provided via the transition setting |
| displayLoader | false | Whether a custom loader should be generated inside the dimmer |
| loaderVariation | '' | Additional css classes to style the loader. See Loader |
| loaderText | false | If a string is given, it will be shown underneath the loader animation icon |
Callbacks
| Context | Description | |
|---|---|---|
| onShow | dimmable | Callback before dimmer is shown. Returning false from this callback will cancel the dimmer from showing. |
| onHide | dimmable | Callback before dimmer is hidden. Returning false from this callback will cancel the dimmer from hiding. |
| onChange | dimmable | Callback on element show or hide |
| onVisible | dimmable | Callback on element when dimmer is fully shown |
| onHidden | dimmable | Callback on element when dimmer is fully hidden |
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 | false | Provides ancillary debug output to console |
| errors |
error : {
method : 'The method you called is not defined.'
}
|
Error messages displayed to console |