page CustomScrollbarcomponent { seo { title = "CustomScrollbar component" description = "Theme-aware, responsive custom scrollbar component." } view {
W WRNexusJS
layout component

CustomScrollbar

Theme-aware, responsive custom scrollbar component.

@wrnexus/ui 0.3.56 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<CustomScrollbar
  size="default"
  color="primary"
  columns="2"
  gap="md"
  maxWidth="xl"
/>

Legacy mount name: data-component="CustomScrollbar".

Props and attributes

PropTypeRequirementDefault
sizestringOptional"default"
colorstringOptional"primary"
columnsnumberOptional2
gapstringOptional"md"
maxWidthstringOptional"xl"
classstringOptional""

Slots

  • default

Events

This component does not declare a custom event.

Source contract

Installed source: components/CustomScrollbar.wrn

component CustomScrollbar {
  props {
    size = "default"
    color = "primary"
    columns = 2
    gap = "md"
    maxWidth = "xl"
    class = ""
  }
  view {
        <div class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--custom-scrollbar wire-next--gap-{gap} wire-next--columns-{columns} wire-next--max-{maxWidth} {class}">
        <slot />
        </div>
    }
}
} }