Documentation
¶
Overview ¶
Package selectc provides select dropdown components matching shadcn/ui design.
Index ¶
- func NativeSelect(options []NativeSelectOption, opts ...SelectOption) g.Node
- func Select(opts []SelectOption, children ...g.Node) g.Node
- func SelectContent(opts []SelectContentOption, children ...g.Node) g.Node
- func SelectGroup(children ...g.Node) g.Node
- func SelectItem(value string, label string, opts []SelectItemOption) g.Node
- func SelectLabel(text string, attrs ...g.Node) g.Node
- func SelectSeparator(attrs ...g.Node) g.Node
- func SelectTrigger(opts []SelectTriggerOption, children ...g.Node) g.Node
- func SelectValue(placeholder string, attrs ...g.Node) g.Node
- type NativeSelectOption
- type SelectContentOption
- type SelectContentProps
- type SelectItemOption
- type SelectItemProps
- type SelectOption
- type SelectProps
- type SelectSize
- type SelectTriggerOption
- type SelectTriggerProps
Constants ¶
This section is empty.
Variables ¶
This section is empty.
Functions ¶
func NativeSelect ¶
func NativeSelect(options []NativeSelectOption, opts ...SelectOption) g.Node
NativeSelect creates a native HTML select dropdown (for simpler use cases) This uses the browser's native select with custom styling
Example:
selectc.NativeSelect(
[]selectc.NativeSelectOption{
{Value: "us", Label: "United States"},
{Value: "uk", Label: "United Kingdom", Selected: true},
},
selectc.WithName("country"),
)
func Select ¶
func Select(opts []SelectOption, children ...g.Node) g.Node
Select creates an interactive select dropdown using Alpine.js This provides a custom styled select with full keyboard navigation
Example:
selectc.Select(
[]selectc.SelectOption{selectc.WithName("country")},
selectc.SelectTrigger(
selectc.SelectValue("Select a country"),
),
selectc.SelectContent(
selectc.SelectItem("us", "United States"),
selectc.SelectItem("uk", "United Kingdom"),
),
)
func SelectContent ¶
func SelectContent(opts []SelectContentOption, children ...g.Node) g.Node
SelectContent creates the dropdown content container
Example:
selectc.SelectContent(
nil,
selectc.SelectItem("apple", "Apple"),
selectc.SelectItem("banana", "Banana"),
)
func SelectGroup ¶
SelectGroup creates a group of related select items
Example:
selectc.SelectGroup(
selectc.SelectLabel("Fruits"),
selectc.SelectItem("apple", "Apple"),
selectc.SelectItem("banana", "Banana"),
)
func SelectItem ¶
func SelectItem(value string, label string, opts []SelectItemOption) g.Node
SelectItem creates a selectable option within the dropdown
Example:
selectc.SelectItem("us", "United States", nil)
selectc.SelectItem("uk", "United Kingdom", []selectc.SelectItemOption{selectc.WithItemDisabled()})
func SelectLabel ¶
SelectLabel creates a label for a select group
Example:
selectc.SelectLabel("Fruits")
func SelectSeparator ¶
SelectSeparator creates a visual separator between items
Example:
selectc.SelectSeparator()
func SelectTrigger ¶
func SelectTrigger(opts []SelectTriggerOption, children ...g.Node) g.Node
SelectTrigger creates the button that opens the select dropdown
Example:
selectc.SelectTrigger(
[]selectc.SelectTriggerOption{selectc.WithTriggerSize(selectc.SelectSizeSm)},
selectc.SelectValue("Select an option"),
)
Types ¶
type NativeSelectOption ¶
NativeSelectOption defines a native select option
type SelectContentOption ¶
type SelectContentOption func(*SelectContentProps)
SelectContentOption is a functional option for SelectContent
func WithContentAlign ¶
func WithContentAlign(align string) SelectContentOption
WithContentAlign sets the content alignment
func WithContentAttrs ¶
func WithContentAttrs(attrs ...g.Node) SelectContentOption
WithContentAttrs adds custom attributes to the content
func WithContentClass ¶
func WithContentClass(class string) SelectContentOption
WithContentClass adds custom classes to the content
func WithContentPosition ¶
func WithContentPosition(position string) SelectContentOption
WithContentPosition sets the content position
type SelectContentProps ¶
type SelectContentProps struct {
Position string // "item-aligned" or "popper"
Align string // "start", "center", "end"
Class string
Attrs []g.Node
}
SelectContentProps defines the dropdown content configuration
type SelectItemOption ¶
type SelectItemOption func(*SelectItemProps)
SelectItemOption is a functional option for SelectItem
func WithItemAttrs ¶
func WithItemAttrs(attrs ...g.Node) SelectItemOption
WithItemAttrs adds custom attributes to the item
func WithItemClass ¶
func WithItemClass(class string) SelectItemOption
WithItemClass adds custom classes to the item
type SelectItemProps ¶
SelectItemProps defines the item configuration
type SelectOption ¶
type SelectOption func(*SelectProps)
SelectOption is a functional option for Select
func WithAttrs ¶
func WithAttrs(attrs ...g.Node) SelectOption
WithAttrs adds custom attributes to the select
func WithClass ¶
func WithClass(class string) SelectOption
WithClass adds custom classes to the select
func WithDefaultValue ¶
func WithDefaultValue(value string) SelectOption
WithDefaultValue sets the default selected value
func WithName ¶
func WithName(name string) SelectOption
WithName sets the select name for form submission
type SelectProps ¶
type SelectProps struct {
Name string
ID string
DefaultValue string
Disabled bool
Required bool
Class string
Attrs []g.Node
}
SelectProps defines the select root configuration
type SelectSize ¶
type SelectSize string
SelectSize defines the size variants for the select trigger
const ( SelectSizeDefault SelectSize = "default" SelectSizeSm SelectSize = "sm" )
type SelectTriggerOption ¶
type SelectTriggerOption func(*SelectTriggerProps)
SelectTriggerOption is a functional option for SelectTrigger
func WithTriggerAttrs ¶
func WithTriggerAttrs(attrs ...g.Node) SelectTriggerOption
WithTriggerAttrs adds custom attributes to the trigger
func WithTriggerClass ¶
func WithTriggerClass(class string) SelectTriggerOption
WithTriggerClass adds custom classes to the trigger
func WithTriggerSize ¶
func WithTriggerSize(size SelectSize) SelectTriggerOption
WithTriggerSize sets the trigger size
type SelectTriggerProps ¶
type SelectTriggerProps struct {
Size SelectSize
Class string
Attrs []g.Node
}
SelectTriggerProps defines the trigger button configuration
Source Files