Contenido de enlace de etiqueta de interfaz de usuario semántica

Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. Este marco nos permite usar varios de sus estilos y propiedades para hacer que un sitio web sea más fácil de usar.

Se utiliza una etiqueta de interfaz de usuario semántica para crear clasificaciones de contenido significativas, las etiquetas dan descripciones a partes de contenido. En la etiqueta Semantic UI se ofrecen 4 tipos de Contenido. Estos son los tipos Detalle, Icono, Imagen y Enlace . Una etiqueta puede ser un enlace o contener un elemento que vincula, la Etiqueta de enlace se usa para agregar un enlace o un elemento que vincula, como correo, teléfono, etc.

Clase de contenido de enlace de etiqueta de interfaz de usuario semántica:

  • icono: esta clase se agrega al icono y vincula el contenido o cualquier otro sitio o página.

Nota: Para conocer los diferentes tipos de íconos, consulte el enlace mencionado en la referencia.

Sintaxis:

<a class="ui label">
    <i class="icon ..."></i> 
    ...
</a>

Ejemplo 1: el siguiente código muestra el contenido del enlace de la etiqueta mediante la clase de icono de la interfaz de usuario.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Semantic-UI Label Link Content</title>
    <link rel="stylesheet"
          href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
  
<body>
      <h1 class="ui header green">
      GeeksforGeeks
    </h1>
    <strong>
      Semantic UI Label Link Content
    </strong>
    <br/>
    <a class="ui label">
        <i class="phone icon"></i> 1212121212
    </a>
</body>
  
</html>

Producción:

Semantic-UI Label Link Content

Contenido de enlace de etiqueta de interfaz de usuario semántica

Ejemplo 2: Para cambiar el color de la etiqueta del enlace, tenemos que agregar el color en la clase.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Semantic-UI Label Link Content</title>
    <link rel="stylesheet" 
          href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
  
<body>
      <h1 class="ui header green">
      GeeksforGeeks
    </h1>
    <strong>
      Semantic UI Link Content
    </strong>
    <br/>
    <a class="ui green label">
        <i class="phone icon"></i> 1212121212
    </a>
</body>
  
</html>

Producción:  

Semantic-UI Label Link Content

Contenido de enlace de etiqueta de interfaz de usuario semántica

Referencias: https://semantic-ui.com/elements/label.html#link

Publicación traducida automáticamente

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