oruga

Origa da interface do usuário é como uma lagarta, mínima e ainda funcional. Está em suas mãos transformando -o em uma borboleta

(?) =>?

Características

ORUGA é uma biblioteca de componentes da interface do usuário leve para o vue.js sem qualquer dependência. Ele oferece um conjunto de componentes facilmente personalizáveis ​​e não depende de nenhum estilo específico ou estrutura CSS (como bootstrap, bulma, caudawindcss, etc ...). Portanto, ele não fornece um sistema de grade ou utilitários CSS, mas você pode integrar qualquer estrutura CSS que desejar. O ORUGA fornece um conjunto de componentes funcionais, para que você possa se concentrar apenas nos aspectos da UI/UX do seu aplicativo e pode ser totalmente flexível para mudanças futuras sem precisar tocar uma linha de JavaScript.

• Estrutura CSS AGNOSTIC : Sem dependência de uma estrutura/biblioteca CSS específica, mas você pode integrar facilmente os componentes com um deles, porque eles são totalmente personalizáveis ​​de maneiras diferentes
• Componentes com esteróides : a maioria dos componentes não é uma embalagem simples de elementos nativos, mas adicionam recursos novos e personalizados
• Leve : nenhuma outra dependência interna e importar apenas componentes que você precisa

Se você precisar de uma biblioteca de componentes e deseja aplicar facilmente seus estilos personalizados, o ORUGA é a biblioteca para você! ?

Além disso, se você não quiser estilizar tudo sozinho, criamos vários temas para fornecer uma variedade de estilos prontos para uso. ?

Documentação

Procure documentação online aqui.

? Para obter mais informações sobre a personalização dos componentes, leia cuidadosamente a seção "personalização" na documentação.

? Para ver o ORUGA em ação, vá para a seção Exemplo na documentação.

Nota: O código -fonte dos exemplos de documentação pode ser encontrado nos diretórios examples para cada componente, ele serve como demonstração também.

Início rápido

? ORUGA está disponível para Vue.js versão 3.x

Configure oruga

1. Instale o ORUGA.

npm install @oruga-ui/oruga-next

2. Importar os componentes:

• Para começar rapidamente, use Oruga para registrar todos os componentes:

   import { createApp } from 'vue'
  import Oruga from '@oruga-ui/oruga-next' ;
  
  createApp ( ... ) . use ( Oruga ) ;

• Para usar tremores de árvores, registre componente manualmente:

   import { createApp } from 'vue'
  import { OField , OInput } from '@oruga-ui/oruga'
  
  createApp ( ... )
    . use ( OField )
    . use ( OInput )

• ou importá -los em seu SFC.

Personalização

A superpotência da ORUGA é sua configuração e sua abordagem agnóstica da estrutura CSS. Cada componente pode ser personalizado e configurado individualmente, definindo classes específicas usando uma abordagem de mapeamento de classe. Portanto, o ORUGA vem sem qualquer estilo por padrão. No entanto, existem várias configurações predefinidas oficiais chamadas de temas, que você pode incluir e estender para dar ao seu aplicativo uma aparência individual. E todos os componentes vieram com classes predefinidas por padrão.

Leia a seção "personalização" na documentação do ORUGA.

Se você deseja ver um exemplo com um formulário de registro totalmente personalizado usando Tailwind , Bulma , Bootstrap , Material ou qualquer outra estrutura CSS, dê uma olhada no exemplo oficial do ORUGA Multiframework (código -fonte disponível aqui) ou se você está mais familiarizado com o Tailwindcss 2, dê nosso Demo Official Tailwindcss.

Usando oruga com nuxt

ORUGA não fornece um módulo Nuxt.js no momento.

Você pode usar o sistema de plugins nuxt.js adicionando um arquivo (por exemplo, oruga.js ) na pasta plugins que contém:

 import Oruga from '@oruga-ui/oruga-next' ;

export default defineNuxtPlugin ( ( nuxtApp ) => {
  nuxtApp . vueApp . use ( Oruga ) ;
} ) ;

Para disponibilizar este plug -in em seu aplicativo, adicione este arquivo à matriz plugins em seu nuxt.config.js

plugins: [ { src : '~plugins/oruga.js' } ]

Para entender como os plugins funcionam com o Nuxt.js, dê uma olhada na documentação do plug -in NuxtJS.

Dê uma olhada no exemplo oficial do NuxtJS + ORUGA.

Contribuindo

Consulte as diretrizes contribuintes.

Contate-nos ?

→ Participe do servidor ORUGA Discord.

Versão

Oriuga usa versânticos semânticos 2.0.0 para versões de pacotes.

Enquanto ainda estiver na versão beta, as versões seguirão esse padrão: v0.yz , onde:

• Y : Major (mudanças de quebra)
• Z : menor ou patch

Equipe Core

Walter Tommasi

Andrea Stagi

Marcel Moravek

Colaboradores

Obrigado a todos os envolvidos por melhorar este projeto, dia a dia

Lista completa.

Créditos

Logotipo ORUGA projetado por Matteo Guadagnini

Imagens ORUGA SVG para caixa de seleção e componentes de rádio e ativos de férias criados por Fabrizio Masini

Licença

Código liberado sob licença do MIT.