ScrollArea

import { ScrollArea } from '@tidbcloud/uikit'

import { ScrollArea } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <ScrollArea h={250}>
      {/* Long content here */}
      <p>Content that exceeds the container height...</p>
    </ScrollArea>
  )
}

import { ScrollArea, Box } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <ScrollArea w={300} h={200}>
      <Box w={600}>{/* Wide content here */}</Box>
    </ScrollArea>
  )
}

import { ScrollArea } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <>
      {/* Scrollbars visible on hover (default) */}
      <ScrollArea h={200} type="hover">
        <div>Content...</div>
      </ScrollArea>
 
      {/* Scrollbars visible on scroll */}
      <ScrollArea h={200} type="scroll">
        <div>Content...</div>
      </ScrollArea>
 
      {/* Scrollbars always visible when content overflows */}
      <ScrollArea h={200} type="auto">
        <div>Content...</div>
      </ScrollArea>
 
      {/* Scrollbars always visible */}
      <ScrollArea h={200} type="always">
        <div>Content...</div>
      </ScrollArea>
 
      {/* Scrollbars always hidden */}
      <ScrollArea h={200} type="never">
        <div>Content...</div>
      </ScrollArea>
    </>
  )
}

import { useState } from 'react'
import { ScrollArea, Text, Code, Box } from '@tidbcloud/uikit'
 
function Demo() {
  const [scrollPosition, onScrollPositionChange] = useState({ x: 0, y: 0 })
 
  return (
    <>
      <ScrollArea w={300} h={200} onScrollPositionChange={onScrollPositionChange}>
        <Box w={600} h={400}>
          {/* Content */}
        </Box>
      </ScrollArea>
      <Text>
        Scroll position: <Code>{`{ x: ${scrollPosition.x}, y: ${scrollPosition.y} }`}</Code>
      </Text>
    </>
  )
}

import { useRef } from 'react'
import { ScrollArea, Button, Stack, Group } from '@tidbcloud/uikit'
 
function Demo() {
  const viewport = useRef<HTMLDivElement>(null)
 
  const scrollToBottom = () => viewport.current?.scrollTo({ top: viewport.current.scrollHeight, behavior: 'smooth' })
 
  const scrollToTop = () => viewport.current?.scrollTo({ top: 0, behavior: 'smooth' })
 
  return (
    <Stack align="center">
      <ScrollArea w={300} h={200} viewportRef={viewport}>
        {/* Long content */}
      </ScrollArea>
      <Group>
        <Button onClick={scrollToTop}>Scroll to top</Button>
        <Button onClick={scrollToBottom}>Scroll to bottom</Button>
      </Group>
    </Stack>
  )
}

import { ScrollArea } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <ScrollArea.Autosize mah={300} maw={400}>
      {/* Content that may or may not exceed max height */}
    </ScrollArea.Autosize>
  )
}