Appearance
UI Elements
Welcome to the UI Elements documentation! This section provides detailed information about all the UI elements available in WeWeb. Each element is designed to help you build beautiful and functional web applications without writing code.
Getting Started
To use any of these elements in your WeWeb application:
- Open the Add panel in your project
- Find the element you want to use
- Drag and drop it onto your canvas
- Customize its properties and styling
Each element comes with its own set of properties and customization options. Click on any element below to learn more about its specific features and how to use it effectively in your projects.
Navigation Elements
- Top Navigation Bar - Create responsive top navigation menus
- Bottom Navigation - Build mobile-friendly bottom navigation
- Side Menu - Add collapsible side menus
- Breadcrumb New - Show hierarchical navigation paths
Layout Elements
- Container - Basic container for organizing content
- Flexbox Container - Create flexible layouts
- Columns - Build multi-column layouts
- Sections - Organize page sections
- Div - Generic container element
Form Elements
- Form Container - Group form elements together
- Input - Text input fields
- Button - Clickable buttons
- Checkbox - Toggle options
- Radio Group - Select one option from many
- Select & Multi-select - Dropdown selection
- File Upload New - Handle file uploads
- Range Input - Slider controls
- Color Picker - Color selection
- Date Pickers - Date selection
- QR Code Reader - Scan QR codes
Display Elements
- Text - Display text content
- Heading - Create headings
- Image - Show images
- Icon - Display icons
- Video - Embed videos
- Code - Display code snippets
- Rich Text - Formatted text content
- Table - Display tabular data
- List - Create lists
- Timeline New - Show chronological content
Interactive Elements
- Dialog (Modal, Alert, Sheet) - Create popups and modals
- Accordion - Collapsible content sections
- Dropdown - Dropdown menus
- Autocomplete - Searchable dropdowns
- Search - Search functionality
- Content Slider - Slide through content
- Image Slider - Image carousels
- Infinite Slider - Continuous scrolling
- Reorder List - Drag-and-drop reordering
- Kanban - Kanban board interface
- Progress Bar - Show progress
- Donut Progress Bar - Circular progress indicators
- Skeleton Loader New - Loading placeholders
- Loader - Loading indicators
Data Display Elements
Utility Elements
- Iframe - Embed external content
- Language - Language selection
- Masked - Input masking
- Recaptcha - Add CAPTCHA verification
- Paginator - Pagination controls
Deprecated Elements Deprecated
- Alert - Notification alerts
- Calendar - Display calendar views
- Drag and Drop Files - Interactive file uploads
- Data Grid - Display and manage data