Tipos de divisores de interfaz de usuario semántica

Semantic UI es un marco de desarrollo front-end gratuito de código abierto que está equipado con componentes semánticos preconstruidos que ayudan a crear diseños receptivos utilizando HTML fácil de usar . En términos de facilidad de uso, la interfaz de usuario semántica es mejor que el estilo Bootstrap . Las principales empresas como Snapchat, Accenture han comenzado a adoptar la interfaz de usuario semántica para la interfaz.

En este artículo, analicemos los diferentes tipos de divisores que están disponibles en la interfaz de usuario semántica. Un divisor se usa generalmente para dividir el contenido de manera concisa en diferentes secciones.

Clase de tipos de divisores de interfaz de usuario semántica:

Divisor: una forma convencional de dividir el contenido de la página web en diferentes partes de una cuadrícula.
Divisor horizontal: un divisor puede segmentar el contenido de una página web horizontalmente.
Divisor vertical : un divisor puede segmentar el contenido de una página web verticalmente.

Sintaxis:

<div class="ui horizontal divider">
  ....
</div>

Ejemplo 1: El siguiente ejemplo demuestra la clase de divisor estándar .

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
</head>
 
<body>
    <h2 style="color:green">
        GeeksforGeeks
    </h2>
     
    <strong>Semantic UI Standard divider</strong>
     
    <div class="ui divider">
        <h3> This is the first paragraph.</h3>
        <div class="ui divider">
             
<p>
                CSS (Cascading Style Sheets) is a
                stylesheet language used to design
                the webpage to make it attractive.
                The reason for using this is to
                simplify the process of making
                web pages presentable. It allows
                you to apply styles to web pages.
            </p>
 
 
            <div class="ui divider">
                <h3> This is the second paragraph</h3>
                <div class="ui divider">
                     
<p>
                        JavaScript is the world most
                        popular lightweight, interpreted
                        compiled programming language.
                        It is also known as scripting
                        language for web pages. It is
                        well-known for the development
                        of web pages, many non-browser
                        environments also use it.
                    </p>
 
 
                    <div class="ui divider">
                        <h3> End of paragraph </h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
 
</html>

Producción:

Tipos de divisores de interfaz de usuario semántica

Ejemplo 2: El siguiente ejemplo dividirá la sección en dos mitades iguales horizontalmente como se muestra a continuación usando la clase horizontal .

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
</head>
 
<body>
    <h2 style="color:green">
        GeeksforGeeks
    </h2>
     
    <b>
         
<p>Semantic UI horizontal divider</p>
 
    </b>
     
    <div class="ui center aligned basic segment">
        <div class="ui message">
             
<p>
                CSS (Cascading Style Sheets) is
                a stylesheet\language used to
                design the webpage to make it
                attractive. The reason for using
                this is to simplify the process
                of making web pages presentable.
                It allows you to apply styles to
                web pages.
            </p>
 
        </div>
 
        <div class="ui horizontal divider">
            Or
        </div>
         
        <div class="ui message">
             
<p>
                JavaScript is the world most
                popular lightweight, interpreted
                compiled programming language.
                It is also known as scripting
                language for web pages. It is
                well-known for the development
                of web pages, many non-browser
                environments also use it.
            </p>
 
        </div>
    </div>
</body>
 
</html>

Producción:

Tipos de divisores de interfaz de usuario semántica

Ejemplo 3. Este ejemplo dividirá la sección o columnas en dos mitades iguales verticalmente usando la clase vertical .

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
</head>
 
<body>
    <h2 style="color:green">
        GeeksforGeeks
    </h2>
     
    <b>
         
<p>Semantic UI vertical divider</p>
 
    </b>
     
    <div class="ui segment">
        <div class="ui two column very relaxed grid">
            <div class="column">
                 
<p>
                    JavaScript is the world most popular
                    lightweight, interpreted compiled
                    programming language. It is also
                    known as scripting language for web
                    pages.
                </p>
 
 
                 
<p>
                    It is well-known for the development
                    of web pages, many non-browser
                    environments also use it.
                </p>
 
 
                 
<p>
                    We can add JavaScript directly to
                    our HTML file by writing the code
                    inside the script tag.
                </p>
 
 
                 
<p>
                    We can write JavaScript code in
                    other file having an extension .js
                </p>
 
 
            </div>
            <div class="column">
                 
<p>
                    CSS (Cascading Style Sheets) is a
                    stylesheet language used to design
                    the webpage to make it attractive.
                </p>
 
 
                 
<p>
                    The reason for using this is to
                    simplify the process of making
                    web pages presentable. It allows
                    you to apply styles to web pages.
                </p>
 
 
                 
<p>
                    Styling is the essential property
                    for any website. It increases the
                    standards and overall look of the
                    website that makes it easier for
                    the user to interact with it
                </p>
 
            </div>
        </div>
 
        <div class="ui vertical divider">
            and
        </div>
    </div>
</body>
 
</html>

Producción:

Tipos de divisores de interfaz de usuario semántica

Referencia: https://semantic-ui.com/elements/divider.html#divider

Publicación traducida automáticamente

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

HTML

HTML

HTML

Deja una respuesta Cancelar la respuesta