X-Editable

El componente Editable text es un contenedor de entrada personalizado, como un input. Al comienzo es una vista de solo lectura, los usuarios pueden hacer clic en el campo para editarlo. Luego pasa al modo edición, donde el usuario puede guardar el dato escrito de manera aislada.

Playground

warning_amber

Componente deprecado

A partir de 2025, este componente dejará de recibir mantenimiento por parte del equipo de Design System. No debe utilizarse en nuevos desarrollos. En caso de implementaciones existentes, se deberá homologar a las definiciones del flujo 'Editar' del patrón o vista correspondiente.

Editable aquí

Ruby

<%= link_to "Editable aquí", "#", class: :editable, data: {url: 'Endpoint validador', name: 'edit[name]'} %>
              

Html

<a href="#" className='editable editable-click' id="username" data-type="text" data-pk="1" data-url="Aquí endopint validador" data-title="Enter username">Editable aquí</a>
              

Javascript

/* Selector a elementos con la clase editable, se instancia y configuran propiedades */
$('.editable').editable({
  type: 'text',
  pk: 1,
  url: '/post',
  title: 'Editable aquí'
});
              

Lista de parámetros

Parámetro

Tipo

Detalle

class	String	Inicializa el componente mediante ".editable"
data	Object	Objeto que contiene los parametros necesarios para la funcionalidad del componente
url	String	path requerido para procesar el valor enviado (/post)
name	String o Number	Nombre del campo a actualizar en bd. referencia desde id o data-name
type	String	Tipo de input. Estos pueden ser text | textarea | select | date | checklist entre otros
value	Mixed	Valor inicial. Útil para elementos de tipo Select donde el valor es la key de la opción a mostrar
source	String | Array | Object | Function	Si es Array debe cumplir el formato "array of objects" Si es String considera ajax por cargar items Si es Function debe retornar un array de objetos

Anatomía

1. Label

las etiquetas son mayúsculas y minúsculas y son lo más breves posible, al tiempo que describen claramente el contenido del campo.

2. Input

Texto editable al hacer click. Puede contener texto o numeros, tiene una línea abajo para mostrar al usuario que es cliqueable, la edición de este texto se guarda.

3. Acciones

Aparecen siempre a la dereca del campo.

Casos de Uso

El componente editable text tiene opciones para mostrar un dato editable o un input editable, se usa para editar texto, números, URL o todo dato posible, se debe usar en pantallas donde la información debe actualizarse con frecuencia, debe estar contenido en un formulario, form summary o en una tabla, a diferencia de capturar el dato como lo hace el input text, este componente tiene las opciones de guardar el dato o cancelar la acción.

En general deben ser datos ya guardados o datos que vengan desde la base de datos limpios.

Dado que el componente editable text se usa al ingresar contenido, está optimizada para usar con entradas de teclado (use volver para guardar y esc para cancelar). Al usar un mouse, los controles siempre deben mostrarse en la parte inferior derecha del campo.

No usar en formularios nuevos.

Caso:

Usando la anotomía básica del componente

1. ir a Administración
2. Sueldos por hora
3. Horas trabajadas

Uso Correcto:

Uso Incorrecto:

Características

Comportamiento

El componente Editable al momento de aparecer debe ocupar el 100% de ancho de la columna que lo contiene