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
<resizable-group class="rounded-lg border" style="block-size: 450px;">
  <resizable-panel default-size="25">
    <div class="flex items-center justify-center b-full p-6">
      <span class="font-semibold">Sidebar</span>
    </div>
  </resizable-panel>
  <resizable-separator></resizable-separator>
  <resizable-panel default-size="75">
    <div class="flex items-center justify-center b-full p-6">
      <span class="font-semibold">Content</span>
    </div>
  </resizable-panel>
</resizable-group>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<resizable-group class="rounded-lg border" style="block-size: 450px;">
  <resizable-panel default-size="25">
    <div class="flex items-center justify-center b-full p-6">
      <span class="font-semibold">Sidebar</span>
    </div>
  </resizable-panel>
  <resizable-separator></resizable-separator>
  <resizable-panel default-size="75">
    <div class="flex items-center justify-center b-full p-6">
      <span class="font-semibold">Content</span>
    </div>
  </resizable-panel>
</resizable-group>
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
@import url("https://esm.sh/resizable-panels-zero@0.0.1/dist/resizable-panels-zero.css");
resizable-group {
  --resizable-separator-size: var(--border);
  --resizable-separator-color: var(--color-border);
  --resizable-separator-color-hover: var(--color-border);
  --resizable-separator-color-active: var(--color-border);
  --resizable-separator-color-disabled: var(--color-border-light);
  --resizable-focus-ring-width: var(--border-2);
  --resizable-focus-ring-color: var(--color-selected-dark);
  --resizable-overlay-size: var(--border-2);
  --resizable-overlay-color: var(--color-border);
  --resizable-overlay-color-active: var(--color-border-dark);
  --resizable-transition-duration: var(--time-150);
  --resizable-transition-easing: var(--ease-out-3);
}
resizable-separator {
  align-items: center;
  display: flex;
  justify-content: center;
  z-index: 1;
  &::after {
    background-color: var(--color-border);
    border-radius: var(--rounded-lg);
    content: "";
    flex-shrink: 0;
  }
  &[aria-orientation="vertical"]::after {
    block-size: var(--size-6); inline-size: var(--size-1);
  }
  &[aria-orientation="horizontal"]::after {
    block-size: var(--size-1); inline-size: var(--size-6);
  }
}
Java Script is not required or multiple files are needed, check the notes.

No notes provided.