Scroll Area

Tăng cường chức năng cuộn gốc để tạo kiểu tùy chỉnh, đa trình duyệt.

Cài đặt

npmpnpmyarnbun

bash

npx @galaxy-stack/nebula-cli@latest add scroll-area

bash

pnpm dlx @galaxy-stack/nebula-cli@latest add scroll-area

bash

yarn dlx @galaxy-stack/nebula-cli@latest add scroll-area

bash

bunx @galaxy-stack/nebula-cli@latest add scroll-area

Sử dụng

VueReactAngular

vue

<script setup lang="ts">
import { ScrollArea } from '@/components/ui/scroll-area'
</script>

<template>
  <ScrollArea class="h-[200px] w-[350px] rounded-md border p-4">
    Có một lần, một gã hề bắt đầu lẻn vào lâu đài vào giữa đêm khuya và để lại
    những câu đùa khắp nơi: dưới gối của nhà vua, trong súp của ông, thậm chí cả
    trong nhà vệ sinh hoàng gia. Nhà vua tức giận, nhưng ông dường như không thể
    ngăn được gã hề. Và rồi, một ngày nọ, người dân trong vương quốc phát hiện ra
    rằng những câu đùa mà gã hề để lại rất hài hước đến nỗi họ không thể nhịn cười.
    Và một khi họ bắt đầu cười, họ không thể dừng lại.
  </ScrollArea>
</template>

tsx

import { ScrollArea } from "@/components/ui/scroll-area"

export default function App() {
  return (
    <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
      Có một lần, một gã hề bắt đầu lẻn vào lâu đài vào giữa đêm khuya và để lại
      những câu đùa khắp nơi: dưới gối của nhà vua, trong súp của ông, thậm chí cả
      trong nhà vệ sinh hoàng gia. Nhà vua tức giận, nhưng ông dường như không thể
      ngăn được gã hề. Và rồi, một ngày nọ, người dân trong vương quốc phát hiện ra
      rằng những câu đùa mà gã hề để lại rất hài hước đến nỗi họ không thể nhịn cười.
      Và một khi họ bắt đầu cười, họ không thể dừng lại.
    </ScrollArea>
  )
}

typescript

import { Component } from '@angular/core';
import { ScrollAreaComponent } from '@/components/ui/scroll-area';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ScrollAreaComponent],
  template: `
    <ui-scroll-area class="h-[200px] w-[350px] rounded-md border p-4">
      Có một lần, một gã hề bắt đầu lẻn vào lâu đài vào giữa đêm khuya và để lại
      những câu đùa khắp nơi: dưới gối của nhà vua, trong súp của ông, thậm chí cả
      trong nhà vệ sinh hoàng gia. Nhà vua tức giận, nhưng ông dường như không thể
      ngăn được gã hề. Và rồi, một ngày nọ, người dân trong vương quốc phát hiện ra
      rằng những câu đùa mà gã hề để lại rất hài hước đến nỗi họ không thể nhịn cười.
      Và một khi họ bắt đầu cười, họ không thể dừng lại.
    </ui-scroll-area>
  `
})
export class AppComponent {}

API Reference

ScrollArea

Prop	Type	Default	Mô tả
`class`	`string`	-	Class CSS tùy chỉnh
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	Hướng thanh cuộn

Ví dụ

Cuộn ngang

VueReactAngular

vue

<ScrollArea orientation="horizontal" class="w-96 whitespace-nowrap rounded-md border">
  <div class="flex w-max space-x-4 p-4">
    <div v-for="i in 10" :key="i" class="shrink-0">
      <div class="overflow-hidden rounded-md">
        <img
          :src="`https://images.unsplash.com/photo-${i}?w=250&h=330`"
          :alt="`Ảnh ${i}`"
          class="aspect-[3/4] h-fit w-fit object-cover"
        />
      </div>
    </div>
  </div>
</ScrollArea>

tsx

<ScrollArea orientation="horizontal" className="w-96 whitespace-nowrap rounded-md border">
  <div className="flex w-max space-x-4 p-4">
    {Array.from({ length: 10 }).map((_, i) => (
      <div key={i} className="shrink-0">
        <div className="overflow-hidden rounded-md">
          <img
            src={`https://images.unsplash.com/photo-${i}?w=250&h=330`}
            alt={`Ảnh ${i}`}
            className="aspect-[3/4] h-fit w-fit object-cover"
          />
        </div>
      </div>
    ))}
  </div>
</ScrollArea>

typescript

<ui-scroll-area orientation="horizontal" class="w-96 whitespace-nowrap rounded-md border">
  <div class="flex w-max space-x-4 p-4">
    @for (i of [1,2,3,4,5,6,7,8,9,10]; track i) {
      <div class="shrink-0">
        <div class="overflow-hidden rounded-md">
          <img
            [src]="'https://images.unsplash.com/photo-' + i + '?w=250&h=330'"
            [alt]="'Ảnh ' + i"
            class="aspect-[3/4] h-fit w-fit object-cover"
          />
        </div>
      </div>
    }
  </div>
</ui-scroll-area>

Khả năng tiếp cận

Tuân thủ WAI-ARIA Scrollbar Pattern.

Cung cấp thanh cuộn tùy chỉnh có thể truy cập bằng bàn phím
Duy trì quản lý focus đúng cách
Hỗ trợ cả cuộn dọc và ngang
Tương thích với screen readers

Khả năng truy cập

Điều hướng bàn phím: [TODO]
Đọc màn hình: [TODO]
Quản lý focus: [TODO]
Tuân thủ WCAG: Tuân thủ WCAG 2.1 cấp độ AA

Tác giả

Bùi Trọng Hiếu (kevinbui)

GitHub: @buikevin
Email: kevinbui210191@gmail.com

Scroll Area

Tags

Cài đặt

Sử dụng

API Reference

ScrollArea

Ví dụ

Cuộn ngang

Khả năng tiếp cận

Khả năng truy cập

Tác giả

Giấy phép

Scroll Area ​

Tags

Cài đặt ​

Sử dụng ​

API Reference ​

ScrollArea ​

Ví dụ ​

Cuộn ngang ​

Khả năng tiếp cận ​

Khả năng truy cập ​

Tác giả ​

Giấy phép ​

Scroll Area

Cài đặt

Sử dụng

API Reference

ScrollArea

Ví dụ

Cuộn ngang

Khả năng tiếp cận

Khả năng truy cập

Tác giả

Giấy phép