Componentes CSS de la barra de herramientas de la interfaz de usuario de Onsen

Posted on by Rudeus Greyrat

Onsen UI es una herramienta gratuita de código abierto para crear interfaces de usuario distintivas y funcionales. Además, acelera la creación de la interfaz de usuario, lo que permite que los desarrolladores de aplicaciones se concentren en la funcionalidad del software. Onsen UI es una colección considerable de elementos sólidos de interfaz de usuario creados especialmente para aplicaciones móviles. Está repleto de características que están listas para usar y se adhieren a los estándares de diseño nativos de iOS y Android. AngularJS fue la inspiración detrás de la creación de la interfaz de usuario de Onsen, sin embargo, también se puede usar con jQuery o cualquier otro marco. Un marco de JavaScript de interfaz de usuario de Onsen se basa en PhoneGap y Cordova.

Los componentes CSS preconstruidos llamados Onsen UI CSS Components se pueden usar para diseñar rápidamente diseños de interfaz de usuario flexibles y atractivos. Los elementos visuales de los componentes CSS de la interfaz de usuario de Onsen se implementan usando solo CSS (cssnext). Para los desarrolladores móviles, Onsen CSS Components es un rodillo temático Topcoat basado en la web que simplifica el desarrollo de interfaces de usuario magníficas.

La barra de herramientas de Onsen UI es un componente CSS que es una barra horizontal que se usa para almacenar algunos elementos e iconos de la barra de herramientas. Hay diferentes tipos de barras de herramientas que se utilizan para circunstancias específicas. 

Componentes CSS de la barra de herramientas de la interfaz de usuario de Onsen:

  • Barra de herramientas: este componente se utiliza para crear la barra de herramientas.
  • Elemento de la barra de herramientas : este elemento se utiliza para crear la barra de herramientas con algunos elementos de la barra de herramientas.
  • Barra de herramientas con botón de esquema : se utiliza para crear los botones básicos de la barra de herramientas.
  • Barra de herramientas con barra inferior: se utiliza para crear la barra inferior dentro de la barra de herramientas.
  • Barra de herramientas con segmento :   se utiliza para crear el segmento dentro de la barra de herramientas con algunos elementos del segmento.
  • Barra de herramientas de material : la barra de herramientas es una barra horizontal con algunos elementos e iconos de la barra de herramientas. Se utiliza para crear la barra de herramientas de materiales.
  • Barra de herramientas sin sombra : se utiliza la barra de herramientas sin sombra para crear la barra de herramientas sin sombra usando la clase toolbar-noshadow .
  • Barra de herramientas de materiales con iconos : se utiliza para crear la barra de herramientas de materiales con iconos.
  • Barra de herramientas transparente : se utiliza para crear la barra de herramientas transparente con algunos elementos utilizando la clase de barra de herramientas transparente .

Sintaxis:

<div class="toolbar">
      <div class="toolbar__left">
        <span class="toolbar-button">
               ....
        </span>
      </div>
    ...
</div>

Ejemplo 1: el siguiente código muestra cómo crear una barra de herramientas de materiales con iconos.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <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">
</head>
  
<body>
    <div class="toolbar toolbar--material">
        <div class="toolbar__left toolbar--material__left">
            <span class="toolbar-button toolbar-button--material">
                <i class="zmdi zmdi-menu"></i>
            </span>
        </div>
        <div class="toolbar__center toolbar--material__center" 
             style="color:green;">
             Geeksforgeeks
        </div>
        <div class="toolbar__right toolbar--material__right">
            <span class="toolbar-button toolbar-button--material">
                <i class="zmdi zmdi-search"></i>
            </span>
            <span class="toolbar-button toolbar-button--material">
                <i class="zmdi zmdi-plus"></i>
            </span>
            <span class="toolbar-button toolbar-button--material">
                <i class="zmdi zmdi-more-vert"></i>
            </span>
        </div>
    </div>
    <div style="margin:3rem;font-family:Roboto,sans-serif;">
        <h3 style="margin-top:1rem;">
          Onsen UI Toolbar CSS Components
        </h3>
    </div>
</body>
</html>

Producción:

 

Ejemplo 2: El siguiente código demuestra cómo crear una barra de herramientas de material transparente.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <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">
</head>
  
<body>
    <div class="toolbar toolbar--material toolbar--transparent">
        <div class="toolbar__left toolbar--material__left">
            <span class="toolbar-button toolbar-button--material">
                <i class="zmdi zmdi-menu"></i>
             </span>
        </div>
        <div class="toolbar__center toolbar--material__center" 
             style="color:green;">
             Geeksforgeeks
        </div>
        <div class="toolbar__right toolbar--material__right">
            <span class="toolbar-button toolbar-button--material">
                <i class="zmdi zmdi-search"></i>
            </span>
            <span class="toolbar-button toolbar-button--material">
                <i class="zmdi zmdi-plus"></i>
            </span>
            <span class="toolbar-button toolbar-button--material">
                <i class="zmdi zmdi-more-vert"></i>
            </span>
        </div>
    </div>
    <div style="margin:3rem;font-family:Roboto,sans-serif;">
        <h3 style="margin-top:1rem;">
          Onsen UI Toolbar CSS Components
        </h3>
    </div>
</body>
</html>

Producción:

 

Ejemplo 3: El siguiente código demuestra la creación de una barra de herramientas con segmentos.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <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">
</head>
  
<body>
    <div class="toolbar">
        <div class="toolbar__center">
            <div class="segment" style="width:200px;margin:7px 50px;">
                <div class="segment__item">
                    <input type="radio" class="segment__input" 
                           name="navi-segment-a" checked>
                    <div class="segment__button">First</div>
                </div>
  
                <div class="segment__item">
                    <input type="radio" class="segment__input" 
                           name="navi-segment-a">
                    <div class="segment__button">Second</div>
                </div>
  
                <div class="segment__item">
                    <input type="radio" class="segment__input" 
                           name="navi-segment-a">
                    <div class="segment__button">Third</div>
                </div>
  
                <div class="segment__item">
                    <input type="radio" class="segment__input" 
                           name="navi-segment-a">
                    <div class="segment__button">Fourth</div>
                </div>
            </div>
        </div>
    </div>
    <div style="margin:3rem;font-family:Roboto,sans-serif;">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3 style="margin-top:1rem;">
            Onsen UI Toolbar CSS Components
        </h3>
    </div>
</body>
</html>

Producción:

 

Referencia: https://onsen.io/v2/api/css.html#toolbar-category 

Publicación traducida automáticamente

Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *