Current color value: {value().toString("hsl")}
-; -``` - -``` -Copytsx -import { createSignal } from "solid-js"; - -const [value, setValue] = createSignal(parseColor("hsl(0, 100%, 50%)")); -<> -Current color value: {value().toString("hsl")}
-; -``` - -### xChannel and yChannel - -The color channel for each axis of a color area can be specified using the `xChannel` and `yChannel` props. An array of channel names for a color can be returned using the color.getColorChannels method. - -Label - -``` -Copytsx -const [value, setValue] = createSignal(parseColor("rgb(100, 149, 237)")); -const [rChannel, gChannel, bChannel] = value().getColorChannels(); - -Your favorite fruits are: {values().join(", ")}.
- - ); -} -``` - -``` -Copytsx -import { createSignal } from "solid-js"; - -function MultipleSelectionExample() { - const [values, setValues] = createSignal(["Blueberry", "Grapes"]); - - return ( - <> -Your favorite fruits are: {values().join(", ")}.
- - ); -} -``` - -### Virtual scrolling - -When dealing with large collection of items, it's recommended to use a virtual scrolling solution to improve performance. - -While Kobalte doesn't provide any built-in virtual scrolling API, it can easily be integrated with a 3rd party library. The example below demonstrate how to virtualize an array of 100,000 options using the [`@tanstack/solid-virtual`](https://tanstack.com/virtual/v3) package. - -Select an item…Sort - -``` -Copytsx -import { Select } from "@kobalte/core/select"; -import { createVirtualizer } from "@tanstack/solid-virtual"; - -interface Item { - value: string; - label: string; - disabled: boolean; -} - -const options: Item[] = Array.from({ length: 100_000 }, (_, i) => ({ - value: `${i}`, - label: `Item #${i + 1}`, - disabled: false, -})); - -function SelectContent(props: { options: Item[] }) { - let listboxRef: HTMLUListElement | undefined; - - const virtualizer = createVirtualizer({ - count: props.options.length, - getScrollElement: () => listboxRef, - getItemKey: (index: number) => props.options[index].value, - estimateSize: () => 32, - enableSmoothScroll: false, - overscan: 5, - }); - - return ( -