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 mejor parte de este marco es que crea diseños hermosos y receptivos, ya que contiene componentes semánticos preconstruidos.
Los encabezados en un sitio web son esenciales ya que proporcionan la lista del contenido que está presente debajo de ese encabezado. La interfaz de usuario semántica nos proporciona el componente de encabezado que nos ayuda a crear encabezados de varios tipos.
Puede haber una situación en la que queramos mostrar que un encabezado en particular está inactivo en este momento. Esto se puede lograr en la interfaz de usuario semántica con la ayuda de la clase de encabezado deshabilitada .
Clase deshabilitada de encabezado de interfaz de usuario semántica:
- disabled: Es el estado del encabezado que indica que el encabezado está inactivo en este momento.
Sintaxis:
<div class="ui disabled header">
...
</div>
Ejemplo 1: en el siguiente ejemplo, crearemos un solo encabezado deshabilitado .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic UI Header Disabled State</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body> <br> <div class="ui green huge header"> GeeksforGeeks </div> <div class="ui large header"> Disabled Header </div> <br> <!--Disabled Header--> <div class="ui disabled header"> This is a Disabled Header </div> </body> </html>
Producción:
Ejemplo 2: en el siguiente ejemplo, crearemos un encabezado activo y un encabezado deshabilitado para comprender la diferencia entre ellos.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic UI Disabled Header State</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body> <br> <div class="ui green huge header"> GeeksforGeeks </div> <div class="ui large header"> Disabled Header </div> <br> <div class="ui header"> Active Header 1 </div> <div class="ui header"> Active Header 2 </div> <!--Disabled Header--> <div class="ui disabled header"> Disabled Header </div> <div class="ui header"> Active Header 3 </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/header.html
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA