RankingFabric component

Component for rendering a ranking question type.

📝 Signature

RankingFabric(props: {
  styles: {
    color: string;
    outlineSize?: number;
    roundness?: number;
    scale?: number;
    margin?: number;
  };
  options: IRankingOption[];
  slots: Value[];
  disabled?: boolean;
  readOnly?: boolean;
  ariaDescribedBy?: string;
  tabIndex?: number;
  onFocus?: (e: FocusEvent) => void;
  onBlur?: (e: FocusEvent) => void;
  onAutoFocus?: (el: HTMLInputElement | null) => void;
  onSubmit?: () => void;
  onCancel?: () => void;
}): JSX.Element

📇 Props

Name	Type	Optional	Description
styles	object	No	Specifies the styles for the options. Supports the following styles: - color: Base color for the options; - outlineSize: Optional outline size in pixels for the options; - roundness: Optional roundness in pixels for the options; - scale: Optional scale factor for the options (defaults to 1); - margin: Optional margin in pixels in between the options.
options	IRankingOption[]	No	Specifies the options (see IRankingOption).
slots	Value[]	Yes	Specifies the value slots. The number of supplied slots determines the number of possible ranking positions. Each position can hold one selected option.
disabled	boolean	Yes	Specifies if the component is disabled.
readOnly	boolean	Yes	Specifies if the component is read-only.
ariaDescribedBy	string	Yes	Specifies the aria-describedby identifier of the element that describes the component.
tabIndex	number	Yes	Specifies the tabindex for the component.
onFocus	(e: FocusEvent) => void	Yes	Invoked when the component gets focus.
onBlur	(e: FocusEvent) => void	Yes	Invoked when the component loses focus.
onAutoFocus	(el: HTMLInputElement | null) => void	Yes	Invoked when the HTML element of the component is available for auto-focus.
onSubmit	() => void	Yes	Invoked when the user presses the Shift + Enter key combination or the Tab key (this event is often used to go to the next input control in a form).
onCancel	() => void	Yes	Invoked when the user presses the Shift + Tab key combination (this event is often used to go to the previous input control in a form).

↩️ Return value

Returns the JSX.Element for the component.

👩‍💻 Example

import { RankingFabric } from "@tripetto/runner-fabric/components/ranking";
import { useOverlay } from "@tripetto/runner-fabric/overlay";

const RankingExample = () => (
  <RankingFabric
    styles={{
      backgroundColor: "white",
      borderColor: "black",
      errorColor: "red"
    }}
    options={[
      {
        id: "1",
        name: "Option 1"
      },
      {
        id: "2",
        name: "Option 2"
      }
    ]}
  />
);

⛓️ Interfaces

---

🔗 IRankingOption

Describes the interface for an ranking option.

Type declaration

interface IRankingOption {
  /* Identifier for the option. */
  id: string;

  /* Name for the option. */
  name: string;

  /* Label for the option. */
  label?: string | JSX.Element;

  /* Description for the option. */
  description?: string | JSX.Element;

  /* Value for the option. */
  value?: Value;
}