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

sidebar

v0.86.0arrow_drop_down
v0.86.0
v0.85.0
v0.84.0
STATUS
Passing
DOWNLOADS
642
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
8 months ago
SIZE
73 KB
Called before a sidebar begins to animate out.
1 contributor
Use sidebar in your project ?
Copied
npm i @bit/semantic-org.semantic-ui-react.sidebar
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
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
chevron_left
chevron_right

Called before a sidebar begins to animate out.

Called after a sidebar has finished animating out.

Called when a sidebar has finished animating in.

Called when a sidebar begins animating in.

Sidebar ()

A sidebar hides additional content beside a page.

SidebarPushable ()

A pushable sub-component for Sidebar.

SidebarPusher ()

A pushable sub-component for Sidebar.

Properties
NameTypeDefault valueDescription
as
custom

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

animation
'overlay' | 'push' | 'scale down' | 'uncover' | 'slide out' | 'slide along'

Animation style.

children
node

Primary content.

className
string

Additional classes.

content
custom

Shorthand for primary content.

direction
'top' | 'right' | 'bottom' | 'left''left'

Direction the sidebar should appear on.

onHide
function

React’s original SyntheticEvent.

onHidden
function
onShow
function
onVisible
function
target
custom | custom

A sidebar can handle clicks on the passed element.

visible
bool

Controls whether or not the sidebar is visible on the page.

width
'very thin' | 'thin' | 'wide' | 'very wide'

Sidebar width.

as
custom

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

children
node

Primary content.

className
string

Additional classes.

content
custom

Shorthand for primary content.

as
custom

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

children
node

Primary content.

className
string

Additional classes.

content
custom

Shorthand for primary content.

dimmed
bool

Controls whether or not the dim is displayed.