DevExtreme tiene una colección de widgets HTML5/JavaScript de alto rendimiento que le permiten aprovechar las pilas modernas de desarrollo web (incluidos React, Angular, ASP.NET Core, jQuery, Knockout, etc.) para crear aplicaciones web interactivas. Desde Angular y React, hasta ASP.NET Core o Vue, DevExtreme incluye una colección integral de widgets de interfaz de usuario receptiva y de alto rendimiento para usar en la web tradicional y aplicaciones móviles de próxima generación. El kit viene con una cuadrícula de datos completamente funcional, widgets de gráficos interactivos, editor de datos y más.
La primera versión principal de DevExtreme v23.1 se lanzó este año. La nueva versión lanzó un nuevo componente DateRangeBox, funciones actualizadas de Data Grid y Tree List, etc. ¡Bienvenido a experimentar la nueva versión!
Descarga de la versión oficial de DevExtreme v23.1 (intercambio técnico Q: 523159565)
Nuevo componente DateRangeBox
Componente DateRangeBox para Angular, React, Vue y jQuery, que permite seleccionar un rango de fechas. Las características incluyen:
- entrada de máscara
- Personaliza ventanas emergentes y calendarios
- Ingrese etiquetas y patrones de estilo
- patrón de valor
- validación de entrada
Cuadrícula de datos和Lista de árbol
selector de columna personalizado
La nueva propiedad de selección permite al usuario configurar las opciones de selección en la ventana del selector de columnas, las opciones disponibles incluyen:
- selección recursiva
- seleccionar todo
- Seleccione una columna haciendo clic en su etiqueta
Puede especificar un objeto de configuración de búsqueda para personalizar las búsquedas en el Selector de columnas.
Nuestra nueva propiedad de posición le permite especificar dónde se muestra el Selector de columnas.
Filtrado de datos: personalización de la interfaz de usuario
Filtros de encabezado personalizados en cuadrícula de datos, cuadrícula dinámica, lista de árboles, diagrama de Gantt
En la nueva versión, puede personalizar las opciones de búsqueda en el filtro de encabezado de columna y la apariencia del cuadro de búsqueda. Puede configurar el cuadro de búsqueda como un componente de cuadro de texto, especificar reglas de comparación y tiempo de espera/retraso (en milisegundos).
Utilice el método de búsqueda para configurar los ajustes de búsqueda de forma global, o utilice el objeto de configuración column[].headerFilter.search para realizar cambios en columnas individuales, y haga que la propiedad fields[].headerFilter.search configure los ajustes de búsqueda en la cuadrícula dinámica.
Visualización de datos
Gráficos - Gradientes de color y patrones
Ahora puede personalizar estilos y aplicar degradados, patrones e imágenes a los componentes del gráfico DevExpress.
Utilice el método registerGradient() para declarar estilos de degradado lineal y radial, y el método registerPattern() para declarar estilos de patrón e imagen. Estos métodos devuelven una identificación única para el estilo declarado. En el objeto serie/color de punto, especifique el color base para las etiquetas y los conectores, y aplique la identificación generada al campo de identificación de relleno.
También puede usar la opción de resaltar para resaltar el cursor y la serie seleccionada.
Gráficos - Posición de etiqueta de serie personalizada
El nuevo método shift(x,y) le permite mostrar etiquetas de series en un desplazamiento específico de sus posiciones predeterminadas.
Calibre: muestra contenido SVG personalizado
Utilice la propiedad centerTemplate para mostrar contenido SVG personalizado en el componente de indicador.
BarGauge: admite el modo "Shift" para resolver etiquetas superpuestas
Si BarGauge muestra varios valores adyacentes, las etiquetas correspondientes pueden superponerse. Utilice la propiedad resolveLabelOverlapping para especificar cómo el componente BarGauge modifica la posición o la visibilidad de la etiqueta. Las opciones disponibles incluyen:
- Cambio
- Esconder
- Ninguno
En modo Shift, BarGauge cambia automáticamente las etiquetas cuando es necesario.