Blazor ComboBox Templates

    O componente ComboBox Ignite UI for Blazor permite definir modelos personalizados para diferentes áreas, como itens, cabeçalhos de grupo, lista vazia e ícones.

    ComboBox Templates Example

    Template Types

    Item Template

    O é um modelo personalizado que, itemTemplate se definido, deve ser usado ao renderizar itens na lista de opções.

    Para modelar seus itens em um aplicativo Blazor, você precisa definir um modelo em um arquivo JavaScript separado. Vamos criar um novo arquivo no wwwroot diretório chamado templates.js.

    Neste arquivo, podemos declarar um novo modelo de item assim:

    Certifique-se de incluir o templates.js​ ​index.html arquivo abaixo wwwroot.

    Então, em nosso aplicativo, podemos nos referir ao modelo que declaramos por meio da ItemTemplateScript propriedade.

    <IgbCombo ItemTemplateScript="ComboItemTemplate"></IgbCombo>

    Group Header Template

    O é um modelo personalizado que, groupHeaderTemplate se definido, deve ser usado ao renderizar cabeçalhos de grupo na lista de opções.

    Então, em nosso aplicativo, podemos nos referir ao modelo que declaramos por meio da GroupHeaderTemplateScript propriedade.

    <IgbCombo GroupHeaderTemplateScript="ComboGroupHeaderTemplate"></IgbCombo>

    Slots

    Além de modelos personalizados, o componente ComboBox Ignite UI for Blazor expõe vários slots que permitem aos usuários passar conteúdo personalizado para diferentes partes de combinação.

    Header Slot

    Para renderizar um cabeçalho personalizado acima da lista de opções, passe o conteúdo para o header slot:

    <IgbCombo> 
    <header slot="header">
        Header content goes here
    </header>
</IgbCombo>

    Para renderizar um rodapé personalizado abaixo da lista de opções, passe o conteúdo para o footer slot:

    <IgbCombo> 
    <footer slot="footer">
        Footer content goes here
    </footer>
</IgbCombo>

    Empty List Slot

    Para renderizar um conteúdo personalizado quando a operação de filtragem não retornar nenhum resultado, use o empty slot:

    <IgbCombo> 
    <div slot="empty">¯\_(ツ)_/¯</div>
</IgbCombo>

    Toggle Icon Slot

    O ícone de alternância na entrada de combinação também pode ser modificado através do toggle-icon slot:

    <IgbCombo> 
    <IgbIcon name="down" slot="toggle-icon"></IgbIcon>
</IgbCombo>

    Clear Icon Slot

    O ícone de limpeza pode ser alterado através do clear-icon slot:

    <IgbCombo> 
    <IgbIcon name="clear" slot="clear-icon"></IgbIcon>
</IgbCombo>

    Additional Resources