## Feature Examples
### Structure
- description: Side panels are composed of up to four compound components: - `` - `` - `` - `` All of these components are optional.
- example:
```jsx
{}}>
Content
Footer
;
```
### Skin
- description: Control the component style with `skin` prop: - `standard` is the default style used in all common cases. - `floating` is used for settings panels that float on top of content in editor platforms ([Wix](https://www.wix.com/) or [Wix Studio](https://www.wix.com/studio)).
- example:
```jsx
{}}>
{}} skin="floating" width="288px">
;
```
### Width
- description: Set the side panel's width using the `width` property. The default width is 420px.
- example:
```jsx
{}} width="300px">
{}} width="600px">
;
```
### Height
- description: By default, panel height depends on the amount of content it contains. To define the maximum height it can grow to use `maxHeight` property. Fix the panel height to a specific number with `height` property.
- example:
```jsx
{}} maxHeight="480px">
{}} height="480px">
;
```
### Padding
- description: Content padding is enabled in the side panel by default, but can be disabled with the `noPadding` property for: - `` - `` - `` The padding can be removed to display lists or other components with built-in padding.
- example:
```jsx
{}}>
{}}>
;
```
### Dividers
- description: Dividers are enabled in the side panel by default but can be disabled using the `showDivider` property for: - `` - `` Always show dividers in the side panel if users have the option to scroll vertically inside the panel.
- example:
```jsx
{}}>
{}}>
;
```
### Header
- description: Customize the side panel's header using these properties: - `title` - `subtitle`
- example:
```jsx
{}}>
{}}>
;
```
### Header Actions
- description: Header has these properties for actions available: - `infoTooltipContent` - provides additional details or an explanation in a tooltip - `onHelpButtonClick`- allows users to access help articles and contextual information - `onBackButtonClick`- allows users to navigate back in the Side Panel - `backButtonDescription` - sets content of the back button's tooltip
- example:
```jsx
{}}>
{}} onHelpButtonClick={() => {}}>
{}}
onBackButtonClick={() => {}}
backButtonDescription="Back"
>
;
```
### Custom header
- description: Create a custom header layout by adding children elements to the `` container.
- example:
```jsx
{}}>
{}}>
{}}>
;
```
### Text overflow
- description: Panel title and subtitle wraps to multiple lines by default. Limit the amount of lines using `ellipsis` and `maxLines` properties. Ellipsis do not apply to the subtitle, as its main purpose is to provide more information.
- example:
```jsx
{}}>
{}}>
;
```
### Content sections
- description: Create sections inside of a panel by adding multiple `` areas. Separate them from one another with a dedicated `` element.
- example:
```jsx
{}}>
;
```
### Content fields
- description: Separate controls inside of a panel from one another by wrapping each one into `` container.
- example:
```jsx
{}}>
{}} skin="floating" width="288px">
;
```
### Custom footer
- description: To display confirmation or close actions use the `` container.
- example:
```jsx
;
```
### Draggable
- description: Let users know that panel position on the screen can be changed by changing the mouse cursor to grab with `draggable` property. The behaviour itself has to be developed separately.
- example:
```jsx
{}}
skin="floating"
width="288px"
draggable
>
;
```
## Mobile Examples
### Mobile usage
- description: Keep `` as the layout of the panel and change only its container per screen. On desktop the panel slides in over the page from an absolutely positioned wrapper, as in the common use cases above. On mobile the same panel renders inside a bottom `` that is non-modal and has no backdrop, so the page behind it stays visible and usable while users adjust settings. The panel takes the height of its content, capped by `maxHeight`, so the footer actions are always in view and longer content scrolls inside ``. Set `dismissible` and `resizable` to `false` so a tap on the page does not close the panel and there is no drag handle. Closing goes through the panel's close button and footer actions on both screens. _To see the change, toggle 'Enable mobile support' in the top bar of Storybook._
- example:
```jsx
() => {
const { mobile } = React.useContext(WixDesignSystemContext);
const [isOpen, setIsOpen] = React.useState(false);
const [text, setText] = React.useState('Luna Boutique');
const [alignment, setAlignment] = React.useState(1);
const [bold, setBold] = React.useState(true);
const alignments = [
{ id: 0, value: 'Left' },
{ id: 1, value: 'Center' },
{ id: 2, value: 'Right' },
];
const close = () => setIsOpen(false);
const panel = (
setText(e.target.value)} />
setAlignment(Number(option.id))}
/>
setBold(!bold)} />
);
return (
{text}
{mobile ? (
{panel}
) : (
{panel}
)}
);
};
```
## Common Use Case Examples
### Settings panel
- description: Use side panel to create settings panels that allow users to control the design and behavior aspects of their app.
- example:
```jsx
{}} skin="floating" width="288px">
}
>
Choose a link
;
```
### Group content in settings panels
- description: Use `` wrapper to organize panel info into categories. It will make the whole panel easier to scan.
- example:
```jsx
() => {
const [selectedOption, setSelectedOption] = React.useState(0);
const options = [
{ id: 0, value: 'Monday' },
{ id: 1, value: 'Sunday' },
];
return (
{}}
>
setSelectedOption(Number(option.id))}
selectedId={selectedOption}
/>
}>
Add Available Dates
}>
Add Unavailable Dates
);
};
```
### Data filter
- description: Use side panels to display data filters. When opened, the panels should slide in from the right side of the screen. Add close buttons in the header and/or footer that can be used to close the panel.
- example:
```jsx
() => {
const [right, setRight] = React.useState(-440);
const [records, setRecords] = React.useState([
{
image: ,
},
{
image: ,
},
{
image: ,
},
{
image: ,
},
{
image: ,
},
{
image: ,
},
{
image: ,
},
]);
const columns = [
{
title: '',
render: (row) => row.image,
},
];
const openPanel = () => {
setRight(0);
};
const closePanel = () => {
setRight(-440);
};
return (
7 products
}
onClick={openPanel}
>
Filter
);
};
```
### Quick view
- description: Use side panels to provide quick views of list items. Panels can either push the page content aside or overlay it, depending on the use case: - Overlay content when part of the page's content can be covered. - Push content aside when the user should see all the information and actions on the main page.
- example:
```jsx
() => {
const [right, setRight] = React.useState(-440);
const [records, setRecords] = React.useState([
{
image: ,
},
{
image: ,
},
{
image: ,
},
{
image: ,
},
{
image: ,
},
{
image: ,
},
{
image: ,
},
{
image: ,
},
]);
const columns = [
{
title: '',
render: (row) => row.image,
},
{
title: '',
render: () => (
{},
}}
/>
),
},
];
const openPanel = () => {
setRight(0);
};
const closePanel = () => {
setRight(-440);
};
return (