Css Zero Showcase

Previews

No matching results.

Pages

No matching results.

x
1
2
3
4
5
6
7
8
<div class="resizable-horizontal rounded-lg border" style="block-size: 450px;" data-controller="resizable" data-resizable-direction-value="horizontal">
  <div class="flex items-center justify-center p-6" data-resizable-target="element" data-size="25">
    <span class="font-semibold">Sidebar</span>
  </div>
  <div class="flex items-center justify-center p-6" data-resizable-target="element" data-size="75">
    <span class="font-semibold">Content</span>
  </div>
</div>
1
2
3
4
5
6
7
8
9
<div class="resizable-horizontal rounded-lg border" style="block-size: 450px;" data-controller="resizable" data-resizable-direction-value="horizontal">
  <div class="flex items-center justify-center p-6" data-resizable-target="element" data-size="25">
    <span class="font-semibold">Sidebar</span>
  </div>
  <div class="flex items-center justify-center p-6" data-resizable-target="element" data-size="75">
    <span class="font-semibold">Content</span>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.resizable-horizontal {
  display: flex;
  flex-direction: row;
}
.resizable-vertical {
  display: flex;
  flex-direction: column;
}
.gutter {
  align-items: center;
  background-image: linear-gradient(var(--color-border), var(--color-border));
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
}
.gutter::after {
  background-color: var(--color-border);
  border-radius: var(--rounded-lg);
  content: "";
}
.gutter-horizontal {
  background-size: var(--border) 100%;
  cursor: col-resize;
}
.gutter-horizontal::after {
  block-size: var(--size-6); inline-size: var(--size-1);
}
.gutter-vertical {
  background-size: 100% var(--border);
  cursor: row-resize;
}
.gutter-vertical::after {
  block-size: var(--size-1); inline-size: var(--size-6);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { Controller } from "@hotwired/stimulus"
import Split from "https://esm.sh/split.js@1.6.5?standalone"
export default class extends Controller {
  static targets = [ "element" ]
  static values  = { direction: { type: String, default: "horizontal" } }
  connect() {
    this.split = Split(this.elementTargets, this.#options)
  }
  disconnect() {
    this.split.destroy()
  }
  get #options() {
    return { sizes: this.#sizes, minSize: this.#minSize, maxSize: this.#maxSize, direction: this.directionValue }
  }
  get #sizes() {
    return this.elementTargets.map(it => parseInt(it.dataset.size) || 0)
  }
  get #minSize() {
    return this.elementTargets.map(it => parseInt(it.dataset.minSize) || 100)
  }
  get #maxSize() {
    return this.elementTargets.map(it => parseInt(it.dataset.maxSize) || Infinity)
  }
}

Dependencies