Mishka
Chelekom

Scroll Area

v0.0.10

v0.0.10StableComponentStatelessJSApache-2.0
Installation mix mishka.ui.gen.component scroll_area
Source View Source

Overview Scroll area Phoenix LiveView component

The Scroll Area component in Mishka Chelekom provides a clean and efficient way to handle scrollable content within your Phoenix LiveView application.

This component can be integrated with various other components, such as table contents, Drawer, Sidebar, to create scrollable areas that are easily navigable using keyboard or touch input on mobile devices.

Overview Scroll area Phoenix LiveView component

Key Features of Mishka Chelekom Scroll Area
  • Full keyboard navigation support with arrow keys and Page Up/Down
  • Touch-friendly scrolling with smooth momentum on mobile devices
  • Responsive scrollbar visibility that adapts to input method
  • Screen reader compatible for improved accessibility
  • Native-like scrolling behavior across all platforms
Input Methods
  • Keyboard: Arrow keys, Page Up/Down, Home/End
  • Touch: Swipe gestures with inertia scrolling
  • Mouse: Wheel scrolling and draggable scrollbar
  • Trackpad: Smooth two-finger scrolling support
heex
<.scroll_area id="unique_id">
  // Content
</.scroll_area>

Horizontal prop

The horizontal prop is a boolean that enables horizontal scrolling. By default, it's set to false.

Horizontal prop

Card image 1 Card image 2 Card image 3 Card image 4
heex
<.scroll_area id="unique_id" horizontal vertical={false}>
  // Content
</.scroll_area>

Vertical prop

The vertical prop is a boolean that enables vertical scrolling. By default, it's set to true.

Vertical prop

Better Organization

Scroll areas help organize content efficiently, especially when dealing with long lists or large amounts of content in a confined space.

Enhanced UX

Provides smooth scrolling experience with custom scrollbars, improving user interaction and navigation within your application.

Space Efficiency

Maximizes screen real estate by containing content in fixed dimensions while maintaining access to all information through scrolling.

Responsive Design

Adapts seamlessly to different screen sizes and orientations, ensuring consistent content presentation across all devices.

heex
<.scroll_area id="unique_id" vertical={false}>
  // Content
</.scroll_area>

Type prop

The type prop allows you to control the scrollbar's visibility and behavior. Available options are: auto (default) - scrollbar is always visible, never - scrollbar is hidden, and hover - scrollbar appears only when hovering over the content.

Type prop

Versatile Integration

The scroll area component seamlessly integrates with various UI elements such as sidebars, drawers, and comboboxes. In sidebars, it enables smooth navigation through lengthy menu items, while in drawers it manages overflow content elegantly. For comboboxes, it handles long option lists efficiently, ensuring a clean and organized dropdown experience.

Enhanced Content Management

When combined with table of contents, modals, or data tables, the scroll area component maintains content accessibility while preserving layout integrity. It's particularly useful in documentation sections, chat interfaces, and content-heavy panels where vertical or horizontal space management is crucial, all while providing consistent scrolling behavior across different devices and screen sizes.

heex
<.scroll_area id="unique_id" type="auto">
  // Content
</.scroll_area>

<.scroll_area id="unique_id" type="hover">
  // Content
</.scroll_area>

<.scroll_area id="unique_id" type="never">
  // Content
</.scroll_area>

Width prop

The width prop allows you to control the width of the scroll area using Tailwind CSS width classes.

Width prop

Advanced Scroll Area Features

The scroll area component offers sophisticated features like customizable scrollbar visibility, smooth scrolling behavior, and responsive dimensions. With support for both vertical and horizontal scrolling, it adapts seamlessly to various content types and layout requirements, making it ideal for handling overflow content in a clean, accessible manner.

Flexible Integration

Whether you're building complex navigation systems, data tables, or content-rich interfaces, the scroll area component provides consistent scrolling behavior across different devices and browsers. Its configurable width, height, and padding options ensure optimal presentation while maintaining performance and user experience standards.

heex
<.scroll_area id="scroll-area-1" width="w-full md:w-2/3">
  // Content
</.scroll_area>

Padding prop

The padding prop allows you to control the padding size of the scroll area content using Tailwind CSS width classes.

Padding prop

Integration with Other Components

Scroll areas enhance various UI components by providing controlled overflow:

  • In modals for long-form content
  • Within sidebars for extensive navigation menus
  • Inside dropdowns for lengthy option lists
  • For table bodies with many rows
  • In chat interfaces for message history
Benefits

By integrating scroll areas with other components, you can:

  • Maintain a compact UI footprint
  • Improve content accessibility
  • Create responsive layouts
  • Handle dynamic content gracefully
  • Ensure consistent scrolling behavior
heex
<.scroll_area id="scroll-area-2" padding="extra_small"></.scroll_area>
<.scroll_area id="scroll-area-3" padding="small"></.scroll_area>
<.scroll_area id="scroll-area-4" padding="medium"></.scroll_area>
<.scroll_area id="scroll-area-5" padding="large"></.scroll_area>
<.scroll_area id="scroll-area-6" padding="extra_large"></.scroll_area>

Height prop

The height prop allows you to control the height of the scroll area using Tailwind CSS height classes.

Height prop

Introduction to Phoenix LiveView Scroll Area

Scroll Area in Phoenix LiveView provides an elegant solution for managing scrollable content. It offers customizable scrollbars, responsive behavior, and smooth scrolling experiences. With support for both vertical and horizontal scrolling, it adapts seamlessly to various content types and screen sizes while maintaining performance and accessibility.

heex
<.scroll_area id="scroll-area-7" height="h-fit md:h-80">
  // Content
</.scroll_area>

Content class prop

The content_class prop allows you to add custom styles to the content area of the scroll component.

Content class prop

Customizable Dimensions for Enhanced Integration

The scroll area component's flexible height and width customization makes it exceptionally versatile when integrated into other UI components. Whether embedding it within modals, sidebars, or complex dashboards, you can precisely control its dimensions using Tailwind CSS classes. This adaptability ensures optimal space utilization in nested layouts, responsive designs, and dynamic content scenarios. The component maintains smooth scrolling behavior and consistent user experience regardless of its configured size, making it perfect for everything from compact dropdown menus to full-page content sections.

heex
<.scroll_area id="scroll-area-8" content_class="py-7 px-1">
  // Content
</.scroll_area>