Documentation
¶
Overview ¶
Package components provides pre-built UI components for BubblyUI.
This package contains 30+ ready-to-use components organized by complexity:
- Atoms: Basic building blocks (Button, Badge, Icon, Spinner, Text, Toggle)
- Molecules: Composite components (Input, Select, Card, List, Menu, Tabs)
- Organisms: Complex components (Table, Form, Modal)
- Templates: Page layouts (PageLayout, AppLayout, PanelLayout, GridLayout)
- Layout: Flexbox-inspired containers (Flex, HStack, VStack, Box, Center)
This package is an alias for github.com/newbpydev/bubblyui/pkg/components, providing a cleaner import path for users.
Example ¶
import "github.com/newbpydev/bubblyui/components"
func template(ctx bubblyui.RenderContext) string {
return components.VStack(components.StackProps{
Children: []bubbly.Component{
components.Text(components.TextProps{Content: "Hello!"}),
components.Button(components.ButtonProps{Label: "Click Me"}),
},
}).View()
}
Index ¶
- Constants
- Variables
- func Form[T any](props FormProps[T]) bubbly.Component
- func List[T any](props ListProps[T]) bubbly.Component
- func Radio[T any](props RadioProps[T]) bubbly.Component
- func Select[T any](props SelectProps[T]) bubbly.Component
- func Table[T any](props TableProps[T]) bubbly.Component
- type AccordionItem
- type AccordionProps
- type AlignItems
- type Alignment
- type AppLayoutProps
- type BadgeProps
- type BoxProps
- type ButtonProps
- type CardProps
- type CenterProps
- type CheckboxProps
- type ContainerProps
- type DividerProps
- type FlexDirection
- type FlexProps
- type FormProps
- type GridLayoutProps
- type IconProps
- type InputProps
- type JustifyContent
- type ListProps
- type MenuProps
- type ModalProps
- type PageLayoutProps
- type PanelLayoutProps
- type RadioProps
- type SelectProps
- type SpacerProps
- type SpinnerProps
- type StackProps
- type TableProps
- type TabsProps
- type TextAreaProps
- type TextProps
- type Theme
- type ToggleProps
Constants ¶
const ( AlignLeft = components.AlignLeft AlignCenter = components.AlignCenter AlignRight = components.AlignRight )
Alignment constants.
const ( AlignItemsStart = components.AlignItemsStart AlignItemsCenter = components.AlignItemsCenter AlignItemsEnd = components.AlignItemsEnd AlignItemsStretch = components.AlignItemsStretch )
AlignItems constants.
const ( JustifyStart = components.JustifyStart JustifyCenter = components.JustifyCenter JustifyEnd = components.JustifyEnd JustifySpaceBetween = components.JustifySpaceBetween JustifySpaceAround = components.JustifySpaceAround JustifySpaceEvenly = components.JustifySpaceEvenly )
JustifyContent constants.
const ( FlexRow = components.FlexRow FlexColumn = components.FlexColumn )
FlexDirection constants.
const ( CheckboxChecked = components.CheckboxChecked CheckboxUnchecked = components.CheckboxUnchecked )
Checkbox characters.
const ( DefaultHorizontalChar = components.DefaultHorizontalChar DefaultHStackDividerChar = components.DefaultHStackDividerChar DefaultVStackDividerChar = components.DefaultVStackDividerChar )
Divider characters.
const DefaultStackSpacing = components.DefaultStackSpacing
Default stack spacing.
Variables ¶
var Accordion = components.Accordion
Accordion creates an accordion component.
var AppLayout = components.AppLayout
AppLayout creates a full application layout with header/sidebar/content.
var Badge = components.Badge
Badge creates a label/tag component.
var Box = components.Box
Box creates a container with padding and borders.
var Button = components.Button
Button creates a clickable button component.
var Card = components.Card
Card creates a card container component.
var Center = components.Center
Center creates a centering container component.
var Checkbox = components.Checkbox
Checkbox creates a checkbox component.
var Container = components.Container
Container creates a width-constrained container.
var DarkTheme = components.DarkTheme
DarkTheme is a dark color theme.
var DefaultTheme = components.DefaultTheme
DefaultTheme is the default component theme.
var Divider = components.Divider
Divider creates a visual separator.
var Flex = components.Flex
Flex creates a flexible container component.
var GridLayout = components.GridLayout
GridLayout creates a grid-based layout.
var HStack = components.HStack
HStack creates a horizontal stack component.
var HighContrastTheme = components.HighContrastTheme
HighContrastTheme is a high-contrast accessibility theme.
var Icon = components.Icon
Icon creates an icon component.
var Input = components.Input
Input creates a text input component.
var LightTheme = components.LightTheme
LightTheme is a light color theme.
var Menu = components.Menu
Menu creates a menu component.
var Modal = components.Modal
Modal creates a modal dialog component.
var PageLayout = components.PageLayout
PageLayout creates a standard page layout.
var PanelLayout = components.PanelLayout
PanelLayout creates a panel-based layout.
var Spacer = components.Spacer
Spacer creates flexible spacing.
var Spinner = components.Spinner
Spinner creates a loading spinner component.
var Tabs = components.Tabs
Tabs creates a tabbed interface component.
var Text = components.Text
Text creates a text display component.
var TextArea = components.TextArea
TextArea creates a multi-line text input component.
var Toggle = components.Toggle
Toggle creates a toggle/switch component.
var VStack = components.VStack
VStack creates a vertical stack component.
Functions ¶
func Radio ¶
func Radio[T any](props RadioProps[T]) bubbly.Component
Radio creates a radio button group component.
Types ¶
type AccordionItem ¶
type AccordionItem = components.AccordionItem
AccordionItem represents a single accordion item.
type AccordionProps ¶
type AccordionProps = components.AccordionProps
AccordionProps configures an Accordion component.
type AlignItems ¶
type AlignItems = components.AlignItems
AlignItems specifies cross-axis alignment in flex containers.
type AppLayoutProps ¶
type AppLayoutProps = components.AppLayoutProps
AppLayoutProps configures an AppLayout component.
type ButtonProps ¶
type ButtonProps = components.ButtonProps
ButtonProps configures a Button component.
type CenterProps ¶
type CenterProps = components.CenterProps
CenterProps configures a Center component.
type CheckboxProps ¶
type CheckboxProps = components.CheckboxProps
CheckboxProps configures a Checkbox component.
type ContainerProps ¶
type ContainerProps = components.ContainerProps
ContainerProps configures a Container component.
type DividerProps ¶
type DividerProps = components.DividerProps
DividerProps configures a Divider component.
type FlexDirection ¶
type FlexDirection = components.FlexDirection
FlexDirection specifies the direction of flex items.
type FormProps ¶
type FormProps[T any] = components.FormProps[T]
FormProps configures a Form component.
type GridLayoutProps ¶
type GridLayoutProps = components.GridLayoutProps
GridLayoutProps configures a GridLayout component.
type JustifyContent ¶
type JustifyContent = components.JustifyContent
JustifyContent specifies main-axis alignment in flex containers.
type ListProps ¶
type ListProps[T any] = components.ListProps[T]
ListProps configures a List component.
type PageLayoutProps ¶
type PageLayoutProps = components.PageLayoutProps
PageLayoutProps configures a PageLayout component.
type PanelLayoutProps ¶
type PanelLayoutProps = components.PanelLayoutProps
PanelLayoutProps configures a PanelLayout component.
type RadioProps ¶
type RadioProps[T any] = components.RadioProps[T]
RadioProps configures a Radio component.
type SelectProps ¶
type SelectProps[T any] = components.SelectProps[T]
SelectProps configures a Select component.
type SpacerProps ¶
type SpacerProps = components.SpacerProps
SpacerProps configures a Spacer component.
type SpinnerProps ¶
type SpinnerProps = components.SpinnerProps
SpinnerProps configures a Spinner component.
type StackProps ¶
type StackProps = components.StackProps
StackProps configures HStack and VStack components.
type TableProps ¶
type TableProps[T any] = components.TableProps[T]
TableProps configures a Table component.
type TextAreaProps ¶
type TextAreaProps = components.TextAreaProps
TextAreaProps configures a TextArea component.
type ToggleProps ¶
type ToggleProps = components.ToggleProps
ToggleProps configures a Toggle component.
Source Files