Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
|
ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof [2025/02/02 16:06] 192.168.177.3 |
ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof [2025/08/19 13:45] (actual) 192.168.175.40 |
||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| ====== Configuración librería UI Design System ====== | ====== Configuración librería UI Design System ====== | ||
| + | |||
| + | [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front|←Regresar]] | ||
| Esta librería funciona como un repositorio centralizado de componentes, permitiendo compartir y reutilizar elementos visuales de manera consistente en todas las aplicaciones. Al mantener un sistema de diseño unificado, garantiza la coherencia visual y mejora la eficiencia del desarrollo, reduciendo la duplicación de código y simplificando el mantenimiento de la interfaz de usuario. | Esta librería funciona como un repositorio centralizado de componentes, permitiendo compartir y reutilizar elementos visuales de manera consistente en todas las aplicaciones. Al mantener un sistema de diseño unificado, garantiza la coherencia visual y mejora la eficiencia del desarrollo, reduciendo la duplicación de código y simplificando el mantenimiento de la interfaz de usuario. | ||
| Línea 36: | Línea 38: | ||
| </code> | </code> | ||
| - | **Nota:** Asegúrese de que la librería esté correctamente instalada y configurada en su proyecto antes de realizar las importaciones. | + | **Nota:** Asegúrese de que la librería esté correctamente instalada y configurada en el proyecto antes de realizar las importaciones. |
| - | * Para implementar los componentes en su template, utilice los selectores específicos documentados para cada componente. Cada selector acepta diferentes parámetros y propiedades que puede configurar según sus necesidades. | + | * Para implementar los componentes en el template, utilice los selectores específicos documentados para cada componente. Cada selector acepta diferentes parámetros y propiedades que puede configurar según las necesidades. |
| <code> | <code> | ||
| Línea 50: | Línea 52: | ||
| </code> | </code> | ||
| - | Para más detalles sobre los parámetros disponibles y su implementación, consulte la documentación específica de cada componente. | + | Para obtener información detallada sobre los parámetros disponibles y su implementación, consulte la documentación específica de cada componente. Actualmente existen dos versiones disponibles, debido a que el sistema de diseño fue actualizado durante la migración, resultando en componentes con variantes tanto funcionales como visuales. |
| + | ==== Componentes versión 1 ==== | ||
| - | ===== Componentes ===== | + | * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:documentacion-version-1| Documentación versión 1]] |
| - | * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:estructura-pagina|Estructura página]] | + | |
| - | * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:list-table-component| List Table → Tabla de Listado de datos]] | + | |
| - | * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:layout-modal-component| Layout Modal → Contenedor Modal]] | + | |
| - | * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:loader-component|Loader → Indicador de Carga]] | + | |
| - | * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:menu-bar-component|Menu Bar → Barra de Navegación]] | + | |
| - | * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:title-page-component|Title Page → Encabezado de Página]] | + | |
| - | === Componentes de formulario === | + | ==== Componentes versión 2 (Migración) ==== |
| - | * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:estructura-formulario|Estructura formulario]] | + | |
| - | * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:form-item-component|Form Item → Contenedor item de formulario]] | + | |
| - | * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:input-field-text-component| Input Field (Text) → Campo de texto]] | + | |
| - | * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:input-field-button-component|Input Field (Button) → Campo con botón]] | + | |
| - | * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:input-field-dropdown-component|Input Field (Dropdown) → Campo de selección desplegable]] | + | |
| - | * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:input-field-upload-component|Input Field (Upload) → Campo de subida de archivos]] | + | |
| - | * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:input-field-mask-component|Input Field (Mask) → Campo con máscara]] | + | |
| - | * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:input-field-checkbox-component|Input Field (Checkbox) → Campo de casilla de verificación]] | + | |
| - | * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:textarea-component|Textarea → Área de texto]] | + | |
| + | * [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front:configuracion-libreria-ui-sicof:documentacion-version-2| Documentación versión 2]] | ||
| + | [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front|←Regresar]] | ||
| + | ---- | ||
| - | [[ada:howto:sicoferp:factory:new-migracion-sicoferp:front|←Regresar]] | + | //Documento actualizado: 03/03/2025//\\ |
| + | //Elaborado por: Luis Ardila - Desarrollador frontEnd// | ||