dimmer

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

Vue

Angular

React Native

Add dependency...

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

modifieddraft

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

Name	Type	Description
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.