kopia lustrzana https://github.com/shoelace-style/shoelace
boom
Cory LaViska
rodzic
d3ad2ec4f8
commit
8bb3e5d9c9
|
|
@ -6,11 +6,11 @@ Split panels display two panels alongside each other, often allowing the user to
|
|||
|
||||
```html preview
|
||||
<sl-split-panel>
|
||||
<div slot="start">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, suscipit animi. Exercitationem, modi tenetur, voluptatibus magnam qui excepturi quasi autem et odit, recusandae obcaecati! Quaerat possimus facilis tempora consequatur officia?
|
||||
<div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
|
||||
Start
|
||||
</div>
|
||||
<div slot="end">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, suscipit animi. Exercitationem, modi tenetur, voluptatibus magnam qui excepturi quasi autem et odit, recusandae obcaecati! Quaerat possimus facilis tempora consequatur officia?
|
||||
<div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
|
||||
End
|
||||
</div>
|
||||
</sl-split-panel>
|
||||
```
|
||||
|
|
@ -19,15 +19,15 @@ Split panels display two panels alongside each other, often allowing the user to
|
|||
|
||||
### Initial Position
|
||||
|
||||
To set the initial position of the split in pixels, use the `position` attribute. The value must be in pixels, but if you need to set it as a percentage, use the `setPositionPercentage()` method instead.
|
||||
To set the initial position of the split in pixels, use the `position` attribute. If you need to set the initial value as a percentage, use the `setPositionPercentage()` method instead.
|
||||
|
||||
```html preview
|
||||
<sl-split-panel position="150">
|
||||
<div slot="start">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, suscipit animi. Exercitationem, modi tenetur, voluptatibus magnam qui excepturi quasi autem et odit, recusandae obcaecati! Quaerat possimus facilis tempora consequatur officia?
|
||||
<sl-split-panel position="200">
|
||||
<div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
|
||||
Start
|
||||
</div>
|
||||
<div slot="end">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, suscipit animi. Exercitationem, modi tenetur, voluptatibus magnam qui excepturi quasi autem et odit, recusandae obcaecati! Quaerat possimus facilis tempora consequatur officia?
|
||||
<div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
|
||||
End
|
||||
</div>
|
||||
</sl-split-panel>
|
||||
```
|
||||
|
|
@ -38,11 +38,11 @@ Add the `vertical` attribute to render the split panel in a vertical orientation
|
|||
|
||||
```html preview
|
||||
<sl-split-panel vertical style="height: 400px;">
|
||||
<div slot="start">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, suscipit animi. Exercitationem, modi tenetur, voluptatibus magnam qui excepturi quasi autem et odit, recusandae obcaecati! Quaerat possimus facilis tempora consequatur officia?
|
||||
<div slot="start" style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
|
||||
Start
|
||||
</div>
|
||||
<div slot="end">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, suscipit animi. Exercitationem, modi tenetur, voluptatibus magnam qui excepturi quasi autem et odit, recusandae obcaecati! Quaerat possimus facilis tempora consequatur officia?
|
||||
<div slot="end" style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
|
||||
End
|
||||
</div>
|
||||
</sl-split-panel>
|
||||
```
|
||||
|
|
@ -54,11 +54,11 @@ To snap panels at specific locations, add the `snap` attribute with one or more
|
|||
```html preview
|
||||
<div class="split-panel-snapping">
|
||||
<sl-split-panel snap="100px 50%">
|
||||
<div slot="start">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, suscipit animi. Exercitationem, modi tenetur, voluptatibus magnam qui excepturi quasi autem et odit, recusandae obcaecati! Quaerat possimus facilis tempora consequatur officia?
|
||||
<div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
|
||||
Start
|
||||
</div>
|
||||
<div slot="end">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, suscipit animi. Exercitationem, modi tenetur, voluptatibus magnam qui excepturi quasi autem et odit, recusandae obcaecati! Quaerat possimus facilis tempora consequatur officia?
|
||||
<div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
|
||||
End
|
||||
</div>
|
||||
</sl-split-panel>
|
||||
|
||||
|
|
@ -98,27 +98,29 @@ Add the `disabled` attribute to prevent the split panel from being resized.
|
|||
|
||||
```html preview
|
||||
<sl-split-panel disabled>
|
||||
<div slot="start">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, suscipit animi. Exercitationem, modi tenetur, voluptatibus magnam qui excepturi quasi autem et odit, recusandae obcaecati! Quaerat possimus facilis tempora consequatur officia?
|
||||
<div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
|
||||
Start
|
||||
</div>
|
||||
<div slot="end">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, suscipit animi. Exercitationem, modi tenetur, voluptatibus magnam qui excepturi quasi autem et odit, recusandae obcaecati! Quaerat possimus facilis tempora consequatur officia?
|
||||
<div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
|
||||
End
|
||||
</div>
|
||||
</sl-split-panel>
|
||||
```
|
||||
|
||||
### Setting the Primary Panel
|
||||
|
||||
When the host element is resized, the primary panel will maintain its size and the other panel will grow or shrink to fit the remaining space. Try resizing the example below with each option and notice how panels respond.
|
||||
By default, `start` is the primary panel and `end` is the secondary panel. When the host element is resized, the primary panel will maintain its size and the secondary panel will grow or shrink to fit the remaining space. You can change the primary panel using the `primary` attribute.
|
||||
|
||||
Try resizing the example below with each option and notice how panels respond.
|
||||
|
||||
```html preview
|
||||
<div class="split-panel-primary">
|
||||
<sl-split-panel primary="start">
|
||||
<div slot="start">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, suscipit animi. Exercitationem, modi tenetur, voluptatibus magnam qui excepturi quasi autem et odit, recusandae obcaecati! Quaerat possimus facilis tempora consequatur officia?
|
||||
<div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
|
||||
Start
|
||||
</div>
|
||||
<div slot="end">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, suscipit animi. Exercitationem, modi tenetur, voluptatibus magnam qui excepturi quasi autem et odit, recusandae obcaecati! Quaerat possimus facilis tempora consequatur officia?
|
||||
<div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
|
||||
End
|
||||
</div>
|
||||
</sl-split-panel>
|
||||
|
||||
|
|
@ -137,22 +139,37 @@ When the host element is resized, the primary panel will maintain its size and t
|
|||
</script>
|
||||
```
|
||||
|
||||
### Min & Max
|
||||
|
||||
To set a minimum or maximum size of the primary panel, use the `--min` and `--max` custom properties. This examples demonstrates how you can ensure both panels are at least 150px wide using the `calc()` function.
|
||||
|
||||
```html preview
|
||||
<sl-split-panel style="--min: 150px; --max: calc(100% - 150px);">
|
||||
<div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
|
||||
Start
|
||||
</div>
|
||||
<div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
|
||||
End
|
||||
</div>
|
||||
</sl-split-panel>
|
||||
```
|
||||
|
||||
### Nested Split Panels
|
||||
|
||||
Create complex layouts that can be resized independently by nesting split panels.
|
||||
|
||||
```html preview
|
||||
<sl-split-panel>
|
||||
<div slot="start">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, suscipit animi. Exercitationem, modi tenetur, voluptatibus magnam qui excepturi quasi autem et odit, recusandae obcaecati! Quaerat possimus facilis tempora consequatur officia?
|
||||
<div slot="start" style="height: 400px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
|
||||
Start
|
||||
</div>
|
||||
<div slot="end">
|
||||
<sl-split-panel vertical style="height: 400px;">
|
||||
<div slot="start">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, suscipit animi. Exercitationem, modi tenetur, voluptatibus magnam qui excepturi quasi autem et odit, recusandae obcaecati! Quaerat possimus facilis tempora consequatur officia?
|
||||
<div slot="start" style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
|
||||
Top
|
||||
</div>
|
||||
<div slot="end">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, suscipit animi. Exercitationem, modi tenetur, voluptatibus magnam qui excepturi quasi autem et odit, recusandae obcaecati! Quaerat possimus facilis tempora consequatur officia?
|
||||
<div slot="end" style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
|
||||
Bottom
|
||||
</div>
|
||||
</sl-split-panel>
|
||||
</div>
|
||||
|
|
@ -161,27 +178,47 @@ Create complex layouts that can be resized independently by nesting split panels
|
|||
|
||||
### Customizing the Divider
|
||||
|
||||
You can target the `divider` part to apply CSS properties to the divider. Optionally, you can slot an element into the `handle` slot to show a handle.
|
||||
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
|
||||
<div class="split-panel-custom-divider">
|
||||
<sl-split-panel style="--divider-width: 20px;">
|
||||
<sl-icon slot="handle" name="grip-vertical"></sl-icon>
|
||||
<div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
|
||||
Start
|
||||
</div>
|
||||
<div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
|
||||
End
|
||||
</div>
|
||||
</sl-split-panel>
|
||||
</div>
|
||||
```
|
||||
|
||||
Here's a more elaborate example that changes the divider's color, width, and adds a more obvious handle.
|
||||
|
||||
```html preview
|
||||
<div class="split-panel-handle">
|
||||
<sl-split-panel>
|
||||
<sl-icon slot="handle" name="grip-vertical"></sl-icon>
|
||||
<div slot="start">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, suscipit animi. Exercitationem, modi tenetur, voluptatibus magnam qui excepturi quasi autem et odit, recusandae obcaecati! Quaerat possimus facilis tempora consequatur officia?
|
||||
<div slot="start" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
|
||||
Start
|
||||
</div>
|
||||
<div slot="end">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, suscipit animi. Exercitationem, modi tenetur, voluptatibus magnam qui excepturi quasi autem et odit, recusandae obcaecati! Quaerat possimus facilis tempora consequatur officia?
|
||||
<div slot="end" style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center;">
|
||||
End
|
||||
</div>
|
||||
</sl-split-panel>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.split-panel-custom-divider sl-split-panel::part(divider) {
|
||||
.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-custom-divider sl-icon {
|
||||
.split-panel-handle sl-icon {
|
||||
position: absolute;
|
||||
border-radius: var(--sl-border-radius-small);
|
||||
background: var(--sl-color-pink-600);
|
||||
|
|
@ -189,11 +226,11 @@ You can target the `divider` part to apply CSS properties to the divider. Option
|
|||
padding: .5rem .125rem;
|
||||
}
|
||||
|
||||
.split-panel-custom-divider sl-split-panel::part(divider):focus-visible {
|
||||
.split-panel-handle sl-split-panel::part(divider):focus-visible {
|
||||
background-color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.split-panel-custom-divider sl-split-panel:focus-within sl-icon {
|
||||
.split-panel-handle sl-split-panel:focus-within sl-icon {
|
||||
background-color: var(--sl-color-primary-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,10 @@ export default css`
|
|||
:host {
|
||||
--divider-width: 4px;
|
||||
--divider-hit-area: 12px;
|
||||
--min: 0%;
|
||||
--max: 100%;
|
||||
|
||||
display: flex;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.start,
|
||||
|
|
@ -17,14 +19,6 @@ export default css`
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.start {
|
||||
background: var(--sl-color-blue-50);
|
||||
}
|
||||
|
||||
.end {
|
||||
background: var(--sl-color-orange-50);
|
||||
}
|
||||
|
||||
.divider {
|
||||
flex: 0 0 var(--divider-width);
|
||||
display: flex;
|
||||
|
|
@ -32,6 +26,7 @@ export default css`
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--sl-color-neutral-200);
|
||||
color: var(--sl-color-neutral-900);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
|
@ -41,6 +36,7 @@ export default css`
|
|||
|
||||
:host(:not([disabled])) .divider${focusVisibleSelector} {
|
||||
background-color: var(--sl-color-primary-600);
|
||||
color: var(--sl-color-neutral-0);
|
||||
}
|
||||
|
||||
:host([disabled]) .divider {
|
||||
|
|
@ -48,11 +44,6 @@ export default css`
|
|||
}
|
||||
|
||||
/* Horizontal */
|
||||
:host(:not([vertical])) .start,
|
||||
:host(:not([vertical])) .end {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
:host(:not([vertical], [disabled])) .divider {
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
|
@ -71,11 +62,6 @@ export default css`
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
:host([vertical]) .start,
|
||||
:host([vertical]) .end {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
:host([vertical]:not([disabled])) .divider {
|
||||
cursor: row-resize;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { LitElement, html } from 'lit';
|
||||
import { customElement, property, query } from 'lit/decorators.js';
|
||||
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
import { styleMap } from 'lit/directives/style-map.js';
|
||||
import { clamp } from '../../internal/math';
|
||||
import { emit } from '../../internal/event';
|
||||
import { watch } from '../../internal/watch';
|
||||
|
|
@ -15,7 +14,7 @@ import styles from './split-panel.styles';
|
|||
* @event sl-reposition - Emitted when the divider is repositioned.
|
||||
* @event {{ entries: ResizeObserverEntry[] }} sl-resize - Emitted when the container is resized.
|
||||
*
|
||||
* @csspart divider - The divider that separates the start and end panels.
|
||||
* @csspart divider - The divider that separates both panels.
|
||||
*
|
||||
* @slot start - The start panel.
|
||||
* @slot end - The end panel.
|
||||
|
|
@ -23,6 +22,8 @@ import styles from './split-panel.styles';
|
|||
*
|
||||
* @cssproperty [--divider-width=4px] - The width of the visible divider.
|
||||
* @cssproperty [--divider-hit-area=12px] - The invisible area around the divider where dragging can occur.
|
||||
* @cssproperty [--min=0] - The minimum allowed size of the primary panel.
|
||||
* @cssproperty [--max=100%] - The maximum allowed size of the primary panel.
|
||||
*/
|
||||
@customElement('sl-split-panel')
|
||||
export default class SlSplitPanel extends LitElement {
|
||||
|
|
@ -156,19 +157,19 @@ export default class SlSplitPanel extends LitElement {
|
|||
event.preventDefault();
|
||||
|
||||
if ((event.key === 'ArrowLeft' && !this.vertical) || (event.key === 'ArrowUp' && this.vertical)) {
|
||||
newPercentage -= incr;
|
||||
newPercentage -= this.primary === 'end' ? -1 * incr : incr;
|
||||
}
|
||||
|
||||
if ((event.key === 'ArrowRight' && !this.vertical) || (event.key === 'ArrowDown' && this.vertical)) {
|
||||
newPercentage += incr;
|
||||
newPercentage += this.primary === 'end' ? -1 * incr : incr;
|
||||
}
|
||||
|
||||
if (event.key === 'Home') {
|
||||
newPercentage = 0;
|
||||
newPercentage = this.primary === 'end' ? 100 : 0;
|
||||
}
|
||||
|
||||
if (event.key === 'End') {
|
||||
newPercentage = 100;
|
||||
newPercentage = this.primary === 'end' ? 0 : 100;
|
||||
}
|
||||
|
||||
newPercentage = clamp(newPercentage, 0, 100);
|
||||
|
|
@ -204,27 +205,28 @@ export default class SlSplitPanel extends LitElement {
|
|||
}
|
||||
|
||||
render() {
|
||||
let start: string;
|
||||
let end: string;
|
||||
|
||||
// TODO - min / max
|
||||
// TODO - custom divider styles + handle
|
||||
const gridTemplate = this.vertical ? 'gridTemplateRows' : 'gridTemplateColumns';
|
||||
const primary = `
|
||||
clamp(
|
||||
0%,
|
||||
clamp(
|
||||
var(--min),
|
||||
calc(${this.position}px - var(--divider-width) / 2),
|
||||
var(--max)
|
||||
),
|
||||
calc(100% - var(--divider-width))
|
||||
)
|
||||
`;
|
||||
const secondary = 'auto';
|
||||
|
||||
if (this.primary === 'end') {
|
||||
start = `1 1 auto`;
|
||||
end = `0 0 calc((${this.position}px - var(--divider-width) / 2)`;
|
||||
this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;
|
||||
} else {
|
||||
start = `0 0 calc(${this.position}px - var(--divider-width) / 2)`;
|
||||
end = `1 1 auto`;
|
||||
this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div
|
||||
class="start"
|
||||
style=${styleMap({
|
||||
flex: start
|
||||
})}
|
||||
>
|
||||
<div class="start">
|
||||
<slot name="start"></slot>
|
||||
</div>
|
||||
|
||||
|
|
@ -241,12 +243,7 @@ export default class SlSplitPanel extends LitElement {
|
|||
<slot name="handle"></slot>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="end"
|
||||
style=${styleMap({
|
||||
flex: end
|
||||
})}
|
||||
>
|
||||
<div class="end">
|
||||
<slot name="end"></slot>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue