Css Zero Showcase

Previews

No matching results.

Pages

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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="50">
    <span class="font-semibold">One</span>
  </div>
  <div class="resizable-vertical" data-resizable-target="element" data-size="50">
    <div contents data-controller="resizable" data-resizable-direction-value="vertical">
      <div class="flex items-center justify-center p-6" data-resizable-target="element" data-size="25">
        <span class="font-semibold">Two</span>
      </div>
      <div class="flex items-center justify-center p-6" data-resizable-target="element" data-size="75">
        <span class="font-semibold">Three</span>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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="50">
    <span class="font-semibold">One</span>
  </div>
  <div class="resizable-vertical" data-resizable-target="element" data-size="50">
    <div contents data-controller="resizable" data-resizable-direction-value="vertical">
      <div class="flex items-center justify-center p-6" data-resizable-target="element" data-size="25">
        <span class="font-semibold">Two</span>
      </div>
      <div class="flex items-center justify-center p-6" data-resizable-target="element" data-size="75">
        <span class="font-semibold">Three</span>
      </div>
    </div>
  </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
.resizable-horizontal {
  display: flex;
  flex-direction: row;
}
.resizable-vertical {
  display: flex;
  flex-direction: column;
}
.gutter {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.gutter-horizontal {
  background-image: url("grip-vertical-zink-500.svg");
  border-inline-width: var(--border);
  cursor: col-resize;
}
.gutter-vertical {
  background-image: url("grip-horizontal-zink-500.svg");
  border-block-width: var(--border);
  cursor: row-resize;
}
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