Barra de pestañas de material del componente CSS de la interfaz de usuario de Onsen (icono y etiqueta)

Onsen UI CSS se utiliza para crear hermosos componentes HTML. Es una de las formas más eficientes de crear componentes híbridos HTML5 compatibles con dispositivos móviles y de escritorio.

Los componentes CSS de la interfaz de usuario de Onsen son componentes CSS preconstruidos que se pueden usar para crear diseños de interfaz de usuario adaptables y atractivos rápidamente. La barra de pestañas de material del componente CSS de la interfaz de usuario de Onsen (icono y etiqueta) se usa para crear la barra de pestañas de material con iconos y etiquetas usando las siguientes clases.

Onsen UI CSS Component Material Tabbar (icono y etiqueta) Clases:

  • tabbar–material__icon: esta clase se utiliza para crear la barra de pestañas de material con un icono.
  • tabbar–material__label: Esta clase se utiliza para crear la barra de pestañas del material con la etiqueta.

Sintaxis:

<div class="tabbar tabbar--top 
            tabbar--material">
  <label class="tabbar__item 
           tabbar--material__item">
    ...
    <i class="tabbar__icon 
       tabbar--material__icon ...">
    </i>
    <div class="tabbar__label 
         tabbar--material__label">
        ...
    </div>
  </label>

  ...
</div>

Ejemplo 1: El siguiente ejemplo muestra la barra de pestañas de material del componente CSS de la interfaz de usuario de Onsen (icono y etiqueta).

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 Material 
            Tabbar (Icon and Label)
        </strong> <br> <br>
  
        <div class="tabbar tabbar--top 
                    tabbar--material">
            <label class="tabbar__item 
                          tabbar--material__item">
                <input type="radio" name="tabs" 
                       checked="checked">
                <button class="tabbar__button 
                        tabbar--material__button">
                    <i class="tabbar__icon 
                              tabbar--material__icon
                              ion-ios-menu">
                    </i>
                    <div class="tabbar__label 
                         tabbar--material__label">
                        Menu
                    </div>
                </button>
            </label>
          
            <label class="tabbar__item 
                          tabbar--material__item">
                <input type="radio" name="tabs" 
                       checked="checked">
                <button class="tabbar__button 
                        tabbar--material__button">
                    <i class="tabbar__icon 
                              tabbar--material__icon
                              zmdi zmdi-delete">
                    </i>
                    <div class="tabbar__label 
                         tabbar--material__label">
                        Delete
                    </div>
                </button>
            </label>
        </div>
    </center>
</body>
  
</html>

Producción:

 

Ejemplo 2: El siguiente ejemplo muestra la barra de pestañas de material del componente CSS de la interfaz de usuario de Onsen (icono y etiqueta).

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 Material 
            Tabbar (Icon and Label)
        </strong> <br> <br>
  
        <div class="tabbar tabbar--top 
                    tabbar--material">
            <label class="tabbar__item 
                          tabbar--material__item">
                <input type="radio" name="tabs" 
                       checked="checked">
                <button class="tabbar__button 
                        tabbar--material__button">
                    <i class="tabbar__icon 
                              tabbar--material__icon
                              ion-ios-menu">
                    </i>
                    <div class="tabbar__label 
                         tabbar--material__label">
                        Menu
                    </div>
                </button>
            </label>
  
            <label class="tabbar__item 
                          tabbar--material__item">
                <input type="radio" name="tabs" 
                       checked="checked">
                <button class="tabbar__button 
                        tabbar--material__button">
                    <i class="tabbar__icon 
                              tabbar--material__icon
                              fa fa-bell">
                    </i>
                    <div class="tabbar__label 
                         tabbar--material__label">
                        Subscribe
                    </div>
                </button>
            </label>
          
            <label class="tabbar__item 
                          tabbar--material__item">
                <input type="radio" name="tabs" 
                       checked="checked">
                <button class="tabbar__button 
                        tabbar--material__button">
                    <i class="tabbar__icon 
                              tabbar--material__icon
                              zmdi zmdi-delete">
                    </i>
                    <div class="tabbar__label 
                         tabbar--material__label">
                        Delete
                    </div>
                </button>
            </label>
  
            <label class="tabbar__item 
                          tabbar--material__item">
                <input type="radio" name="tabs" 
                       checked="checked">
                <button class="tabbar__button 
                        tabbar--material__button">
                    <i class="tabbar__icon 
                              tabbar--material__icon
                              zmdi zmdi-phone">
                    </i>
                    <div class="tabbar__label 
                         tabbar--material__label">
                        Phone
                    </div>
                </button>
            </label>
  
            <label class="tabbar__item 
                          tabbar--material__item">
                <input type="radio" name="tabs" 
                       checked="checked">
                <button class="tabbar__button 
                        tabbar--material__button">
                    <i class="tabbar__icon 
                              tabbar--material__icon
                              zmdi zmdi-pin-account">
                    </i>
                    <div class="tabbar__label 
                         tabbar--material__label">
                        Profile
                    </div>
                </button>
            </label>
        </div>
    </center>
</body>
  
</html>

Producción:

 

Referencia: https://onsen.io/v2/api/css.html#tabbar-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

Deja una respuesta

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