Grupos de segmentos de interfaz de usuario semántica

Posted on by Rudeus Greyrat

Semantic UI es un marco de código abierto que se utiliza para crear las mejores interfaces de usuario de CSS . Con este marco, puede crear diseños hermosos y receptivos para su aplicación web simplemente usando HTML simple. En la interfaz de usuario semántica, se puede agregar un grupo de segmentos para crear una estructura similar a un grupo.

Clases de grupo de segmentos de IU semántica:

  • Segments : esta clase se utiliza para crear un grupo de segmentos en la interfaz de usuario semántica.
  • Segmentos horizontales : esta clase se utiliza para crear grupos de segmentos horizontales en la interfaz de usuario semántica.
  • segmentos elevados : esta clase se utiliza para crear grupos de segmentos elevados en la interfaz de usuario semántica.
  • segmentos apilados : esta clase se usa para crear grupos de segmentos apilados en la interfaz de usuario semántica.
  • segmentos apilados : esta clase se utiliza para crear grupos de segmentos apilados en la interfaz de usuario semántica.

Sintaxis:

<div class="ui segments | horizontal segments | 
    raised segments | stacked segments | piled segments">
    <div class="ui segment">
        ...
    </div>
    ...
</div>

Ejemplo 1: El siguiente ejemplo ilustra el grupo de segmentos de color.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="ui container">
      <h1 class="ui green header">GeeksforGeeks</h1>
 
      <h2>Colored Segment Group</h2>
      <div class="ui segments">
        <div class="ui segment">
           
<p>Java</p>
 
        </div>
        <div class="ui red segment">
           
<p>Python</p>
 
        </div>
        <div class="ui blue segment">
           
<p>C++</p>
 
        </div>
        <div class="ui green segment">
           
<p>Middle</p>
 
        </div>
        <div class="ui yellow segment">
           
<p>Bottom</p>
 
        </div>
      </div>
    </div>
  </body>
</html>

Producción:

Ejemplo 2: El siguiente ejemplo ilustra el grupo de segmentos anidados.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
    content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="ui container">
      <h1 class="ui green header">GeeksforGeeks</h1>
 
      <h2>Nested Segment Group</h2>
      <div class="ui segments">
        <div class="ui segment">
           
<p>Available Courses</p>
 
        </div>
        <div class="ui segments">
          <div class="ui segment">
             
<p>C++</p>
 
          </div>
          <div class="ui segment">
             
<p>Data Structures using C++</p>
 
          </div>
          <div class="ui segment">
             
<p>Python</p>
 
          </div>
        </div>
        <div class="ui horizontal segments">
          <div class="ui segment">
             
<p>Jobs</p>
 
          </div>
          <div class="ui segment">
             
<p>Competitive Programming</p>
 
          </div>
          <div class="ui segment">
             
<p>Coding Competitions</p>
 
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Producción:

Ejemplo 3: El siguiente ejemplo ilustra el grupo de segmentos horizontales.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
    content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="ui container">
      <h1 class="ui green header">GeeksforGeeks</h1>
 
      <h2>Horizontal Segment Group</h2>
      <div class="ui horizontal segments">
        <div class="ui segment">
           
<p>Github</p>
 
        </div>
        <div class="ui segment">
           
<p>Facebook</p>
 
        </div>
        <div class="ui segment">
           
<p>Linkedin</p>
 
        </div>
      </div>
    </div>
  </body>
</html>

Producción:

Ejemplo 4: El siguiente ejemplo ilustra el grupo de segmentos elevados.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
    content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="ui container">
      <h1 class="ui green header">GeeksforGeeks</h1>
      <h2>Raised Segment Group</h2>
      <div class="ui raised segments">
        <div class="ui segment">
           
<p>GSOC</p>
 
        </div>
        <div class="ui segment">
           
<p>Winter of Code</p>
 
        </div>
        <div class="ui segment">
           
<p>GSOD</p>
 
        </div>
      </div>
    </div>
  </body>
</html>

Producción:

Ejemplo 5: El siguiente ejemplo ilustra el grupo de segmentos apilados.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="ui container">
      <h1 class="ui green header">GeeksforGeeks</h1>
      <h2>Stacked Segment Group</h2>
      <div class="ui stacked segments">
        <div class="ui segment">
           
<p>Tutorials</p>
 
        </div>
        <div class="ui segment">
           
<p>Articles</p>
 
        </div>
        <div class="ui segment">
           
<p>Video Courses</p>
 
        </div>
      </div>
    </div>
  </body>
</html>

Producción:

Ejemplo 6: El siguiente ejemplo ilustra el grupo de segmentos apilados.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="ui container">
      <h1 class="ui green header">GeeksforGeeks</h1>
 
      <h2>Piled Segment Group</h2>
      <div class="ui piled segments">
        <div class="ui segment">
           
<p>Fork Java</p>
 
        </div>
        <div class="ui segment">
           
<p>Data Structures using Java</p>
 
        </div>
        <div class="ui segment">
           
<p>Frontend using ReactJS</p>
 
        </div>
      </div>
    </div>
  </body>
</html>

Producción:

Referencias: https://semantic-ui.com/elements/segment.html#groups

Publicación traducida automáticamente

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