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.
<!DOCTYPE html><html><head><title>Divider Overview</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><p>First paragraph</p><igc-divider></igc-divider><p>Second paragraph</p></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
dependencias
En primer lugar, debe instalar el paquete Ignite UI for Web Components npm ejecutando el siguiente comando:
Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.
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>html
Uso
Divisor vertical
Si se establece el vertical atributo, la dirección del divisor cambiaría de horizontal a vertical.
<!DOCTYPE html><html><head><title>Vertical Divider</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><divclass="content"><p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa officiis
suscipit veniam vitae. Ab ad, dolores iure nostrum quo ratione rerum
sapiente ullam. Adipisci alias architecto eligendi est, expedita,
explicabo fugiat iure laudantium minima molestiae molestias nam
obcaecati placeat provident, quam repellendus vitae! Cupiditate eveniet,
facere harum hic quisquam sed.
</p><igc-dividervertical></igc-divider><p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa officiis
suscipit veniam vitae. Ab ad, dolores iure nostrum quo ratione rerum
sapiente ullam. Adipisci alias architecto eligendi est, expedita,
explicabo fugiat iure laudantium minima molestiae molestias nam
obcaecati placeat provident, quam repellendus vitae! Cupiditate eveniet,
facere harum hic quisquam sed.
</p></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
<!DOCTYPE html><html><head><title>Divider Dashed</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><p>First paragraph</p><igc-dividertype="dashed"></igc-divider><p>Second paragraph</p></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Divisor insertado
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.
<!DOCTYPE html><html><head><title>Divider With Middle Inset</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><divclass="parent"><divclass="content"><h4class="mb">Both sides inset.</h4><igc-dividerclass="withInset"middle="true"></igc-divider><pclass="mt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias at consectetur dolor magnam maiores nihil quasi quod repudiandae similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi.</p></div><divclass="content"><h4class="mb">Left side only(default).</h4><igc-dividerclass="withInset"></igc-divider><pclass="mt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias at consectetur dolor magnam maiores nihil quasi quod repudiandae similique. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, culpa delectus eius fuga ipsa iste laborum nemo, numquam omnis perferendis soluta sunt. Animi asperiores aspernatur assumenda doloribus eligendi.</p></div></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
<!DOCTYPE html><html><head><title>Divider Inside Select</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><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></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Variables CSS
Intercalación
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.