Fejlesztőknek
Kezdj bele
Témák/Theme SDK/Modules/elements/Parts

Parts

Ez az oldal még csak angolul érhető el.

The parts of @poltura/theme-sdk/elements.

Ezen az oldalon
import { … } from '@poltura/theme-sdk/elements';

Slot

Draws the children of the current section or block in one region, each through its own component and frame.

Slot(props: SlotProps): ReactElement | null

The default region also draws the statics declared without a slot, where they are stored.

Props: SlotProps

Example

import { Slot, defineSection } from '@poltura/theme-sdk/elements';

export const split = defineSection({
  type: 'split',
  label: 'Split',
  blocks: { accepts: ['heading', 'image'] },
  slots: [{ name: 'media', label: 'Media' }],
  component: ({ attrs }) => (
    <section {...attrs}>
      <Slot name='media' />
      <Slot className='grid gap-4' />
    </section>
  ),
});

EditableText

A plain-text setting of the current element, editable in place on the customizer canvas; nothing when empty.

EditableText(props: EditableTextProps): ReactElement

Props: EditableTextProps

Example

import { EditableText } from '@poltura/theme-sdk/elements';

export function Title() {
  return <EditableText setting='heading' as='h2' className='text-3xl font-semibold' />;
}

EditableRichText

A rich-text setting of the current element, editable in place on the customizer canvas.

EditableRichText(props: EditableRichTextProps): ReactElement

Props: EditableRichTextProps

Example

import { EditableRichText } from '@poltura/theme-sdk/elements';

export function Body() {
  return <EditableRichText setting='body' className='flex flex-col gap-3' />;
}

ElementBackground

The background the merchant styled the current element with: image, video or overlay; nothing when unset.

ElementBackground(): ReactNode

Example

import { ElementBackground } from '@poltura/theme-sdk/elements';

export function Band({ children }: { children: string }) {
  return (
    <div className='relative'>
      <ElementBackground />
      <p className='relative'>{children}</p>
    </div>
  );
}

ElementDividers

The shape dividers the merchant set on the current element's edges; nothing when unset.

ElementDividers(): ReactNode

Example

import { ElementDividers } from '@poltura/theme-sdk/elements';

export function Edges() {
  return <ElementDividers />;
}
Utoljára frissítve