Mixins / foldkit-mixins-ui

Nav

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

export * as Nav from './nav.js'

In the guides

Members

Nav.draw

function · packages/mixins-ui/src/nav.ts:68

function draw<Value extends string, Message>(
  nav: ResolvedNav<Value, Message>,
  label: (value: Value) => Html | string,
  h: HtmlBuilder<Message>,
): Html

The links drawn in a list, the indicator and highlight first.

Nav.fluid

const · packages/mixins-ui/src/nav.ts:107

const fluid: readonly [Mixin<never>, Mixin<never>]

What moves the indicator and highlight, on the list: the current link is measured (--fk-nav-chosen-*), and one highlight follows the pointer to the nearest link (--fk-nav-hover-*), born at the current one. Pass them beside the style; until they run, the current link marks itself.

const · packages/mixins-ui/src/nav.ts:15

const NavSlots: Slots.Contract<{ readonly nav: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly list: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly item: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly link: Slot.UnnamedSlot<Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly indicator: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>; readonly highlight: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", re …;

@foldkit/ui's Nav, a navigation landmark of links with the current one marked, as shadcn's navigation menu draws it: links in a row, their keys the browser's (Tab to move, Enter to follow), no roving tab stop, since that is a composite widget's pattern and not a landmark's. indicator and highlight, drawn in the list, are the current link's marker and the hover that follows the pointer, which fluid moves, as Tabs' do.

Nav.resolve

function · packages/mixins-ui/src/nav.ts:38

function resolve<Value extends string, Input, Message>(
  render: RenderInfo<Value>,
  mixins: MixinList<Message>,
  context: ResolveContext<Input, Message>,
): ResolvedNav<Value, Message>

Applies mixins to the nav's bundles: its landmark, and each item's link.

Nav.ResolvedNav

interface · packages/mixins-ui/src/nav.ts:24

interface ResolvedNav<Value extends string, Message> {
  readonly nav: SlotAttributes<Message>
  readonly list: SlotAttributes<Message>
  readonly indicator: SlotAttributes<Message>
  readonly highlight: SlotAttributes<Message>
  readonly items: ReadonlyArray<
    Omit<ItemInfo<Value>, 'link'> & {
      readonly item: SlotAttributes<Message>
      readonly link: SlotAttributes<Message>
    }
  >
}

Nav.toView

function · packages/mixins-ui/src/nav.ts:87

function toView<Value extends string, Message>(
  mixins: MixinList<Message>,
  context: ResolveContext<unknown, Message>,
  label: (value: Value) => Html | string,
  custom?: (resolved: ResolvedNav<Value, Message>) => Html,
): (render: RenderInfo<Value>) => Html

The nav's toView: with no draw, the links in a list, each showing label of its value; a draw of your own receives the bundles.