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 interfaz de usuario semántica ofrece un componente de pestaña para que los usuarios agrupen diferentes categorías de contenido, mostrando solo una categoría de contenido a la vez. Las otras opciones se muestran en cuadros alineados en una fila. Los usuarios pueden hacer clic en cualquiera de las opciones para ver esa opción. Hay diferentes estados de las pestañas de la IU semántica. Uno de ellos es el estado de carga .
Los datos que se mostrarán en el contenido pueden estar en estado de carga y el usuario desea asegurarse de que todo el contenido esté cargado o no. Mientras tanto, desea que el contenido se muestre en el estado de carga . Este es uno de los casos en los que puede hacer uso del estado de carga de la pestaña. Aparecerá un cargador que muestra que la carga de contenido está en progreso.
Clase de estado de carga de la pestaña de IU semántica:
- cargando: esta clase se usa para establecer el estado de la pestaña como el estado de carga.
Sintaxis:
<div class="ui ... loading tab segment"> <p>....</p> .... </div>
Ejemplo: este ejemplo demuestra el estado de carga de la interfaz de usuario semántica mediante la clase de carga . Cuando la página se carga, la primera «Pestaña» tiene el estado de carga. Cuando el usuario hace clic en «Tab2», obtiene el estado activo y el estado de carga se elimina de «Tab». Ahora, según el funcionamiento normal de las pestañas, si el usuario vuelve a hacer clic en «Tab», obtiene el estado activo y se carga el contenido respectivo.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <br/><br/> <div class="ui container"> <h2 class="header ui green"> GeeksforGeeks </h2> <strong>Semantic UI Tab Loading State</strong> <div class="ui top attached tabular menu"> <div class="active item" data-tab="first">Tab</div> <div class="item" data-tab="second">Tab 2</div> </div> <div class="ui bottom attached loading tab segment" data-tab="first"> <p>Loading of content is complete</p> <br> <p> As the placement season is back, GeeksforGeeks is here to help you crack the interview. We have selected some most commonly asked and MUST DO practice problems to crack Product-based Company Interviews. You can also take part in our mock placement contests which will help you learn different topics and practice at the same time, simulating the feeling of a real placement test environment. </p> </div> <div class="ui bottom attached tab segment" data-tab="second"> <p>Content already loaded:</p> <br> <p> As the placement season is back, GeeksforGeeks is here to help you crack the interview. We have selected some most commonly asked and MUST DO practice problems to crack Product-based Company Interviews. You can also take part in our mock placement contests which will help you learn different topics and practice at the same time, simulating the feeling of a real placement test environment. </p> </div> </div> <script> $('.menu .item').tab(); </script> </body> </html>
Producción:
Enlace de referencia : https://semantic-ui.com/modules/tab.html#loading
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA