Blaze UI Divider
Blaze UI is a free open-source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.
Blaze UI Divider is a pure CSS divider that allows the creation of multiple designs of dividers with some content inside the divider. Dividers are used to divide the sections of the page visually.
- Blaze UI Divider Attributes: The Divider component has only one attribute, the type attribute. The type attribute accepts a value of the typed string which can be dashed or dotted. When the type attribute is not specified, there will be a default type divider which will be a simple straight line.
Syntax: Create a divider as follows:
<blaze-divider type="dashed">
GeeksforGeeks
</blaze-divider>
Example 1: We have three types of dividers in this example.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= <script type="module" src= </script> <script nomodule="" src= </script></head><body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Blaze UI Divider</strong> <br /><br /> <blaze-divider type="solid"> Welcome to GeeksforGeeks. This is solid divider. </blaze-divider> <blaze-divider type="dashed"> Welcome to GeeksforGeeks. This is dashed divider. </blaze-divider> <blaze-divider type="dotted"> Welcome to GeeksforGeeks. This is dotted divider. </blaze-divider> </center></body></html> |
Output:
Blaze UI Divider
Example 2: In the following example, we are going to change the divider type using buttons.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= <script type="module" src= </script> <script nomodule="" src= </script> </script></head><body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Blaze UI Divider</strong> <br /><br /> <blaze-divider id="divider" type="solid"> Welcome to GeeksforGeeks. </blaze-divider> <button class="c-button c-button--success" onclick="changeType('solid')"> Solid </button> <button class="c-button c-button--success" onclick="changeType('dashed')"> Dashed </button> <button class="c-button c-button--success" onclick="changeType('dotted')"> Dotted </button> </center> <script> function changeType(type) { $('#divider').attr('type', type) } </script></body></html> |
Output:
Blaze UI Divider
Reference: https://www.blazeui.com/components/divider/
Please Login to comment...