Data attributes are custom attributes that allow you to store extra information on an HTML element. You can use data attributes to add additional information to an element that is not visible to the user, but can be used by scripts or other programs that interact with the page.
To create a snippet in HTML with data attributes, you can use the “data-” prefix to add custom attributes to your HTML elements. For example, to create a snippet container element, you could use the following code :
1. <div data-style-type="container">
2. <!-- Your snippet content goes here -->
3. </div>Similarly, you can use the other data-style-type attributes such as data-style-type="html", data-style-type="text", data-style-type="image", and data-style-type="icon" to specify the type of content being added to the snippet. For example, to add an image to your snippet, you could use the following code:
1. <img src="path/to/image.jpg" data-style-type="image" alt="My image snippet">Defining a data attribute in a snippet template allows the Left panel to display the appropriate options for modifying the content within the snippet. For example, if the data attribute is set to “text”, then the Left panel would display options to modify the text content, font size, and color.
Similarly, if the data attribute is set to “container”, the Left panel would display options to modify the container element, such as changing the background image, margin, and padding. By using data attributes, users can easily modify the content and appearance of a snippet template using the Left panel without needing to directly modify the HTML code.
data-style-type="container": Specifies that if the data attribute is set as a container, then in the Left panel, options would be available to change the container element’s Left such as background image, margin, padding, etc.data-style-type="html": It specifies that the content being added is raw HTML code.data-style-type="text": Specifies that if the data attribute is set as text, then in the Left panel, options would be available to change the text content, font size, font color, etc.data-style-type="image": Specifies that if the data attribute is set as an image, then in the Left panel, options would be available to upload and change the image.data-style-type="icon": Specifies that if the data attribute is set as an icon, then in the Left panel, options would be available to select and change the icon..data-style-type="btn": Specifies that if the data attribute is set as a button, then in the Left panel, options would be available to change the button text, font size, font color, button background color, etc.data-style-type="link": It specifies that the content being added is Link and options would be available in Left panel to modify it.data-style-type="video": Specifies that if the data attribute is set as a video, then in the Left panel, options would be available to upload and change the video.data-cloneable: Specifies whether the content can be cloned or duplicated. A value of “true” indicates that the content can be cloned, while a value of “false” indicates that it cannot.data-editable: Specifies whether the content can be edited. A value of “true” indicates that the content can be edited, while a value of “false” indicates that it cannot.icon-class: Specifies the class name of an icon to be used with the content. The value of this attribute should be a string beginning with a#symbol, followed by the class name.wrapper-link: Specifies a link to be associated with the content. The value of this attribute should be a string containing the URL of the link.