## 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 or Wix 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> ``` ## 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">
    ; ``` ### 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(option.id)} selectedId={selectedOption} />
    Monday Tuesday Wednesday Thursday Friday Saturday Sunday
    }> 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
    ); }; ``` ### 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, }, { render: () => ( ), }, ]; const openPanel = () => { setRight(0); }; const closePanel = () => { setRight(-440); }; return (
    8 contacts
    ); }; ``` ### Composer actions - description:

    Use side panels to display composer settings and actions. These should be anchored to the left edge of the screen since they're opened through the .

    - example: ```jsx () => { const [selectedSidebar, setSelectedSidebar] = React.useState(0); const [activeTab, setActiveTab] = React.useState(0); const [toggleImage, setToggleImage] = React.useState(true); const [togglePosts, setTogglePosts] = React.useState(false); const [toggleCommenting, setToggleCommenting] = React.useState(false); const [descriptionValue, setDescriptionValue] = React.useState(''); const [authorTags, setAuthorTags] = React.useState([]); const [categories, setCategories] = React.useState([ { id: 0, label: 'Other posts', isChecked: false, }, { id: 1, label: 'Recipes', isChecked: false, }, { id: 2, label: 'Lifestyle', isChecked: false, }, ]); const [publishDate, setPublishDate] = React.useState(); const [themeTags, setThemeTags] = React.useState([ { id: '1', label: 'Sport' }, { id: '2', label: 'Routine' }, ]); const [author, setAuthor] = React.useState(); const items = [ { id: 0, label: 'Settings', icon: , }, { id: 1, label: 'Categories', icon: , }, { id: 2, label: 'Tags', icon: , }, ]; const handleSelectTag = (tag, previousTags, setTags) => setTags([...previousTags, { id: tag.id, label: tag.value }]); const handleRemoveTag = (tag, previousTags, setTags) => setTags(previousTags.filter(currTag => currTag.id !== tag)); const handleSidebarClick = id => { setSelectedSidebar(id); }; const handleCloseSidePanel = () => { setSelectedSidebar(); }; const renderSettingsPanel = () => ( setActiveTab(value.id)} /> ); const renderTagPanel = () => ( ); const renderCategoryPanel = () => { return ( ); }; return ( handleSidebarClick(id)} /> {selectedSidebar === 0 && renderSettingsPanel()} {selectedSidebar === 1 && renderCategoryPanel()} {selectedSidebar === 2 && renderTagPanel()} ); }; ```