Mixins / foldkit-mixins-ui

ScrollArea

namespace · packages/mixins-ui/src/scrollArea.ts:1

export * as ScrollArea from './scrollArea.js'

In the guides

Members

ScrollArea.ScrollAreaSlots

const · packages/mixins-ui/src/scrollArea.ts:11

const ScrollAreaSlots: Slots.Contract<{
  readonly viewport: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
}>

A scroll area publishes one slot; it owns no state, messages, or bundles. The browser owns scrolling; this owns the box: which axes may scroll and how the bars read. The height that makes it scroll stays the caller's (a mixin beside the style), since only the caller knows the layout it sits in.

ScrollArea.ScrollAreaView

interface · packages/mixins-ui/src/scrollArea.ts:20

interface ScrollAreaView<Message = never> {
  readonly content: Html
  readonly style?: NamedStyle<typeof ScrollAreaSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

A scroll area in one call: what scrolls inside it, a style for its slot, and mixins beside the style (including the height that makes it scroll). No upstream component stands behind it.

ScrollArea.view

function · packages/mixins-ui/src/scrollArea.ts:28

function view<Message = never>(
  options: ScrollAreaView<Message>,
  h: HtmlBuilder<Message>,
): Html