0.0.1 • Published 7 months ago
@tailus/themer-select v0.0.1
Select Component Theme
Overview
The select component theme is a collection of Tailwindcss utilities that can be used to create select components with different colors and styles. Select components are used to allow users to select a single value from a list of values.
Installation
To install the select component theme, run the following command:
npm install @tailus/themer-select
Import
To import the select component theme, you can use the following import:
import { select } from "@tailus/themer-select";
Example
Radix UI
import React from "react";
import * as Select from "@radix-ui/react-select";
import classnames from "classnames";
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
import { select as selectTheme } from "@tailus/themer-select";
const SelectUI = () => (
<Select.Root>
<Select.Trigger className={formTheme.input} aria-label="Food">
<Select.Value placeholder="Select a fruit…" />
<Select.Icon>
<ChevronDownIcon className={formTheme.input.icon} />
</Select.Icon>
</Select.Trigger>
<Select.Portal>
<Select.Content className={selectTheme.content}>
<Select.ScrollUpButton className={selectTheme.scrollButton}>
<ChevronUpIcon />
</Select.ScrollUpButton>
<Select.Viewport className={selectTheme.viewport}>
<Select.Group>
<Select.Label className={selectTheme.label}>Fruits</Select.Label>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="blueberry">Blueberry</SelectItem>
<SelectItem value="grapes">Grapes</SelectItem>
<SelectItem value="pineapple">Pineapple</SelectItem>
</Select.Group>
<Select.Separator className={selectTheme.separator} />
<Select.Group>
<Select.Label className={selectTheme.label}>Vegetables</Select.Label>
<SelectItem value="aubergine">Aubergine</SelectItem>
<SelectItem value="broccoli">Broccoli</SelectItem>
<SelectItem value="carrot" disabled>
Carrot
</SelectItem>
<SelectItem value="courgette">Courgette</SelectItem>
<SelectItem value="leek">Leek</SelectItem>
</Select.Group>
<Select.Separator className={selectTheme.separator} />
<Select.Group>
<Select.Label className={selectTheme.label}>Meat</Select.Label>
<SelectItem value="beef">Beef</SelectItem>
<SelectItem value="chicken">Chicken</SelectItem>
<SelectItem value="lamb">Lamb</SelectItem>
<SelectItem value="pork">Pork</SelectItem>
</Select.Group>
</Select.Viewport>
<Select.ScrollDownButton className={selectTheme.scrollButton}>
<ChevronDownIcon />
</Select.ScrollDownButton>
</Select.Content>
</Select.Portal>
</Select.Root>
);
const SelectItem = React.forwardRef(({ children, className, ...props }: any, forwardedRef) => {
return (
<Select.Item
className={classnames(selectTheme.item, className)}
{...props}
ref={forwardedRef}
>
<Select.ItemText>{children}</Select.ItemText>
<Select.ItemIndicator className={selectTheme.itemIndicator}>
<CheckIcon />
</Select.ItemIndicator>
</Select.Item>
);
});
export default SelectUI;
Properties
The select object contains the following properties:
viewport
: The Tailwindcss utility for the viewport of the select component.content
: The Tailwindcss utility for the content of the select component.scrollButton
: The Tailwindcss utility for the scroll buttons of the select component.item
: The Tailwindcss utility for the items in the select component.itemIndicator
: The Tailwindcss utility for the item indicator in the select component.separator
: The Tailwindcss utility for the separators between items in the select component.label
: The Tailwindcss utility for the label of a select fieldset.triggerIcon
: The Tailwindcss utility for the trigger icon of the select component.
Customization
Following properties can be customized :
- dark background : background ont dark theme
- shadow : same as all
menu
component (context and dropdown), - light border color : same as all
menu
component (context and dropdown), - dark border color : same as all
menu
component (context and dropdown),
tailus: {
components: {
flag: {
darkBackground : "",
},
},
},
0.0.1
7 months ago