Mixins / foldkit-mixins-ui

AspectRatio

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

export * as AspectRatio from './aspectRatio.js'

In the guides

Members

AspectRatio.AspectRatioSlots

const · packages/mixins-ui/src/aspectRatio.ts:9

const AspectRatioSlots: Slots.Contract<{
  readonly frame: 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 fixed-ratio frame publishes one slot; it owns no state, messages, or bundles. The ratio is the recipe's, so a stylist can change it.

AspectRatio.AspectRatioView

interface · packages/mixins-ui/src/aspectRatio.ts:17

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

A frame in one call: the content it crops to the ratio, a style for its slot, and mixins beside the style.

AspectRatio.view

function · packages/mixins-ui/src/aspectRatio.ts:25

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