diff --git a/docs/components/split-panel.md b/docs/components/split-panel.md index e9e08931..8116d8d2 100644 --- a/docs/components/split-panel.md +++ b/docs/components/split-panel.md @@ -15,6 +15,33 @@ Split panels display two adjacent panels, allowing the user to reposition them. ``` +```jsx react +import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ( + +
+ Start +
+
+ End +
+ +); +``` + ## Examples ### Initial Position @@ -32,6 +59,39 @@ To set the initial position in pixels, use the `position` attribute. If you need ``` +```jsx react +import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ( + +
+ Start +
+
+ End +
+ +); +``` + ### Vertical Add the `vertical` attribute to render the split panel in a vertical orientation where the start and end panels are stacked. You also need to set a height when using the vertical orientation. @@ -47,6 +107,39 @@ Add the `vertical` attribute to render the split panel in a vertical orientation ``` +```jsx react +import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ( + +
+ Start +
+
+ End +
+ +); +``` + ### Snapping To snap panels at specific positions while dragging, add the `snap` attribute with one or more space-separated values. Values must be in pixels or percentages. For example, to snap the panel at `100px` and `50%`, use `snap="100px 50%"`. You can also customize how close the divider must be before snapping with the `snap-threshold` attribute. @@ -92,6 +185,73 @@ To snap panels at specific positions while dragging, add the `snap` attribute wi ``` +```jsx react +import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react'; + +const css = ` + .split-panel-snapping { + position: relative; + } + + .split-panel-snapping-dots::before, + .split-panel-snapping-dots::after { + content: ''; + position: absolute; + bottom: -12px; + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--sl-color-neutral-400); + transform: translateX(-3px); + } + + .split-panel-snapping-dots::before { + left: 100px; + } + + .split-panel-snapping-dots::after { + left: 50%; + } +`; + +const App = () => ( + <> +
+ +
+ Start +
+
+ End +
+ + +
+
+ + + +); +``` + ### Disabled Add the `disabled` attribute to prevent the split panel from being repositioned. @@ -107,6 +267,39 @@ Add the `disabled` attribute to prevent the split panel from being repositioned. ``` +```jsx react +import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ( + +
+ Start +
+
+ End +
+ +); +``` + ### Setting the Primary Panel By default, both panels will grow or shrink proportionally when the host element is resized. If a primary panel is designated, it will maintain its size and the secondary panel will grow or shrink to fit the remaining space. You can set the primary panel to `start` or `end` using the `primary` attribute. @@ -140,6 +333,57 @@ Try resizing the example below with each option and notice how the panels respon ``` +```jsx react +import { useState } from 'react'; +import { SlSplitPanel, SlSelect, SlMenuItem } from '@shoelace-style/shoelace/dist/react'; + +const App = () => { + const [primary, setPrimary] = useState(''); + + return ( + <> + +
+ Start +
+
+ End +
+ + + setPrimary(event.target.value)} + > + None + Start + End + + + ); +}; +``` + ### Min & Max To set a minimum or maximum size of the primary panel, use the `--min` and `--max` custom properties. Since the secondary panel is flexible, size constraints can only be applied to the primary panel (or the `start` panel if a primary panel isn't designated). @@ -157,6 +401,39 @@ This examples demonstrates how you can make both panels be a minimum of 150px us ``` +```jsx react +import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ( + +
+ Start +
+
+ End +
+ +); +``` + ### Nested Split Panels Create complex layouts that can be repositioned independently by nesting split panels. @@ -179,22 +456,97 @@ Create complex layouts that can be repositioned independently by nesting split p ``` +```jsx react +import { SlSplitPanel } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ( + +
+ Start +
+
+ +
+ Start +
+
+ End +
+ +
+ +); +``` + ### Customizing the Divider You can target the `divider` part to apply CSS properties to the divider. To add a handle, slot an icon or another element into the `handle` slot. When customizing the divider, make sure to think about focus styles for keyboard users. ```html preview -
- - -
+ + +
+ Start +
+
+ End +
+ +``` + +```jsx react +import { SlSplitPanel, SlIcon } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ( + + +
Start
-
+
End
- -
+ +); ``` Here's a more elaborate example that changes the divider's color and width and adds a styled handle. @@ -240,4 +592,65 @@ Here's a more elaborate example that changes the divider's color and width and a ``` +```jsx react +import { SlSplitPanel, SlIcon } from '@shoelace-style/shoelace/dist/react'; + +const css = ` + .split-panel-handle sl-split-panel { + --divider-width: 2px; + } + + .split-panel-handle sl-split-panel::part(divider) { + background-color: var(--sl-color-pink-600); + } + + .split-panel-handle sl-icon { + position: absolute; + border-radius: var(--sl-border-radius-small); + background: var(--sl-color-pink-600); + color: var(--sl-color-neutral-0); + padding: .5rem .125rem; + } + + .split-panel-handle sl-split-panel::part(divider):focus-visible { + background-color: var(--sl-color-primary-600); + } + + .split-panel-handle sl-split-panel:focus-within sl-icon { + background-color: var(--sl-color-primary-600); + color: var(--sl-color-neutral-0); + } +`; + +const App = () => ( + <> +
+ + +
+ Start +
+
+ End +
+ +
+ + + +); +``` + [component-metadata:sl-split-panel]