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.
La lista de IU semántica nos ofrece ordenar cualquier lista. Hay 4 tipos de listas disponibles en el componente de lista con los 6 tipos diferentes de contenido.
En este artículo, aprenderemos el ícono de contenido de la lista de IU semántica.
El ícono de contenido de lista de IU semántica se usa para incluir el ícono en la lista.
Clase de icono de contenido de lista de IU semántica:
- icon: Esta clase se utiliza para incluir el icono en el contenido de la lista.
Sintaxis:
<div class="ui list">
<a class="item">
<i class="help icon"></i>
<div class="content">
....
</div>
</a>
</div>
Ejemplo: el siguiente ejemplo ilustra el icono de contenido de la lista de IU semántica. En este ejemplo, crearemos 2 listas, una será una lista ordenada y otra será una lista desordenada . Puede incluir un icono en cualquier tipo de lista.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<style>
body {
margin-left: 15px;
}
</style>
</head>
<body>
<center>
<h1 class="header ui green">
GeeksforGeeks
</h1>
<strong>Semantic UI List Icon Content</strong>
<br><br>
</center>
<strong>Unordered List Content Icon:</strong>
<div class="ui list">
<a class="item">
<i class="book icon"></i>
<div class="content">
<div class="header">HTML:</div>
<div class="description">
HTML stands for HyperText
Markup Language.
</div>
</div>
</a>
<a class="item">
<i class="book icon"></i>
<div class="content">
<div class="header">CSS:</div>
<div class="description">
CSS stands for Cascading
Style Sheets
</div>
</div>
</a>
</div>
<br>
<strong>Ordered List Content Icon:</strong>
<div class="ui ordered list">
<a class="item">
<i class="book icon"></i>
<div class="content">
<div class="header">HTML:</div>
<div class="description">
HTML stands for HyperText
Markup Language.
</div>
</div>
</a>
<a class="item">
<i class="book icon"></i>
<div class="content">
<div class="header">CSS:</div>
<div class="description">
CSS stands for Cascading
Style Sheets
</div>
</div>
</a>
</div>
</body>
</html>
Producción:
Contenido de icono de lista de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/list.html#icon
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA