Web Components Divider
El divisor de Ignite UI for Web Components permite al autor del contenido crear fácilmente una regla horizontal/vertical como un descanso entre el contenido para organizar mejor la información en una página.
Web Components Divider Example
Dependencies
Primero, debe instalar el paquete npm Ignite UI for Web Components ejecutando el siguiente comando:
npm install igniteui-webcomponents
import { defineComponents, IgcDividerComponent } from 'igniteui-webcomponents';
defineComponents(IgcDividerComponent);
Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.
Es IgcDividerComponent capaz de mostrar imágenes, iniciales o cualquier otro contenido, incluidos iconos. Declarar un IgcDividerComponent es tan simple como:
<igc-divider></igc-divider>
Usage
Vertical Divider
Si se establece el vertical atributo, la dirección del divisor cambiaría de horizontal a vertical.
<igc-divider vertical></igc-divider>
Type
El Type atributo determina si se representa una línea divisoria solid o una dashed línea divisoria. El valor predeterminado es solid.
<igc-divider type="dashed"></igc-divider>
Inset Divider
Se IgcDividerComponent puede colocar en ambos lados. En inset el divisor, establezca el middle atributo en true en combinación con la--inset variable css. Esto reducirá la línea divisoria desde ambos lados. El valor predeterminado del middle atributo es false.
/* DividerStyles.css */
.withInset{
--inset: 100px;
--color:red;
}
// Both side
<igc-divider middle="true" class="withInset"></igc-divider>
// Left side only
<igc-divider></igc-divider>
Using Divider Inside Select Component
En el ejemplo siguiente se muestra cómo se puede integrar el IgcDividerComponent para IgcSelectComponent distinguir dos grupos de elementos.
<igc-select>
<igc-select-item>Item 1</igc-select-item>
<igc-select-item>Item 2</igc-select-item>
<igc-divider></igc-divider>
<igc-select-item>Item 3</igc-select-item>
</igc-select>
CSS Variables
Inset
La--inset variable css reduce el divisor en la cantidad dada desde el principio. Si se establece en el medio, se encogerá desde ambos lados.
Color
La--color variable css establece el color del divisor.