Mixins / foldkit-mixins-ui

Item

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

export * as Item from './item.js'

In the guides

Members

Item.ItemSlots

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

const ItemSlots: Slots.Contract<{ readonly root: 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 media: 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 content: 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 title: 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 description: 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 actions: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Int …;

An item publishes its regions as slots; it owns no state, messages, or bundles. It is the common visual language for a row of anything: a menu option, a command, a notification, a file, a contact. Draw the parts the row has and skip the rest.

Item.ItemView

interface · packages/mixins-ui/src/item.ts:25

interface ItemView<Message = never> {
  readonly content?: Html | undefined
  readonly media?: Html | undefined
  readonly title?: string | undefined
  readonly description?: string | undefined
  readonly actions?: Html | undefined
  readonly style?: NamedStyle<typeof ItemSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

A row in one call: the regions it earns, a style for its slots, and mixins beside the style. content follows the title and description in the content region. No upstream component stands behind it.

Item.view

function · packages/mixins-ui/src/item.ts:37

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