Interfaz de usuario semántica | Pestaña

Semantic UI es un marco de código abierto que proporciona pestañas fáciles de usar para crear excelentes interfaces de usuario para sitios web. Es muy similar a los usos de arranque para crear sitios web increíbles. Utiliza una clase para agregar estilos a diferentes elementos de la estructura de la página HTML. Una pestaña es una sección oculta de contenido que se puede ver haciendo clic en ella. Puede tener cualquier número de pestañas dependiendo de la necesidad.

Ejemplo: El siguiente ejemplo demuestra el uso de pestañas de IU semánticas.

$('.menu .item').tab();

html

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
</head>
 
<body>
    <div style="margin-top: 100px" class="ui container">
        <h2>Tabs</h2>
        <h2>Hello welcome to geeksforgeeks</h2>
        <div class="ui top attached tabular menu">
            <a class="active item" data-tab="first">Home</a>
            <a class="item" data-tab="second">What we do</a>
            <a class="item" data-tab="third">Jobs</a>
        </div>
 
        <div class="ui bottom attached
            active tab segment" data-tab="first">
            Welcome to geeksforgeeks.
        </div>
 
        <div class="ui bottom attached
            tab segment" data-tab="second">
            Provide tutorials for learning.
        </div>
 
        <div class="ui bottom attached
            tab segment" data-tab="third">
            Email your resume at careers@geeksforgeeks.org
        </div>
    </div>
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
     
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
     
    <script>
        $('.menu .item').tab();                  
    </script>
</body>
 
</html>

Producción: 
 

Ejemplo: El siguiente ejemplo muestra un grupo de pestañas múltiples.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
</head>
 
<body>
    <div style="margin-top: 100px"
            class="ui container">
 
        <h2>Tabs</h2>
        <h2>Hello, welcome to geeksforgeeks</h2>
 
        <div id="context1">
            <div class="ui secondary menu">
                <a class="item" data-tab="first">
                    Data Structure
                </a>
                <a class="item active" data-tab=
                    "second">Web Programming
                </a>
 
                <a class="item" data-tab="third">
                    Basic Programming
                </a>
            </div>
 
            <div class="ui tab segment" data-tab="first">
                <div class="ui top attached tabular menu">
                    <a class="active item" data-tab=
                            "first/a">Array</a>
                    <a class="item" data-tab=
                            "first/b">Link-List</a>
                    <a class="item" data-tab=
                            "first/c">Tree</a>
                </div>
 
                <div class="ui bottom attached active tab
                        segment" data-tab="first/a">
                    Collection of data under similar
                    data type with contiguous memory.
                </div>
 
                <div class="ui bottom attached tab
                        segment" data-tab="first/b">
                    Collection of data with
                    dynamic memory allocation
                </div>
                <div class="ui bottom attached
                    tab segment" data-tab="first/c">
                    Tree like structure to store data
                </div>
            </div>
            <div class="ui tab segment active"
                    data-tab="second">
                <div class="ui top attached
                        tabular menu">
                    <a class="item" data-tab=
                            "second/a">Django</a>
                    <a class="item" data-tab=
                            "second/b">NodeJS</a>
                    <a class="item active"
                        data-tab="second/c">Laraval</a>
                </div>
                <div class="ui bottom attached
                    tab segment" data-tab="second/a">
                    Python Framework
                </div>
                <div class="ui bottom attached tab
                    segment" data-tab="second/b">
                    JavaScript Framework
                </div>
                <div class="ui bottom attached tab
                    segment active" data-tab="second/c">
                    PHP framework
                </div>
            </div>
            <div class="ui tab segment" data-tab="third">
                <div class="ui top attached tabular menu">
                    <a class="item" data-tab="third/a">C</a>
                    <a class="item" data-tab="third/b">C++</a>
                    <a class="item" data-tab="third/c">Java</a>
                </div>
                <div class="ui bottom attached tab
                        segment" data-tab="third/a">
                    The most basic programming language.
                </div>
                <div class="ui bottom attached tab
                        segment" data-tab="third/b">
                    C language with object oriented feature
                </div>
                <div class="ui bottom attached tab
                        segment" data-tab="third/c">
                    Java is most popular enterprise
                    programming language.
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous">
    </script>
     
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
     
    <script>
        $('.menu .item').tab();                  
    </script>
</body>
 
</html>

Producción: 
 

Publicación traducida automáticamente

Artículo escrito por iamsahil1910 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 *