Estilo condicional de grade Blazor

    O recurso Ignite UI for Blazor Condicional Styling no Blazor Grid permite estilização personalizada em nível de fileira ou célula. AIgbGrid funcionalidade de Estilização Condicional é usada para enfatizar visualmente ou destacar dados que atendem a certos critérios, facilitando para os usuários identificarem informações ou tendências importantes dentro da grade.

    Grid Conditional Row Styling

    OIgbGrid componente em Ignite UI for Blazor oferece duas formas de estilizar condicionalmente as linhas com base em regras personalizadas.

    Mais adiante neste tópico, abordaremos os dois com mais detalhes.

    Using Row Classes

    Você pode estilizar condicionalmente asIgbGrid linhas definindo aRowClasses entrada e definir regras personalizadas.

    <IgbGrid AutoGenerate="true" Id="grid" Data="CustomersData" Name="grid" RowClassesScript="RowClassesHandler" @ref="grid">
</IgbGrid>

    ARowClasses entrada aceita um objeto literal, contendo pares-chave-valor, onde a chave é o nome da classe CSS, enquanto o valor é uma função de callback que retorna um valor booleano ou booleano.

    igRegisterScript("RowClassesHandler", () => {
    return {
        activeRow: (row) => row.index === 0
    };
}, true);

    .activeRow {
    border: 2px solid #fc81b8;
    border-left: 3px solid #e41c77;
}

    Demo

    Using Row Styles

    OIgbGrid controle expõe aRowStyles propriedade que permite o estilo condicional das linhas de dados. De forma semelhante,RowClasses aceita um literal de objeto onde as chaves são propriedades de estilo e os valores são expressões para avaliação. Além disso, você pode aplicar um penteado normal (sem nenhuma condição).

    A assinatura de callback para ambosRowStyles eRowClasses é:

    (row) => boolean

    Vamos definir nossos estilos:

    igRegisterScript("WebGridRowStylesHandler", () => {
    return {
        'background': (row) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '#FF000088' : '#00000000',
        'border': (row) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '2px solid' : '1px solid',
        'border-color': (row) => (+row.data['Change'] < 0 && +row.data['AnnualChange'] < 0) ? '#FF000099' : '#E9E9E9'
    };
}, true);

    <IgbGrid AutoGenerate="true" Id="grid" Data="CustomersData" Name="grid" RowStylesScript="WebGridRowStylesHandler" @ref="grid">
</IgbGrid>

    Demo

    Grid Conditional Cell Styling

    Visão geral

    OIgbGrid componente em Ignite UI for Blazor oferece duas formas de estilizar condicionalmente as células com base em regras personalizadas.

    • Definindo aIgbColumn entradaCellClasses para um literal de objeto contendo pares-chave-valor. A chave é o nome da classe CSS, enquanto o valor é uma função de callback que retorna um valor booleano ou booleano. O resultado é um estilo material conveniente da célula.

    Using Cell Classes

    Você pode estilizar condicionalmente asIgbGrid células definindo oIgbColumn CellClasses Insira e defina regras personalizadas.

    <IgbColumn Field="BeatsPerMinute" CellClassesScript="CellClassesHandler">

    ACellClasses entrada aceita um objeto literal, contendo pares-chave-valor, onde a chave é o nome da classe CSS, enquanto o valor é uma função de callback que retorna um valor booleano ou booleano.

    igRegisterScript("CellClassesHandler", () => {
    return {
        downFont: (rowData, columnKey, cellValue, rowIndex) => rowData[columnKey] <= 95,
        upFont: (rowData, columnKey, cellValue, rowIndex) => rowData[columnKey] > 95
    };
}, true);

    .upFont {
    color: green !important;
}

.downFont {
    color: red !important;
}

    Demo

    • Usando aIgbColumn entradaCellStyles que aceita um objeto literal onde as chaves são propriedades de estilo e os valores são expressões para avaliação.

    A assinatura de callback para amboscellStyles ecellClasses agora foi alterada para:

    (rowData, columnKey, cellValue, rowIndex) => boolean

    Using Cell Styles

    Colunas expõem aCellStyles propriedade que permite o estilo condicional das células da coluna. De forma semelhante,CellClasses aceita um literal de objeto onde as chaves são propriedades de estilo e os valores são expressões para avaliação. Além disso, você pode aplicar o penteado normal com facilidade (sem nenhuma condição).

    Vamos definir nossos estilos:

    igRegisterScript("WebGridCellStylesHandler", () => {
    return {
        background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
        color: (rowData, columnKey, cellValue, rowIndex) => {
            if (columnKey === "Position") {
                switch (cellValue) {
                    case "up": return "#28a745";
                    case "down": return "#dc3545";
                    case "current": return "#17a2b8"
                }
            }
        }
    };
}, true);

    <IgbColumn CellStylesScript="WebGridCellStylesHandler">
</IgbColumn>

    Demo

    Known issues and limitations

    • Se houver células associadas à mesma condição (de colunas diferentes) e uma célula for atualizada, as outras células não serão atualizadas com base no novo valor, se a condição for atendida.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.