ScrollShadow

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23import { ScrollShadow } from "heroui-solid"
import { For } from "solid-js"

export function Default() {
  return (
    <div class="w-full p-0 sm:max-w-sm">
      <ScrollShadow initialShadow class="max-h-[240px] p-4">
        <div class="space-y-4">
          <For each={Array.from({ length: 10 })}>
            {() => (
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
                pulvinar risus non risus hendrerit venenatis. Pellentesque sit
                amet hendrerit risus, sed porttitor quam. Morbi accumsan cursus
                enim, sed ultricies sapien.
              </p>
            )}
          </For>
        </div>
      </ScrollShadow>
    </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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75import { Card, ScrollShadow } from "heroui-solid"
import { For } from "solid-js"

const images = [
  "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/robot1.jpeg",
  "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/avocado.jpeg",
  "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/oranges.jpeg"
]

export function Orientation() {
  const getRandomImage = (idx: number) => {
    return images[idx % images.length]
  }

  return (
    <div class="w-full sm:max-w-sm">
      <div class="mb-8 w-full">
        <h4 class="mb-2 text-sm font-semibold">Vertical</h4>
        <Card class="w-full p-0">
          <ScrollShadow
            initialShadow
            class="max-h-[240px] p-4"
            orientation="vertical"
          >
            <div class="space-y-4">
              <For each={Array.from({ length: 10 })}>
                {() => (
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Nullam pulvinar risus non risus hendrerit venenatis.
                    Pellentesque sit amet hendrerit risus, sed porttitor quam.
                    Morbi accumsan cursus enim, sed ultricies sapien.
                  </p>
                )}
              </For>
            </div>
          </ScrollShadow>
        </Card>
      </div>

      <div class="w-full">
        <h4 class="mb-2 text-sm font-semibold">Horizontal</h4>
        <Card class="w-full p-0">
          <ScrollShadow initialShadow class="p-4" orientation="horizontal">
            <div class="flex flex-row gap-4">
              <For each={Array.from({ length: 10 })}>
                {(_, idx) => (
                  <Card
                    class="flex min-w-[200px] flex-row gap-3 p-1"
                    variant="transparent"
                  >
                    <img
                      alt="Lorem Card"
                      class="aspect-square h-16 w-16 shrink-0 rounded-xl object-cover select-none sm:h-20 sm:w-20"
                      loading="lazy"
                      src={getRandomImage(idx())}
                    />
                    <div class="flex flex-1 flex-col justify-center gap-1">
                      <Card.Title class="text-sm">
                        Bridging the Future
                      </Card.Title>
                      <Card.Description class="text-xs">
                        Today, 6:30 PM
                      </Card.Description>
                    </div>
                  </Card>
                )}
              </For>
            </div>
          </ScrollShadow>
        </Card>
      </div>
    </div>
  )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23import { ScrollShadow } from "heroui-solid"
import { For } from "solid-js"

export function HideScrollBar() {
  return (
    <div class="w-full p-0 sm:max-w-sm">
      <ScrollShadow hideScrollBar initialShadow class="max-h-[240px] p-4">
        <div class="space-y-4">
          <For each={Array.from({ length: 10 })}>
            {() => (
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
                pulvinar risus non risus hendrerit venenatis. Pellentesque sit
                amet hendrerit risus, sed porttitor quam. Morbi accumsan cursus
                enim, sed ultricies sapien.
              </p>
            )}
          </For>
        </div>
      </ScrollShadow>
    </div>
  )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23import { ScrollShadow } from "heroui-solid"
import { For } from "solid-js"

export function CustomSize() {
  return (
    <div class="w-full p-0 sm:max-w-sm">
      <ScrollShadow initialShadow class="max-h-[240px] p-4" size={80}>
        <div class="space-y-4">
          <For each={Array.from({ length: 10 })}>
            {() => (
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
                pulvinar risus non risus hendrerit venenatis. Pellentesque sit
                amet hendrerit risus, sed porttitor quam. Morbi accumsan cursus
                enim, sed ultricies sapien.
              </p>
            )}
          </For>
        </div>
      </ScrollShadow>
    </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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94import { Card, ScrollShadow, type ScrollShadowVisibility } from "heroui-solid"
import { createSignal, For } from "solid-js"

const images = [
  "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/robot1.jpeg",
  "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/avocado.jpeg",
  "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/oranges.jpeg"
]

export function VisibilityChange() {
  const [verticalState, setVerticalState] =
    createSignal<ScrollShadowVisibility>("none")
  const [horizontalState, setHorizontalState] =
    createSignal<ScrollShadowVisibility>("none")

  const getRandomImage = (idx: number) => {
    return images[idx % images.length]
  }

  return (
    <div class="w-full sm:max-w-sm">
      <div class="mb-8 flex flex-col gap-2">
        <div class="rounded bg-default p-4">
          <p class="text-sm font-semibold">
            Vertical Shadow State: {verticalState()}
          </p>
        </div>
        <div class="w-full">
          <ScrollShadow
            initialShadow
            class="max-h-[240px] p-4"
            orientation="vertical"
            onVisibilityChange={(visibility) => setVerticalState(visibility)}
          >
            <div class="space-y-4">
              <For each={Array.from({ length: 10 })}>
                {() => (
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Nullam pulvinar risus non risus hendrerit venenatis.
                    Pellentesque sit amet hendrerit risus, sed porttitor quam.
                    Morbi accumsan cursus enim, sed ultricies sapien.
                  </p>
                )}
              </For>
            </div>
          </ScrollShadow>
        </div>
      </div>

      <div class="flex flex-col gap-2">
        <div class="rounded bg-default p-4">
          <p class="text-sm font-semibold">
            Horizontal Shadow State: {horizontalState()}
          </p>
        </div>
        <div class="w-full">
          <ScrollShadow
            initialShadow
            class="p-4"
            orientation="horizontal"
            onVisibilityChange={(visibility) => setHorizontalState(visibility)}
          >
            <div class="flex flex-row gap-4">
              <For each={Array.from({ length: 10 })}>
                {(_, idx) => (
                  <Card
                    class="flex min-w-[200px] flex-row gap-3 p-1"
                    variant="transparent"
                  >
                    <img
                      alt="Lorem Card"
                      class="aspect-square h-16 w-16 shrink-0 rounded-xl object-cover select-none sm:h-20 sm:w-20"
                      loading="lazy"
                      src={getRandomImage(idx())}
                    />
                    <div class="flex flex-1 flex-col justify-center gap-1">
                      <Card.Title class="text-sm">
                        Bridging the Future
                      </Card.Title>
                      <Card.Description class="text-xs">
                        Today, 6:30 PM
                      </Card.Description>
                    </div>
                  </Card>
                )}
              </For>
            </div>
          </ScrollShadow>
        </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
28
29
30
31
32
33
34
35import { Button, Card, ScrollShadow } from "heroui-solid"
import { For } from "solid-js"

export function WithCard() {
  return (
    <Card class="max-w-[400px]">
      <Card.Header>
        <Card.Title>Terms and Conditions</Card.Title>
        <Card.Description>Please review before proceeding</Card.Description>
      </Card.Header>
      <Card.Content class="p-0">
        <ScrollShadow initialShadow class="h-[300px] px-4" size={80}>
          <div class="space-y-4">
            <For each={Array.from({ length: 10 })}>
              {() => (
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Nullam pulvinar risus non risus hendrerit venenatis.
                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
                  Morbi accumsan cursus enim, sed ultricies sapien.
                </p>
              )}
            </For>
          </div>
        </ScrollShadow>
      </Card.Content>
      <Card.Footer class="mt-4 flex flex-row gap-2">
        <Button class="w-full" variant="secondary">
          Cancel
        </Button>
        <Button class="w-full">Accept</Button>
      </Card.Footer>
    </Card>
  )
}