Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

dimmer

v0.88.2arrow_drop_down
v0.88.2
v0.86.0
v0.85.0
v0.84.0
STATUS
Passing
DOWNLOADS
13,864
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
3 months ago
SIZE
79 KB
A dimmer hides distractions to focus attention on particular content.
1 contributor
Install dimmer as a package?
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
React
React
Vue
Angular
React Native
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';
toggle layout
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
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
elementType

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
elementType

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.