Blaze UI es un conjunto de herramientas de interfaz de usuario que proporciona una base sólida y muchos componentes para crear sitios web fáciles de mantener y escalables de manera eficiente. Todas las funciones de la interfaz de usuario de Blaze se basan en las funciones nativas del navegador, por lo que no requiere un marco o biblioteca adicional para funcionar.
En este artículo, veremos los atributos del divisor de la interfaz de usuario de Blaze . El componente Divider se usa cuando queremos separar visualmente secciones en una página web. El componente Divider solo tiene un atributo, el atributo de tipo . El atributo de tipo acepta un valor de la string escrita que puede ser discontinua o punteada. Cuando no se especifica el atributo de tipo , habrá un divisor de tipo predeterminado que será una línea recta simple.
Atributos del divisor de interfaz de usuario de Blaze:
type: solo hay un atributo para el componente Divider llamado type.
Sintaxis:
<blaze-divider type="dashed | dotted">Dashed</blaze-divider>
Ejemplo 1: Este ejemplo muestra el divisor de tipo discontinuo para separar secciones visualmente.
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">
<title>Blaze UI - Divider Attributes</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/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>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<div class="u-centered">
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Divider Attributes - Blaze UI</h3>
</div>
<div class="u-window-box-super">
<h3>What is GeeksforGeeks?</h3>
<p>GeeksforGeeks is a computer science portal
for geeks. Here one can read articles
on various topics like Data Structures,
Algorithms, Java, Android, Flutter, etc.
</p>
<blaze-divider type="dashed">
Dashed Divider
</blaze-divider>
<h3>Does GeeksforGeeks offer courses?</h3>
<p>Yes, GeeksforGeeks offers self-paced as
well as live courses. You can enroll in
these courses by going to the courses page
and select the one you like. There are
plenty of free courses too.
</p>
</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo muestra el divisor predeterminado y el divisor punteado.
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">
<title>Blaze UI - Divider Attributes</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/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>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<div class="u-centered">
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Divider Attributes - Blaze UI</h3>
</div>
<div class="u-window-box-super">
<h3>What is GeeksforGeeks?</h3>
<p>GeeksforGeeks is a computer science portal
for geeks. Here one can read articles on
various topics like Data Structures,
Algorithms, Java, Android, Flutter, etc.
</p>
<blaze-divider>Default Divider</blaze-divider>
<h3>Does GeeksforGeeks offer courses?</h3>
<p>Yes, GeeksforGeeks offers self-paced as
well as live courses. You can enroll in
these courses by going to the courses
page and select the one you like. There
are plenty of free courses too.
</p>
<blaze-divider type="dotted">
Dotted Divider
</blaze-divider>
</div>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/components/divider/
Publicación traducida automáticamente
Artículo escrito por prakhara306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA