Widget Library
The Widget Library is your central place for customizing all UI elements of your app. Here you’ll find every button, every input field and every card - with full control over the appearance.
Overview
Section titled “Overview”The widgets are organized into categories. You can either show all or filter by category.
Categories
Section titled “Categories”| Category | Widgets | Description |
|---|---|---|
| All | 23 Widgets | Shows all available widgets |
| Buttons | 5 | Interactive buttons |
| Inputs | 6 | Form elements |
| Cards | 3 | Content containers |
| Feedback | 4 | Notifications and dialogs |
| Navigation | 1 | Navigation elements |
| Lists | 1 | List items |
| Indicators | 2 | Loading and progress indicators |
| Chips | 1 | Compact info elements |
Widget Cards
Section titled “Widget Cards”Each widget is displayed as a card with:
- Preview: Shows the widget with current settings
- Name: Widget designation
- Category: Associated category as badge
- Edit Button: Opens the detailed editor
Tap on a card or the edit button to open the editor.
Buttons
Section titled “Buttons”Buttons are the most important interactive elements. BLOCQ offers five button types:
The main call-to-action button:
- Most prominent button
- For most important actions (Save, Submit, etc.)
- Filled with primary color by default
Alternative actions:
- Less prominent than primary button
- For “Cancel”, “Later”, etc.
- Often designed as outline button
Minimalist button:
- Text only, no background
- For less important actions
- Links in text, “Learn more”, etc.
Button with icon only:
- Compact and space-saving
- For toolbar actions
- Examples: Share, Favorite, Menu
Floating action button:
- Prominently positioned (usually bottom right)
- For the most important action of a page
- Round with icon, optionally with text (Extended FAB)
Inputs
Section titled “Inputs”Input elements for forms and user interaction:
Text field for user input:
- Single-line or multi-line
- With label, placeholder, icons
- Various states (Normal, Focus, Error, Disabled)
Selection field with option list:
- Click opens menu with options
- Single selection
- Customizable menu styling
Checkbox:
- On/Off state
- For multiple selection
- Customizable colors and animation
Radio buttons:
- Single selection from a group
- Round selection elements
- Customizable colors and size
Switch for On/Off:
- Visually as toggle
- For settings
- Customizable track and thumb colors
Date selection:
- Calendar interface
- Customizable colors and style
- Configurable header and buttons
Containers for related content:
Standard card:
- Flexible container
- Customizable background color, border, shadow
- For general content
Elevated card:
- Stronger shadow
- Stands out from background
- For important content
Outlined card:
- Border instead of shadow
- Flat design
- For lists and galleries
Feedback
Section titled “Feedback”Elements for user feedback:
Modal windows:
- For important decisions
- Title, content, buttons
- Customizable size and corners
Bottom slide-up panel:
- Appears from bottom
- For actions and forms
- With handle for dragging
Brief notification:
- Appears briefly at bottom
- For confirmations and notices
- With optional action
Help text on hover/long press:
- Explains elements
- Appears with delay
- Automatic positioning
Navigation
Section titled “Navigation”Tab navigation:
- Horizontal tabs
- For section navigation
- Customizable indicators and colors
List item:
- Standard list element
- Leading icon, title, subtitle
- Trailing widget (icon, switch, etc.)
Indicators
Section titled “Indicators”Progress display:
- Linear or circular
- Determinate or indeterminate progress
- Customizable colors and thickness
Loading animation:
- For waiting times
- Various animation styles
- Customizable size and color
Compact info elements:
- Tags, filters, actions
- Optional with icon
- Customizable size and style
Editor Structure
Section titled “Editor Structure”Each widget editor follows the same structure:
Preview Area
Section titled “Preview Area”- Shows the widget with current settings
- State selection (Normal, Focus, Error, Disabled)
- Light/Dark Mode toggle
Most editors have four tabs:
| Tab | Content |
|---|---|
| Appearance | Colors, borders, shadows, gradients |
| Layout | Sizes, spacing, font |
| States | Colors for different states |
| Advanced | Special settings, animations |
Actions
Section titled “Actions”- Save: Save changes to database
- Save as Template: Save design as template
- Reset: Reset widget to default values
- Copy Style: Transfer settings to other widgets
Frequently Asked Questions
Section titled “Frequently Asked Questions”Can I reset widgets to default values?
Section titled “Can I reset widgets to default values?”Yes, each editor has a “Reset” button. It only resets the current widget, not all.
Are my widget changes applied everywhere?
Section titled “Are my widget changes applied everywhere?”Yes, the settings apply to all instances of this widget type throughout the entire app.
What is the difference between Appearance and States?
Section titled “What is the difference between Appearance and States?”- Appearance: Basic colors and styles
- States: Colors for special states (Focus, Error, etc.)
Can I add custom widgets?
Section titled “Can I add custom widgets?”No, the widget library contains predefined widgets. However, you can fully customize their appearance.