Descripción general del componente del divisor de Angular
El componente Divisor de Ignite UI for Angular proporciona la capacidad de crear diseños, divididos en varios paneles dispuestos vertical u horizontalmente que se pueden cambiar de tamaño, expandir y contraer. Estas interacciones se realizan a través de la interfaz de usuario expuesta en las barras divisoras entre los paneles. En la siguiente demostración se muestra un diseño de divisor simple.
<igx-splitterstyle='height: 100vh;' [style.width]='"100%"'><igx-splitter-pane><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in lacus eget turpis congue fermentum. Aliquam sollicitudin massa vel ullamcorper bibendum. Donec sit amet augue in justo fermentum facilisis vel quis quam. Vivamus eget iaculis nisi, vitae dignissim leo. Donec eget consectetur lacus. In viverra vehicula libero, quis dictum odio varius in. Phasellus aliquam elit et lectus ornare placerat. Aliquam vitae sapien facilisis, auctor enim quis, consectetur dui. Cras elementum velit eros, ut efficitur ante pellentesque in. Proin vulputate lacus dui, vitae imperdiet dui pharetra ac. Nunc sagittis, sapien et posuere varius, mauris justo tincidunt odio, in interdum lorem libero sed enim. Nulla placerat scelerisque felis vitae accumsan.
</p></igx-splitter-pane><igx-splitter-pane><p>
Duis auctor, diam id vehicula consequat, lacus tellus molestie magna, sed varius nisi quam eget nisl. Donec dignissim mi et elementum laoreet. Nam dignissim quis justo eu fermentum. Proin vestibulum, neque quis elementum tincidunt, nibh mi gravida purus, eget volutpat ipsum magna in orci. Donec id mauris vitae lectus molestie blandit. Praesent non quam interdum, efficitur lacus nec, gravida mauris. Ut ac ante maximus, ultrices turpis a, aliquam magna. Praesent blandit ante ut nulla malesuada lobortis. Praesent a lobortis justo. Morbi congue, dui sed ornare faucibus, turpis felis vulputate arcu, lobortis posuere sem leo eget risus. Duis risus augue, dignissim ac tincidunt a, ullamcorper rutrum nisl. Ut ut ipsum vel purus viverra dapibus.
</p></igx-splitter-pane></igx-splitter>html
p {
padding: 016px;
}
scss
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Para comenzar con el componente Ignite UI for Angular Splitter, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:
ng add igniteui-angular
cmd
Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.
El siguiente paso es importar IgxSplitterModule en su archivo app.module.ts.
Alternativamente, a partir de 16.0.0, puede importar IgxSplitterComponent como una dependencia independiente o usar el token IGX_SPLITTER_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.
Ahora que tiene el módulo o las directivas Ignite UI for Angular Splitter importados, puede comenzar a usar el igx-splitter componente.
Uso del divisor de Angular
igxSplitter se inicializa con la etiqueta igx-splitter. Se pueden definir múltiples paneles divisores bajo un único componente igx-splitter. El contenido del panel tiene plantillas y se representará en su propio contenedor de tamaño variable.
Puede hacer que el divisor sea plegable o no mostrando u ocultando el controlador y los expansores del divisor, usando la nonCollapsible entrada. El valor predeterminado es false, por lo que el divisor se puede contraer.
El componente igxSplitterPane contiene varias propiedades de entrada. Puede establecer el tamaño del panel inicial utilizando la propiedad de entrada size. Las propiedades de entrada minSize y maxSize se pueden utilizar para establecer el tamaño mínimo o máximo permitido del panel. No se permite cambiar el tamaño más allá de minSize y maxSize.
<igx-splitterstyle='height: 100vh;' [type]="typeHorizontal" ><igx-splitter-panesize='50%'><igx-splitter [type]="typeVertical" [style.width]='"100%"'><igx-splitter-panesize='50%'><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in lacus eget turpis congue fermentum. Aliquam sollicitudin massa vel ullamcorper bibendum. Donec sit amet augue in justo fermentum facilisis vel quis quam. Vivamus eget iaculis nisi, vitae dignissim leo. Donec eget consectetur lacus. In viverra vehicula libero, quis dictum odio varius in. Phasellus aliquam elit et lectus ornare placerat. Aliquam vitae sapien facilisis, auctor enim quis, consectetur dui. Cras elementum velit eros, ut efficitur ante pellentesque in. Proin vulputate lacus dui, vitae imperdiet dui pharetra ac. Nunc sagittis, sapien et posuere varius, mauris justo tincidunt odio, in interdum lorem libero sed enim. Nulla placerat scelerisque felis vitae accumsan. Curabitur id tortor laoreet, luctus justo sit amet, viverra mi. Nunc laoreet auctor metus eget suscipit. Vestibulum vestibulum imperdiet pharetra. Sed ac dignissim dui. In vitae suscipit nunc. Praesent vel felis nulla. Nullam non justo elit. Ut quis eleifend libero. Morbi ut maximus dui, non tristique risus.
</p></igx-splitter-pane><igx-splitter-panesize='50%'><p>
Suspendisse potenti. Mauris vehicula neque ullamcorper tortor pulvinar gravida. Integer porttitor orci ex, ac vehicula nisi ultricies vel. Phasellus feugiat, urna eget congue sollicitudin, augue mi vulputate velit, in porttitor lacus orci sit amet eros. Donec mollis tempor mi. Ut sed justo consectetur, laoreet orci id, vestibulum velit. Aliquam ultricies arcu nec placerat eleifend. Integer ornare auctor mauris, vitae placerat est hendrerit ut.
</p></igx-splitter-pane></igx-splitter></igx-splitter-pane><igx-splitter-panesize='49%'><igx-splitter [type]="typeVertical" [style.width]='"100%"'><igx-splitter-panesize='50%'><p>
Duis auctor, diam id vehicula consequat, lacus tellus molestie magna, sed varius nisi quam eget nisl. Donec dignissim mi et elementum laoreet. Nam dignissim quis justo eu fermentum. Proin vestibulum, neque quis elementum tincidunt, nibh mi gravida purus, eget volutpat ipsum magna in orci. Donec id mauris vitae lectus molestie blandit. Praesent non quam interdum, efficitur lacus nec, gravida mauris. Ut ac ante maximus, ultrices turpis a, aliquam magna. Praesent blandit ante ut nulla malesuada lobortis. Praesent a lobortis justo. Morbi congue, dui sed ornare faucibus, turpis felis vulputate arcu, lobortis posuere sem leo eget risus. Duis risus augue, dignissim ac tincidunt a, ullamcorper rutrum nisl. Ut ut ipsum vel purus viverra dapibus. Maecenas efficitur nibh elementum, pellentesque sapien sit amet, fermentum sem. Pellentesque nisl mi, porta eget viverra a, tincidunt ac ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p></igx-splitter-pane><igx-splitter-panesize='50%'><p>
Suspendisse potenti. Proin faucibus venenatis purus in pellentesque. Nunc eget justo pretium massa pellentesque sodales. Phasellus orci ligula, condimentum et faucibus id, faucibus sit amet mauris. Praesent consequat cursus mauris, eget tempus lorem. Quisque vel leo nec massa aliquam pellentesque sit amet vel erat. Phasellus at mauris laoreet, egestas magna eget, dignissim nisl. Etiam non nibh nec orci elementum facilisis a vel tortor. Praesent sagittis mattis risus non tincidunt.
</p></igx-splitter-pane></igx-splitter></igx-splitter-pane></igx-splitter>html
p {
padding: 016px;
}
scss
Navegación por teclado
La navegación con el teclado está disponible de forma predeterminada en el componente divisor. Cuando enfoca una barra divisoria y presiona una de las siguientes combinaciones de teclas, se realiza el comportamiento descrito.
Combinaciones de teclas
Arrow Up: mueve la barra divisoria hacia arriba en un divisor vertical.
Arrow Down: mueve la barra divisoria hacia abajo en un divisor vertical.
Arrow Left: mueve la barra divisoria hacia la izquierda en un divisor horizontal.
Arrow Right: mueve la barra divisoria hacia la derecha en un divisor horizontal
Ctrl + Arrow Up: expande/contrae un panel en un divisor vertical
Ctrl + Arrow Down: expande/contrae un panel en un divisor vertical
Ctrl + Arrow Left: expande/contrae un panel en un divisor horizontal
Ctrl + Arrow Right: expande/contrae un panel en un divisor horizontal
Estilo
Para comenzar a diseñar el componente igxSplitter, debe importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:
@use"igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:// @import '~igniteui-angular/lib/core/styles/themes/index';scss
Puede cambiar los estilos predeterminados del divisor creando un nuevo tema que extienda el splitter-theme.
<igx-splitterstyle='height: 100vh;' [style.width]='"100%"'><igx-splitter-pane><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in lacus eget turpis congue fermentum. Aliquam sollicitudin massa vel ullamcorper bibendum. Donec sit amet augue in justo fermentum facilisis vel quis quam. Vivamus eget iaculis nisi, vitae dignissim leo. Donec eget consectetur lacus. In viverra vehicula libero, quis dictum odio varius in. Phasellus aliquam elit et lectus ornare placerat. Aliquam vitae sapien facilisis, auctor enim quis, consectetur dui. Cras elementum velit eros, ut efficitur ante pellentesque in. Proin vulputate lacus dui, vitae imperdiet dui pharetra ac. Nunc sagittis, sapien et posuere varius, mauris justo tincidunt odio, in interdum lorem libero sed enim. Nulla placerat scelerisque felis vitae accumsan. Curabitur id tortor laoreet, luctus justo sit amet, viverra mi. Nunc laoreet auctor metus eget suscipit. Vestibulum vestibulum imperdiet pharetra. Sed ac dignissim dui. In vitae suscipit nunc. Praesent vel felis nulla. Nullam non justo elit. Ut quis eleifend libero. Morbi ut maximus dui, non tristique risus.
</p></igx-splitter-pane><igx-splitter-pane><p>
Duis auctor, diam id vehicula consequat, lacus tellus molestie magna, sed varius nisi quam eget nisl. Donec dignissim mi et elementum laoreet. Nam dignissim quis justo eu fermentum. Proin vestibulum, neque quis elementum tincidunt, nibh mi gravida purus, eget volutpat ipsum magna in orci. Donec id mauris vitae lectus molestie blandit. Praesent non quam interdum, efficitur lacus nec, gravida mauris. Ut ac ante maximus, ultrices turpis a, aliquam magna. Praesent blandit ante ut nulla malesuada lobortis. Praesent a lobortis justo. Morbi congue, dui sed ornare faucibus, turpis felis vulputate arcu, lobortis posuere sem leo eget risus. Duis risus augue, dignissim ac tincidunt a, ullamcorper rutrum nisl. Ut ut ipsum vel purus viverra dapibus. Maecenas efficitur nibh elementum, pellentesque sapien sit amet, fermentum sem. Pellentesque nisl mi, porta eget viverra a, tincidunt ac ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p></igx-splitter-pane></igx-splitter>html