salla-product-size-guide

A modal that shows the size guides of a product, one tab per guide, loaded from the store when it opens. Use it on a product page next to a "Size guide" link. Place one salla-product-size-guide in the page, then open it with the open() method or by emitting the size-guide::open event through salla.event with the product id as the argument. If loading fails, the modal shows a message instead of tabs. Keyboard and focus behaviour comes from the inner salla-modal.

Use itCopy Anchor Link

In HTML or JSX, use the tag <salla-product-size-guide> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).

import { SallaProductSizeGuide } from '@salla.sa/twilight-components-react/product-size-guide';

Client-only. On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

ExampleCopy Anchor Link

import { SallaProductSizeGuide } from '@salla.sa/twilight-components-react/product-size-guide';

export function Example() {
  return (
    <>
      <SallaProductSizeGuide />
      <button onClick={() => document.querySelector('salla-product-size-guide').open(123456)}>Size guide</button>
    </>
  );
}

MethodsCopy Anchor Link

Call these on the element or a React ref.

close() => Promise<HTMLElement>Copy Anchor Link

Closes the size-guide modal.

Returns Promise<HTMLElement>: A Promise that resolves to the inner modal element.

open(product_id: number) => Promise<any>Copy Anchor Link

Opens the size-guide modal, then loads and shows the size guides of the product.

Returns Promise<any>: A Promise that resolves when the loading has finished (successfully or with an error shown in the modal), with no value.

SlotsCopy Anchor Link

RelatedCopy Anchor Link

Renders: <salla-placeholder>, <salla-modal>, <salla-skeleton>, <salla-tabs>, <salla-tab-header>, <salla-tab-content>.