Icon Block
Documentation: Icon Block Component
Overview
model
object, allowing for flexible integration into various parts of a web application.Model Documentation
model
object is used to configure the Icon Block Component. It defines the component's layout, content, and styling.Model Structure
String
A unique identifier for the section element, used to set the
id
attribute.String
Optional CSS class(es) for additional styling of the component.
String
Optional header text displayed at the top of the section.
Number
Controls the alignment of the header text (1 for left, 2 for center, 3 for right).
Number
Specifies the number of columns in the grid (1 to 4).
String
Background color for the section.
String
Color of the text within the section.
Array
An array of icon objects, each with:
String
Optional URL for the icon image.
Object
Optional image object with a
link
property.String
Optional header text for the icon.
String
Optional description text for the icon.
Example Model
{
"id": "icon-block",
"cssClass": "icon-block",
"header": "Our Key Features",
"alignment": 2,
"columns": 3,
"backgroundColor": "#f8f9fa",
"textColor": "#333",
"icons": [
{
"link": "https://example.com/icon1.png",
"header": "Feature One",
"text": "Description of feature one."
},
{
"link": "https://example.com/icon2.png",
"header": "Feature Two",
"text": "Description of feature two."
},
{
"link": "https://example.com/icon3.png",
"header": "Feature Three",
"text": "Description of feature three."
}
]
}
Component Structure
1.
2.
3.
HTML Template
JavaScript
Explanation
data
and props
to manage configuration, styling, and layout.Usage
1.
Register
iconblockdefault
in your Vue app.2.
Pass a configuration object to the component to define the layout, icons, and styling.
3.
The component handles the setup of layout and styles automatically based on the provided
model
.4.
Apply custom styles and adjust the configuration to fit your design needs.
Modified at 2024-08-27 09:07:14