365 lines
No EOL
7.4 KiB
Markdown
365 lines
No EOL
7.4 KiB
Markdown
# Blueprint Components
|
|
|
|
Blueprint provides a rich set of components for building modern web interfaces. Each component is designed to be responsive, accessible, and consistent with the dark theme.
|
|
|
|
## Layout Components
|
|
|
|
### Section
|
|
Container for page sections:
|
|
```blueprint
|
|
section(wide, centered) {
|
|
// Content
|
|
}
|
|
```
|
|
Properties:
|
|
- `wide`: Full width with max-width constraint (1200px)
|
|
- `centered`: Center content horizontally and vertically
|
|
- `alternate`: Alternate background color
|
|
- `padding`: Custom padding in pixels
|
|
- `margin`: Custom margin in pixels
|
|
|
|
### Grid
|
|
Responsive grid layout:
|
|
```blueprint
|
|
grid(columns:3) {
|
|
// Grid items
|
|
}
|
|
```
|
|
Properties:
|
|
- `columns`: Number of columns (default: auto-fit)
|
|
- `responsive`: Enable responsive behavior
|
|
- `gap`: Custom gap size between items
|
|
- `width`: Custom width in percentage
|
|
|
|
### Horizontal
|
|
Horizontal flex container:
|
|
```blueprint
|
|
horizontal(centered, spaced) {
|
|
// Horizontal items
|
|
}
|
|
```
|
|
Properties:
|
|
- `centered`: Center items vertically
|
|
- `spaced`: Space between items
|
|
- `gap`: Custom gap size
|
|
- `width`: Custom width in percentage
|
|
- `responsive`: Wrap items on small screens
|
|
|
|
### Vertical
|
|
Vertical flex container:
|
|
```blueprint
|
|
vertical(centered) {
|
|
// Vertical items
|
|
}
|
|
```
|
|
Properties:
|
|
- `centered`: Center items horizontally
|
|
- `spaced`: Space between items
|
|
- `gap`: Custom gap size
|
|
- `width`: Custom width in percentage
|
|
|
|
## Typography
|
|
|
|
### Title
|
|
Page or section titles:
|
|
```blueprint
|
|
title(huge) { "Main Title" }
|
|
title(large) { "Section Title" }
|
|
```
|
|
Properties:
|
|
- `huge`: Very large size (4rem)
|
|
- `large`: Large size (2rem)
|
|
- `bold`: Bold weight
|
|
- `centered`: Center align
|
|
- `color`: Custom text color
|
|
|
|
### Text
|
|
Regular text content:
|
|
```blueprint
|
|
text(large) { "Large text" }
|
|
text(subtle) { "Subtle text" }
|
|
```
|
|
Properties:
|
|
- `large`: Larger size
|
|
- `small`: Smaller size (0.875rem)
|
|
- `subtle`: Muted color
|
|
- `bold`: Bold weight
|
|
- `color`: Custom text color
|
|
|
|
## Navigation
|
|
|
|
### Navbar
|
|
Fixed navigation bar:
|
|
```blueprint
|
|
navbar {
|
|
horizontal {
|
|
text(bold) { "Brand" }
|
|
links {
|
|
link(href:home) { "Home" }
|
|
link(href:about) { "About" }
|
|
}
|
|
}
|
|
}
|
|
```
|
|
Properties:
|
|
- `sticky`: Fixed to top
|
|
- `transparent`: Transparent background
|
|
- `backgroundColor`: Custom background color
|
|
|
|
### Links
|
|
Navigation link group:
|
|
```blueprint
|
|
links {
|
|
link(href:page1) { "Link 1" }
|
|
link(href:page2) { "Link 2" }
|
|
}
|
|
```
|
|
Properties:
|
|
- `spaced`: Add spacing between links
|
|
- `vertical`: Vertical orientation
|
|
- `gap`: Custom gap size
|
|
|
|
### Link
|
|
Individual link:
|
|
```blueprint
|
|
link(href:page, text:"Click here") { }
|
|
link(href:https://example.com) { "External Link" }
|
|
```
|
|
Properties:
|
|
- `href`: Target URL or page
|
|
- `text`: Link text (optional)
|
|
- `external`: Open in new tab (automatic for http/https URLs)
|
|
- `color`: Custom text color
|
|
|
|
## Interactive Components
|
|
|
|
### Button
|
|
Various button styles:
|
|
```blueprint
|
|
button { "Primary" }
|
|
button-secondary { "Secondary" }
|
|
button-light { "Light" }
|
|
button-compact { "Compact" }
|
|
```
|
|
Properties:
|
|
- `disabled`: Disabled state
|
|
- `width`: Custom width in percentage
|
|
- `backgroundColor`: Custom background color
|
|
- `color`: Custom text color
|
|
|
|
### Card
|
|
Content container with hover effect:
|
|
```blueprint
|
|
card {
|
|
title { "Card Title" }
|
|
text { "Card content" }
|
|
button { "Action" }
|
|
}
|
|
```
|
|
Properties:
|
|
- `raised`: Add shadow and hover effect
|
|
- `width`: Custom width in percentage
|
|
- `padding`: Custom padding in pixels
|
|
- `backgroundColor`: Custom background color
|
|
|
|
### Badge
|
|
Status indicators:
|
|
```blueprint
|
|
badge { "New" }
|
|
badge(color:blue) { "Status" }
|
|
```
|
|
Properties:
|
|
- `color`: Custom badge color
|
|
- `backgroundColor`: Custom background color
|
|
- `width`: Custom width in percentage
|
|
|
|
### Alert
|
|
Notification messages:
|
|
```blueprint
|
|
alert(type:info) { "Information message" }
|
|
```
|
|
Properties:
|
|
- `type`: info, success, warning, error
|
|
- `backgroundColor`: Custom background color
|
|
- `color`: Custom text color
|
|
- `width`: Custom width in percentage
|
|
|
|
### Tooltip
|
|
Hover tooltips:
|
|
```blueprint
|
|
tooltip(text:"More info") {
|
|
text { "Hover me" }
|
|
}
|
|
```
|
|
Properties:
|
|
- `text`: Tooltip text
|
|
- `position`: top, right, bottom, left
|
|
- `backgroundColor`: Custom background color
|
|
- `color`: Custom text color
|
|
|
|
## Form Elements
|
|
|
|
### Input
|
|
Text input field:
|
|
```blueprint
|
|
input(placeholder:"Type here") { }
|
|
```
|
|
Properties:
|
|
- `placeholder`: Placeholder text
|
|
- `type`: Input type (text, email, password, etc.)
|
|
- `required`: Required field
|
|
- `disabled`: Disabled state
|
|
- `width`: Custom width in percentage
|
|
|
|
### Textarea
|
|
Multi-line text input:
|
|
```blueprint
|
|
textarea(placeholder:"Enter message") { }
|
|
```
|
|
Properties:
|
|
- `placeholder`: Placeholder text
|
|
- `rows`: Number of visible rows
|
|
- `required`: Required field
|
|
- `width`: Custom width in percentage
|
|
|
|
### Select
|
|
Dropdown selection:
|
|
```blueprint
|
|
select {
|
|
option { "Option 1" }
|
|
option { "Option 2" }
|
|
}
|
|
```
|
|
Properties:
|
|
- `placeholder`: Placeholder text
|
|
- `required`: Required field
|
|
- `disabled`: Disabled state
|
|
- `width`: Custom width in percentage
|
|
|
|
### Checkbox
|
|
Checkbox input:
|
|
```blueprint
|
|
horizontal {
|
|
checkbox { }
|
|
text { "Accept terms" }
|
|
}
|
|
```
|
|
Properties:
|
|
- `checked`: Default checked state
|
|
- `required`: Required field
|
|
- `disabled`: Disabled state
|
|
- `width`: Custom width in percentage
|
|
|
|
### Radio
|
|
Radio button input:
|
|
```blueprint
|
|
vertical {
|
|
horizontal {
|
|
radio(name:"choice") { }
|
|
text { "Option 1" }
|
|
}
|
|
horizontal {
|
|
radio(name:"choice") { }
|
|
text { "Option 2" }
|
|
}
|
|
}
|
|
```
|
|
Properties:
|
|
- `name`: Group name
|
|
- `checked`: Default checked state
|
|
- `disabled`: Disabled state
|
|
- `width`: Custom width in percentage
|
|
|
|
### Switch
|
|
Toggle switch:
|
|
```blueprint
|
|
horizontal {
|
|
switch { }
|
|
text { "Enable feature" }
|
|
}
|
|
```
|
|
Properties:
|
|
- `checked`: Default checked state
|
|
- `disabled`: Disabled state
|
|
- `width`: Custom width in percentage
|
|
|
|
## Container Components
|
|
|
|
### List
|
|
Ordered or unordered lists:
|
|
```blueprint
|
|
list {
|
|
text { "Item 1" }
|
|
text { "Item 2" }
|
|
}
|
|
```
|
|
Properties:
|
|
- `ordered`: Use ordered list
|
|
- `bullet`: Show bullets
|
|
- `spaced`: Add spacing
|
|
- `width`: Custom width in percentage
|
|
|
|
### Table
|
|
Data tables:
|
|
```blueprint
|
|
table {
|
|
row {
|
|
cell { "Header 1" }
|
|
cell { "Header 2" }
|
|
}
|
|
row {
|
|
cell { "Data 1" }
|
|
cell { "Data 2" }
|
|
}
|
|
}
|
|
```
|
|
Properties:
|
|
- `striped`: Alternate row colors
|
|
- `bordered`: Add borders
|
|
- `compact`: Reduced padding
|
|
- `width`: Custom width in percentage
|
|
|
|
### Progress
|
|
Progress indicators:
|
|
```blueprint
|
|
progress(value:75, max:100) { }
|
|
```
|
|
Properties:
|
|
- `value`: Current value
|
|
- `max`: Maximum value
|
|
- `indeterminate`: Loading state
|
|
- `width`: Custom width in percentage
|
|
|
|
### Slider
|
|
Range input:
|
|
```blueprint
|
|
slider(min:0, max:100, value:50) { }
|
|
```
|
|
Properties:
|
|
- `min`: Minimum value
|
|
- `max`: Maximum value
|
|
- `step`: Step increment
|
|
- `disabled`: Disabled state
|
|
- `width`: Custom width in percentage
|
|
|
|
### Media
|
|
Images and videos with responsive behavior:
|
|
```blueprint
|
|
media(src:/path/to/image.jpg) { "Image description" }
|
|
media(src:https://example.com/video.mp4, type:video) { "Video description" }
|
|
```
|
|
Properties:
|
|
- `src`: URL or path to the media file (required)
|
|
- `type`: Media type (`img` or `video`, defaults to `img`)
|
|
- `width`: Custom width in percentage
|
|
- `height`: Custom height in percentage
|
|
- `padding`: Custom padding in pixels
|
|
- `margin`: Custom margin in pixels
|
|
|
|
The media component automatically:
|
|
- Scales images/videos responsively (max-width: 100%)
|
|
- Maintains aspect ratio (height: auto)
|
|
- Adds rounded corners
|
|
- Includes a subtle hover effect
|
|
- Uses the content as alt text for images
|
|
- Adds video controls when type is video |