Diretivas Iônicas VS diretivas de materiais angulares com Estrutura Iônica


98

Quero usar iônico com design de material. Estou preso entre o uso de diretivas iônicas com CSS personalizado e material angular

Eu li que usando diretivas iônicas, obtemos muitos recursos eficientes, como

  • Os dados do aplicativo são lembrados com o roteador de IU, mesmo depois de navegar para outra visualização e voltar para a página

  • Os itens da lista iônica são renderizados apenas para exibir a altura e reutilizados ao rolar para baixo ou para cima

e muitas melhorias de desempenho.

Mas, se eu usar diretivas iônicas, elas não têm o design do material.

Se eu usar o material angular, não terei essas melhorias de desempenho e recursos extras necessários para um aplicativo móvel.

As diretivas de material angular são como

<md-list>
  <md-item ng-repeat="item in items">
    Hello, {{item}}!
  </md-item>
</md-list>

As diretivas iônicas são como

<ion-list>
  <ion-item ng-repeat="item in items">
    Hello, {{item}}!
  </ion-item>
</ion-list>

Parece que o Ionic está financiando o desenvolvimento de projetos de material angular , então por que o material angular não é compatível para uso com iônico?

Como posso usar componentes de material angular sem perder as melhorias de desempenho e recursos do iônico?

OU

existe uma ideia melhor para usar o design de material com iônico?


Provavelmente levará algum tempo, até que ngMaterial e iônico funcionem um com o outro. O Ionic sempre deve ser compatível com iOS também. Não tenho certeza de onde o Ionix está indo em termos de design. Quando o projeto começou, eles queriam que os aplicativos fossem idênticos em todas as plataformas. Eles superaram esse objetivo há algum tempo e agora se dirigem para mais continuidade de plataforma, o que também é mostrado no anúncio de emprego. Você pode querer perguntar diretamente aos desenvolvedores (o fórum Ionic é um bom lugar para perguntar) sobre o roteiro para o design de material.
Markus Müller

1
Eu postei em fóruns iônicos, sem sorte. Alguns dos aplicativos do Google estão usando material design tanto no Android quanto no iOS. Mas atualmente estou interessado em android. iOS é mais caro e todos os anos :(. Isso desencoraja iniciantes como eu a aderir ao iOS. Acho que o iOS deve usar cobrança limitada para a conta de desenvolvedor.
Vamsi

Tenho certeza que eles anunciarão o roadmap pós v1 em um futuro próximo.
Markus Müller

Respostas:


71

Encontrei um framework CSS de design de material conhecido como Materializecss . Parece promissor. É apenas um framework simples de CSS e javascript.

http://materializecss.com/

Vantagens sobre outras estruturas

  1. Classes CSS puras, não entrarão em conflito com as diretivas iônicas. Sem perda de desempenho.
  2. De todos os frameworks que vi, este é o único que segue rigorosamente as regras do material design
  3. Quase pronto, tem cerca de 50 colaboradores, sua versão atual 0.95.3 em menos de 6 meses
  4. Fácil de usar. Bem documentado com navegação inteligente de recursos.
  5. Ele tem quase todos os recursos de design de material necessários para um aplicativo.

Esta página http://materializecss.com/getting-started.html mostrará como incluí-lo em seus projetos.

Espero que isso ajude a qualquer um de vocês que esteja procurando por uma boa estrutura de design de material.

ATUALIZAÇÃO: 09/07/2015

Encontrei outra bela e poderosa estrutura CSS para material design

Material Design Light http://www.getmdl.io/

É leve, tem animações suaves e rápidas, com uma aparência muito boa. Foi feito por um dos desenvolvedores do Google. É oficialmente promovido pelo google https://developers.google.com/web/ . Está ficando bastante popular, experimente. Comparação com Material Angular

ATUALIZAÇÃO: 23/10/2015

Ionic2 tem suporte InBuilt para material design no Android

É oficial, você pode assistir a demo do Ionic2 no AngularConnect , ele tem material design como padrão para Android. Não precisamos nos preocupar em escolher uma estrutura de Material Design.


1
O grande problema com isso é que ele precisa do jQuery
darryn.ten

1
Precisamos apenas do css. Popup's, modais e outros recursos existem no iônico. Portanto, jquery geralmente não é necessário, a menos que estejamos tentando usar recursos de materializar javascript que não estão no iônico.
Vamsi

Você tem algum feedback sobre o material Design Light getmdl.io? Estou aqui tendo o mesmo problema e dúvida sobre design iônico + material. Agradecemos qualquer feedback sobre a biblioteca
Javier Salinas

Eu não usei pessoalmente Material Design Light, parece promissor. Aqui é a comparação de Material Design Lighte bootstrap tutorialzine.com/2015/07/comparing-bootstrap-with-mdl , Se você já usou inicialização ele vai ajudar. O Google está promovendo isso em sua página de desenvolvedor web. Portanto, deve ser bom o suficiente.
Vamsi

25

Existe um projeto relativamente novo chamado Ionic Material .

Eu experimentei e funciona muito bem, mas esteja avisado que ainda está no modo "Pré-lançamento".

De acordo com o repo do github, ele deve entrar no Alpha em abril de 2015.

Pode ser instalado com caramanchão

bower install ionic-material

Isso é praticamente tudo que você precisa fazer, mas esteja avisado, existem bugs e a documentação é basicamente inexistente.

Boa sorte!


9
Já vi uma biblioteca de material iônico antes, mas o problema é 1. Isso não está perto da conclusão. Nenhuma documentação disponível. 2. Este não está em desenvolvimento ativo e não tem um bom suporte. apenas um cara trabalhou nele por 7 dias, como visto hoje. Portanto, é difícil usá-lo em um aplicativo de produção sem garantia. 3. Angular-material, iônico tem bom financiamento e suporte e muito bons desenvolvedores estão trabalhando nisso, em bom ritmo. para que eu possa confiar neles.
Vamsi

3

Ionic Material e Ionic Material Design Lite são duas novas bibliotecas que pretendem ser uma extensão da estrutura iônica. Embora um pouco imaturo, funciona bem com componentes iônicos e suporta bem o tema do material.

Isso provavelmente poderia dar mais uma visão.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.