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"> w3wiki </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 = "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> < script type = "module" src = "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js" > </ script > < script nomodule = "" src = "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js" > </ script > < script src = "https://code.jquery.com/jquery-3.6.0.min.js" ></ script > </ head > < body > < center > < h1 style = "color: green;" > w3wiki </ h1 > < strong >Blaze UI Divider</ strong > < br />< br /> < blaze-divider type = "solid" > Welcome to w3wiki. This is solid divider. </ blaze-divider > < blaze-divider type = "dashed" > Welcome to w3wiki. This is dashed divider. </ blaze-divider > < blaze-divider type = "dotted" > Welcome to w3wiki. This is dotted divider. </ blaze-divider > </ center > </ body > </ html > |
Output:
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 = "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> < script type = "module" src = "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js" > </ script > < script nomodule = "" src = "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js" > </ script > < script src = "https://code.jquery.com/jquery-3.6.0.min.js" > </ script > </ head > < body > < center > < h1 style = "color: green;" > w3wiki </ h1 > < strong >Blaze UI Divider</ strong > < br />< br /> < blaze-divider id = "divider" type = "solid" > Welcome to w3wiki. </ 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:
Reference: https://www.blazeui.com/components/divider/
Contact Us