menu

Anique

Scrollbar

You can use ScrollbarArea to create a beautiful looking scrollbar

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
texture-box
content-copy
xml
import {ScrollbarArea} from "@qinetik/anique"; import {createGlobalStyle} from "@qinetik/emotion"; const ScrollbarStyles = createGlobalStyle` .area { height: 300px; overflow-y: auto; } .item { width: 80px; height: 20px; padding: 0.5em; } ` export default function ScrollbarAreaExample() { let items : number[] = [] for(let i = 0; i< 25; i++) { items = [...items, i] } return ( <> <ScrollbarStyles/> <ScrollbarArea class="area"> {items.map((e) => ( <div class="item">{e}</div> ))} </ScrollbarArea> </> ) }