Onsen UI CSS se utiliza para crear hermosos componentes HTML. Es una de las formas más eficientes de crear componentes híbridos HTML5 que son compatibles con dispositivos móviles y de escritorio.
El segmento se utiliza para crear un grupo de contenido relacionado. La barra de botones del segmento del componente CSS de la interfaz de usuario de Onsen se utiliza para crear el segmento con algunos botones. Podemos crear la barra de botones de segmento usando estas clases a continuación.
Clases de la barra de botones del segmento del componente CSS de la interfaz de usuario de Onsen:
- button-bar: esta clase se utiliza para crear la barra de botones.
- button-bar__item: esta clase se utiliza para crear los elementos de la barra de botones.
- button-bar__button: Esta clase se usa para crear el botón.
Sintaxis:
<div class="button-bar" style="width:100px;">
<div class="button-bar__item">
<button class="button-bar__button">
...
</button>
</div>
...
</div>
Ejemplo 1: El siguiente ejemplo muestra la barra de botones del segmento del componente CSS de la interfaz de usuario de Onsen.
HTML
<!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsen-css-components.min.css"> <script src= "https://unpkg.com/onsenui/js/onsenui.min.js"> </script> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <strong> Onsen UI CSS Component Segment Button Bar </strong> <br> <br> <div class="button-bar" style="width:120px;"> <div class="button-bar__item"> <button class="button-bar__button"> GFG 1 </button> </div> <div class="button-bar__item"> <button class="button-bar__button"> GFG 2 </button> </div> </div> </center> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra la barra de botones del segmento del componente CSS de la interfaz de usuario de Onsen.
HTML
<!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href= "https://unpkg.com/onsenui/css/onsen-css-components.min.css"> <script src= "https://unpkg.com/onsenui/js/onsenui.min.js"> </script> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <strong> Onsen UI CSS Component Segment Button Bar </strong> <br> <br> <div class="button-bar" style="width: 400px;"> <div class="button-bar__item"> <button class="button-bar__button"> Btn 1 </button> </div> <div class="button-bar__item"> <button class="button-bar__button"> Btn 2 </button> </div> <div class="button-bar__item"> <button class="button-bar__button"> Btn 3 </button> </div> </div> <br> <br> <div class="button-bar" style="width: 400px;"> <div class="button-bar__item"> <button class="button-bar__button"> GFG 1 </button> </div> <div class="button-bar__item"> <button class="button-bar__button"> GFG 2 </button> </div> <div class="button-bar__item"> <button class="button-bar__button"> GFG 3 </button> </div> <div class="button-bar__item"> <button class="button-bar__button"> GFG 4 </button> </div> <div class="button-bar__item"> <button class="button-bar__button"> GFG 5 </button> </div> </div> </center> </body> </html>
Producción:
Referencia: https://onsen.io/v2/api/css.html#segment-category
Publicación traducida automáticamente
Artículo escrito por gopaldhangar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA