Fique ótimo com Ignite UI para temas JavaScript

Como desenvolvedor, você deseja garantir que seu aplicativo tenha uma boa aparência e funcione em todos os tipos de dispositivos, incluindo desktops, tablets e dispositivos móveis. Os aplicativos da Web modernos devem ser responsivos e habilitados para toque, mas exigirão muito CSS/SASS /LESS. Como desenvolvedor, você pode não ser habilidoso em CSS ou não ter tempo para aprendê-lo para uso em seu aplicativo. Ignite UI para JavaScript pode ajudar fornecendo vários temas que podem ser usados no estado em que se encontram em seu aplicativo, ou você pode usar o Ignite UI JavaScript Theme Generator para criar temas que atendam aos requisitos específicos do seu aplicativo.

Saiba mais sobre o Ignite UI para JavaScript Theme Generator. Você também pode aprender mais sobre Angular em Angular Essentials, um e-book gratuito publicado pela Infragistics.

Temas fornecidos:

  1. Infragistics theme
  2. Metro theme
  3. iOS theme
  4. Default bootstrap theme
  5. Superhero bootstrap theme
  6. Yeti bootstrap theme
  7. Tema de bootstrap plano

Configurando o projeto

Você pode baixar o projeto inicial desta lição clicando aqui. (Você também pode baixar o projeto final clicando aqui.)

Após baixar o projeto, navegue até o diretório e execute os comandos abaixo:

  1. npm install
  2. npm start

Execute o comando npm install para instalar todas as dependências e execute o comando npm start para executar o aplicativo Angular. Se a configuração do projeto estiver correta, você terá um aplicativo Angular em execução, conforme mostrado na imagem abaixo:

Configurando o projeto

No projeto, abra o arquivo index.html e navegue até a linha número 9 a 10 ou procure as referências CSS na seção head. Você descobrirá que o aplicativo está se referindo ao tema metro do Ignite UI para JavaScript CDN, conforme mostrado na listagem abaixo:

<link href="http://cdn-na.infragistics.com/IgniteUI/latest/css/themes/metro/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/IgniteUI/latest/css/structure/infragistics.css" rel="stylesheet" />

Para trabalhar com qualquer tema, você precisa de uma referência de Infragistics.css além da referência do tema.

Passo 1 Mudando para o tema iOS

Altere facilmente o Ignite UI existente para temas JavaScript alternando para a referência de tema desejada. Para alterar o tema do tema metro para o tema iOS, deixe a referência de infragitics.css como está e modifique a referência do tema Ignite UI para JavaScript na seção de cabeçalho index.html, conforme mostrado abaixo.

<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/ios/infragistics.theme.css" rel="stylesheet" />

Navegue até o aplicativo para descobrir que todos os controles foram alterados para o tema iOS. Você pode notar que a aparência da grade e o design do botão de navegação foram alterados.

Mudando para o tema iOS

Passo 2 Mudando para o tema padrão do Bootstrap

Ignite UI para JavaScript fornece um tema de bootstrap padrão. Para alterar o tema para o tema de bootstrap, deixe a referência de infragitics.css como está e modifique a referência do tema Ignite UI para JavaScript na seção de cabeçalho index.html, conforme mostrado abaixo:

<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/bootstrap/infragistics.theme.css" rel="stylesheet" />

Navegue até o aplicativo para descobrir que todos os controles foram alterados para o tema de bootstrap básico padrão, juntamente com a aparência da grade e o design do botão de navegação.

Mudando para o tema padrão do Bootstrap

Passo 3 Usando seu próprio tema Bootstrap

Ignite UI para JavaScript ajuda você a criar seu próprio tema baseado em bootstrap. Basta fazer o upload de um arquivo variables.less no gerador de temas de bootstrap Ignite UI for JavaScript e baixar o tema (combinação de LESS, CSS cumprido e imagens) para usar em seu aplicativo.

Saiba mais sobre o gerador de temas Ignite UI para JavaScript. O Ignite UI Bootstrap Theme Generator ajuda você de duas maneiras possíveis:

  1. Para personalizar Ignite UI existentes para temas JavaScript.
  2. Para criar um novo tema de bootstrap usando o arquivo variables.less.

Nas etapas anteriores, você usou temas fornecidos pelo Ignite UI para JavaScript. Para usar seu próprio tema de bootstrap, siga as etapas abaixo. Observe que, para esta lição, você não precisa executar essas etapas, pois um tema baseado em bootstrap foi adicionado ao projeto.

  1. Você pode criar seu próprio arquivo variables.less ou usar um dos temas de bootstrap do Bootswatch. Para usar um tema do bootswatch, selecione o tema e baixe o arquivo variables.less.
  2. Carregue o arquivo variables.less para o Ignite UI Theme Generator.
  3. Baixe o tema e descompacte-o.
  4. Salve o tema baixado em seu projeto de aplicativo.

O projeto contém uma pasta CSS, que contém um tema gerado pelo construtor de temas Ignite UI para JavaScript. Para usar este tema: Na seção head do index.html, adicione uma referência do tema e bootstrap conforme mostrado abaixo. Exclua a referência do tema metro (linha número 9) e adicione as referências abaixo antes da referência./css/structure/infragistics.css.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="css/themes/infragistics.theme.css" rel="stylesheet" type="text/css" />

Navegue até o aplicativo para descobrir que ele está usando o novo tema.

Etapa 3: usando seu próprio tema Bootstrap

Conclusão

Além dos temas fornecidos pelo Ignite UI para JavaScript, você pode usar seus próprios temas ou o jQuery UI Theme Roller. Para saber mais, consulte Estilo e temas Ignite UI.

Ignite UI para JavaScript suporta os designs mais recentes disponíveis no desenvolvimento web moderno e permite que você escreva aplicativos web mais rapidamente.