Documentation for Call To Action Component#
The Call To Action (CTA) Component is a Vue.js component designed to prominently feature a call-to-action section on a webpage. It includes a header, optional descriptive text, and a button. The button's placement relative to the text can be customized using various orientation options.Overview#
The Call To Action Component utilizes a model
object to configure its content and layout. This component dynamically adjusts its display based on the provided properties, allowing for flexible call-to-action sections.Model Documentation#
The model
object should be structured to provide the necessary configuration and data for the CTA section:Model Structure#
id: String
A unique identifier for the component, used for the component’s id
attribute and potential custom styling.
cssClass: String
Optional CSS class(es) for additional styling of the CTA container.
header: String
Optional header text for the CTA container.
text: String
Optional descriptive text to display alongside or below the button.
buttonText: String
The text to display on the button.
buttonLink: String
The URL that the button should link to.
buttonOrientation: Number
Determines the layout of the button and text. Possible values:0
: Button on the right of the text.
1
: Button on the left of the text.
2
: Button centered above the text.
3
: Button centered below the text.
Example Model#
{
"id": "cta-1",
"cssClass": "custom-cta",
"header": "Join Us Today!",
"text": "Be part of something great. Discover our services and join our community to get started.",
"buttonText": "Get Started",
"buttonLink": "/get-started",
"buttonOrientation": 2
}
Component Structure#
The component dynamically generates the CTA layout based on the buttonOrientation
property.HTML Template#
The HTML template for the CTA component is structured to handle various button orientations:JavaScript#
The JavaScript part of the component manages the dynamic data and layout adjustments:Explanation#
1.
model: The component receives a model
object as a prop, which contains configuration and data for rendering.
2.
Text: The descriptive text for the CTA section, initialized from model.text
.
ButtonText: The text to display on the CTA button, initialized from model.buttonText
.
ButtonLink: The URL to which the button links, initialized from model.buttonLink
.
ButtonOrientation: Defines the layout of the button and text, initialized from model.buttonOrientation
.
3.
getAlignmentClass(alignment): Determines the CSS class for text alignment based on the alignment value.
4.
The calltoactiondefault
component is registered with Vue and uses a template identified by #calltoactiondefault
.
Steps to Create Your Own Call To Action Component#
1.
Define the Vue Component:Use Vue.component()
or app.component()
to register the component.
2.
Structure the HTML to include the CTA header, text, and button.
Use Vue.js directives (v-if
, v-for
, :href
, etc.) for dynamic rendering based on ButtonOrientation
.
3.
Implement JavaScript Logic:Define props
for the model
object.
Initialize data properties and implement methods for layout adjustments.
Implement any additional lifecycle hooks if needed.
4.
Customize Styling and Layout:Adjust CSS classes and styles to match your design requirements.
5.
Ensure the component functions correctly with various configurations and screen sizes.
Debug any issues related to data binding or layout rendering.
6.
Integrate the component into your Vue.js application and deploy it as part of your project.
This documentation provides a complete guide to the Call To Action Component, including how to configure, use, and customize it effectively.Modified at 2024-08-27 08:04:45