Pinwheel Compound

Used to select options.

Importing

To use the pinwheel component, first you need to register the component inside the page. You can register the component manually by importing the register function:

Web (Option 1)

import { register } from "@tapsioss/web-components/pinwheel";

register(); // Now the pinwheel component is ready to use!

Web (Option 2)

import { registerPinwheel } from "@tapsioss/web-components";

registerPinwheel(); // Now the pinwheel component is ready to use!

Also you can automatically register the component by importing it with the following approach:

Web

import "@tapsioss/web-components/pinwheel/element";

TIP

If you want to use all the component in your app, you can call registerAll at the root of your project.

import { registerAll } from "@tapsioss/web-components";

registerAll(); // All the components are now available

INFO

By registering the pinwheel component, its compound parts will also be registered:

• tapsi-pinwheel-item

In the React package, you can easily add the component using the following code:

React

import { Pinwheel } from "@tapsioss/react-components";

Component Usage

Web

<tapsi-pinwheel></tapsi-pinwheel>

React

<Pinwheel />

Properties

Name	Attribute Name	Description	Type	Default Value
valueMin	valuemin	Defines the minimum allowed value for pinwheel. Use it when your items' values are sequential numbers. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemin	string	""
valueMax	valuemax	Defines the maximum allowed value for pinwheel. Use it when your items' values are sequential numbers. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuemax	string	""
label	label	Defines a string value that can be used to name input. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label	string	""
labelledBy	labelledby	Identifies the element (or elements) that labels the input. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby	string	""
autofocus	autofocus	Indicates that the element should be focused on page load. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus	boolean	false
selectedItem	-	The selected pinwheel item.	PinwheelItem | null	-
value	-	The value of the pinwheel.	string	-

Methods

Name	Description	Parameters
setViewOnItem	Sets the scroll view on the provided item.	Name: item Type: (PinwheelItem): The item to set the view on.

Slots

Name	Value	Description
DEFAULT	-	The default slot for the content.

TIP

The value of slots are available for developer as JavaScript Variables:

Web

// Option 1
import { PinwheelSlots, PinwheelItemSlots } from "@tapsioss/web-components";

// Option 2
import { Slots, ItemSlots } from "@tapsioss/web-components/pinwheel";

React

// Option 1
import { PinwheelSlots, PinwheelItemSlots } from "@tapsioss/react-components";

// Option 2
import { Slots, ItemSlots } from "@tapsioss/react-components/Pinwheel";

Events

Name	Description	Type	Bubbles	Cancelable
change	Fires when the pinwheel selected state changes.	Event	✅	❌

Compound Parts

Item

The item part of the Pinwheel component.

Importing

By registering the parent component, the pinwheel item will also be registered.

In the React package, you can easily add the component using the following code:

React

import { PinwheelItem } from "@tapsioss/react-components";

Component Usage

Web

<tapsi-pinwheel-item></tapsi-pinwheel-item>

React

<PinwheelItem />

Properties

Name	Attribute Name	Description	Type	Default Value
selected	selected	Indicates whether the item is selected or not.	boolean	false
value	value	The value associated with the item. This value has to be unique among sibling items.	string	""

Methods

Name	Description	Parameters
click	-

Slots

Name	Value	Description
DEFAULT	-	The default slot for the content.