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 tiene un montón de componentes para el diseño de la interfaz de usuario. Uno de ellos es “Entradas”. Las entradas se utilizan para varios propósitos en una página web. Es útil para tomar información del usuario en tiempo real y guardarla en una base de datos. Dependiendo de los requisitos del uso de insumos, existen diferentes variaciones de insumos. Uno de ellos es la variación de acción.
La variación de acción de entrada de IU semántica se utiliza para mostrar la acción asociada con las entradas. Resulta útil representar el propósito de la variación de la acción de las entradas.
Clase de variación de acción de entrada de interfaz de usuario semántica:
- acción : esta clase se utiliza para relacionar la entrada con un botón de acción.
Sintaxis:
<div class="ui action input"> .... </div>
Ejemplo 1 : este ejemplo demuestra las variaciones de acción de entrada que representan acciones de alerta. Puede ver la salida en la imagen a continuación que muestra la entrada de alerta.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Input Action Variation</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">
<br/><br />
<h2 class="ui header green">GeeksforGeeks</h2>
<strong>Semantic UI Image Action Variation</strong>
<hr><br/>
<strong>Input with alert action:</strong><br /><br />
<div class="ui action input">
<input type="text" id="input"
placeholder="Enter your message">
<button onclick="sendAlert()"
class="ui teal right labeled icon button">
<i class="bell icon"></i>
Click to alert
</button>
</div>
</div>
<script>
function sendAlert() {
/* Getting text input value */
var Text = document.getElementById("input");
/* Showing user the alert */
alert("Your Message: " + Text.value);
}
</script>
</body>
</html>
Producción:
Variación de acción de entrada de interfaz de usuario semántica
Ejemplo 2: Este ejemplo demuestra las variaciones de la acción de entrada que representan acciones de copia. Puede ver la salida en la imagen a continuación que muestra la entrada de copia.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Input Action Variation</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">
<br/><br/>
<h2 class="ui header green">GeeksforGeeks</h2>
<strong>Semantic UI Image Action Variation</strong>
<hr><br />
<strong>Input with copy action:</strong><br/><br/>
<div class="ui action input">
<input type="text" id="input">
<button onclick="copy()"
class="ui teal right labeled icon button">
<i class="copy icon"></i>
Click to Copy
</button>
</div>
</div>
<script>
function copy() {
/* Getting text input value */
var Text = document.getElementById("input");
/* Copying function */
navigator.clipboard.writeText(Text.value);
/* Showing user the copied text */
alert("Copied text value: " + Text.value);
}
</script>
</body>
</html>
Producción:
Variación de acción de entrada de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/elements/input.html#action
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA