We’re excited to announce Bit’s new home at bit.dev!Learn more

dimmer

v0.86.0arrow_drop_down
v0.86.0
v0.85.0
v0.84.0
STATUS
Passing
DOWNLOADS
8,731
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
A month ago
subject
A dimmer hides distractions to focus attention on particular content.
1 contributor
Like
Use dimmer in your project ?
Copied
npm i @bit/semantic-org.semantic-ui-react.dimmer
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
modified
modified
modified
modified
modified
modified
modified
modified
modified
modified
modified
modified
chevron_left
chevron_right
Dimmer ()

A dimmer hides distractions to focus attention on particular content.

DimmerDimmable ()

A dimmable sub-component for Dimmer.

Called when the dimmer is clicked.

Handles click outside Dimmer’s content, but inside Dimmer area.

DimmerInner ()

An inner element for a Dimmer.

Properties
NameTypeDescription
active
bool

An active dimmer will dim its parent container.

page
bool

A dimmer can be formatted to be fixed to the page.

as
custom

An element type to render as (string or function).

blurring
bool

A dimmable element can blur its contents.

children
node

Primary content.

className
string

Additional classes.

content
custom

Shorthand for primary content.

dimmed
bool

Controls whether or not the dim is displayed.

as
custom

An element type to render as (string or function).

active
bool

An active dimmer will dim its parent container.

children
node

Primary content.

className
string

Additional classes.

content
custom

Shorthand for primary content.

disabled
bool

A disabled dimmer cannot be activated

onClick
function

React’s original SyntheticEvent.

onClickOutside
function

React’s original SyntheticEvent.

inverted
bool

A dimmer can be formatted to have its colors inverted.

page
bool

A dimmer can be formatted to be fixed to the page.

simple
bool

A dimmer can be controlled with simple prop.

verticalAlign
'bottom' | 'top'

A dimmer can have its content top or bottom aligned.