fdk-html-content

Deprecation Notice

Vue-based themes will soon be deprecated. Please switch to React-based themes, as all future updates and support will focus exclusively on React.

Sometimes we need to display the external html and css code on different pages of our application in that scenario our themes has support of fdk-html-content tag. This action component is used to serve the html text, or html code that can be entered using the html editor on Fynd Platform. In themes, using this action component we can display the html code as it is, e.g.

<fdk-html-content :content="htmlContentVariable"></fdk-html-content>

Here htmlContentVariable is a variable which contains the html code, which is passed inside the content prop.

Props

Key	Type	Description
content	string	used to pass the value of html content in string format to fdk-html-content action component

Example

This is the html content which we need to display as it is on our application, for which the html code will be:

 "`<ul>\n
    <li>
        <span style=\"background-color: #ff0000; color: #ffffff;\">
            <strong>This is a dummy Text</strong>
        </span>
    </li>\n
    <li>
        <span style=\"background-color: #ff0000; color: #ffffff;\">
            <strong>This is a dummy Text</strong>
        </span>
    </li>\n
    <li>
        <span style=\"background-color: #ff0000; color: #ffffff;\">
        <strong>This is a dummy Text</strong>
        </span>
    </li>\n
</ul>"`

In this string format we get the html code for displaying the above displayed html content, it can we passed inside the content prop of fdk-html-content action component which will render this code as it is.