Blaze UI Divider
Last Updated :
13 Jun, 2022
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/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...