Variaciones de riel de interfaz de usuario semántica

Semantic UI es el marco de código abierto que utilizó CSS y jQuery para hacer que nuestros sitios web se vean hermosos y receptivos. Tiene clases predefinidas como bootstrap para usar para hacer que nuestro sitio web sea más interactivo. Tiene algunos componentes semánticos preconstruidos y podemos usar estos componentes para crear un sitio web receptivo.

Semantic-UI Rail se utiliza para mostrar el contenido fuera de la vista principal del sitio. Está principalmente en los lados izquierdo y derecho cuando nuestro contenido principal está en el centro. Existen diferentes variaciones de riel como adjunto, cerrado, tamaño , etc. En este artículo, discutiremos las variaciones de riel en la interfaz de usuario semántica.

Variaciones de riel de interfaz de usuario semántica:

Adjunto : esta variación se usa para unir el riel a la ventana principal.
Cerrar : esta variación crea el riel cerca de la ventana principal.
Tamaño : esta variación se utiliza para crear diferentes tamaños de rieles.

Sintaxis:

<div class="ui segment">
  <div class="ui Rail-Variations rail">
     ....
  </div>
  ...
</div>

Ejemplo 1: el siguiente código demuestra la variación adjunta de riel de interfaz de usuario semántica.

HTML

<!DOCTYPE html>
<html>
 
<head>
  <title> Semantic-UI Rail Variations </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 center aligned">
    <h2 class="ui green header"> GeeksforGeeks </h2> 
    <h3> Semantic-UI Rail Variations </h3>
  </div> <br>
 
  <div class="ui segment"
       style="margin-left: auto;
              margin-right: auto;
              width:100px;">
    <div class="ui left attached rail">
      <div class="ui segment">
        <strong> Left Rail attached </strong>
         
 
<p> GeeksforGeeks </p>
 
 
      </div>
    </div>
    <div class="ui right attached rail">
      <div class="ui segment">
        <strong> Right Rail attached </strong>
         
 
<p> GeeksforGeeks </p>
 
 
 
      </div>
    </div>
     
 
<p> GFG </p>
 
 
     
 
<p> Rail </p>
 
 
  </div>
</body>
   
</html>

Producción:

Variaciones de riel de interfaz de usuario semántica

Ejemplo 2: el siguiente código demuestra la variación de cierre de riel de interfaz de usuario semántica.

HTML

<!DOCTYPE html>
<html>
 
<head>
  <title> Semantic-UI Rail Variations </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 center aligned">
    <h2 class="ui green header"> GeeksforGeeks </h2> 
    <h3> Semantic-UI Rail Variations </h3>
  </div> <br>
 
  <div class="ui segment"
       style="margin-left: auto;
             margin-right: auto;
              width:80px;">
    <div class="ui left close rail">
      <div class="ui segment">
        <strong> Left Rail Close </strong>
         
 
<p> GeeksforGeeks </p>
 
 
      </div>
    </div>
    <div class="ui right close rail">
      <div class="ui segment">
        <strong> Right Rail Close </strong>
         
 
<p> GeeksforGeeks </p>
 
 
      </div>
    </div>
     
 
<p> GFG </p>
 
 
     
 
<p> Rail </p>
 
 
  </div>
 
  <div class="ui segment"
       style="margin-left: auto;
              margin-right: auto;
              width:80px;">
    <div class="ui left very close rail">
      <div class="ui segment">
        <strong> Left Rail Very Close </strong>
         
 
<p> GeeksforGeeks </p>
 
 
      </div>
    </div>
    <div class="ui right very close rail">
      <div class="ui segment">
        <strong> Right Rail Very Close </strong>
         
 
<p> GeeksforGeeks </p>
 
 
      </div>
    </div>
     
 
<p> GFG </p>
 
 
     
 
<p> Rail </p>
 
 
  </div>
</body>
</html>

Producción:

Variaciones de riel de interfaz de usuario semántica

Ejemplo 3: el siguiente código demuestra la variación del tamaño del riel de la interfaz de usuario semántica.

HTML

<!DOCTYPE html>
<html>
 
<head>
  <title> Semantic-UI Rail Variations </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 center aligned">
    <h2 class="ui green header"> GeeksforGeeks </h2> 
    <h3> Semantic-UI Rail Variations </h3>
  </div> <br>
 
  <div class="ui segment"
       style="margin-left: auto;
              margin-right: auto;
              width:80px;">
    <div class="ui left mini rail">
      <div class="ui mini segment">
        <strong> Rail Mini size </strong>
         
 
<p> GeeksforGeeks </p>
 
 
      </div>
    </div>
    <div class="ui right small rail">
      <div class="ui small segment">
        <strong> Rail Small size </strong>
         
 
<p> GeeksforGeeks </p>
 
 
      </div>
    </div>
     
 
<p> GFG </p>
 
    
     
 
<p> Rail </p>
 
 
  </div>
  <div class="ui segment"
       style="margin-left: auto;
              margin-right: auto;
              width:80px;">
    <div class="ui left large rail">
      <div class="ui large segment">
        <strong> Rail Large size </strong>
         
 
<p> GeeksforGeeks </p>
 
 
      </div>
    </div>
    <div class="ui right huge rail">
      <div class="ui huge segment">
        <strong> Rail Huge size </strong>
         
 
<p> GeeksforGeeks </p>
 
 
      </div>
    </div>   
     
 
<p> GFG </p>
 
 
     
 
<p> Rail </p>
 
 
  </div>
</body>
   
</html>

Producción:

Variaciones de riel de interfaz de usuario semántica

Referencia: https://semantic-ui.com/elements/rail.html

Publicación traducida automáticamente

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

HTML

HTML

HTML

Deja una respuesta Cancelar la respuesta