oruga

Пользовательский интерфейс Oruga похож на гусеницу, минимальный и все же функциональный. Это в твоих руках превращает его в бабочку

(?) =>?

Функции

Oruga - это легкая библиотека компонентов пользовательского интерфейса для Vue.js без какой -либо зависимости. Он предлагает набор легко настраиваемых компонентов и не зависит от какого -либо конкретного стиля или каркаса CSS (например, начальная загрузка, Bulma, Tailwindcss и т. Д.). Следовательно, он не предоставляет систему сетки или коммунальные услуги CSS, но вы можете интегрировать любую структуру CSS, которые вам нравятся. Oruga предоставляет вам набор функциональных компонентов, поэтому вы можете сосредоточиться только на аспектах пользовательского интерфейса/UX вашего приложения и может быть полностью гибким для будущих изменений, не касаясь линии JavaScript.

• CSS Framework Agnostic : нет зависимости от конкретной структуры/библиотеки CSS, но вы можете легко интегрировать компоненты с одним из них, потому что они полностью настраиваемы по -разному по -разному
• Компоненты со стероидами : большинство компонентов не являются простой оберткой нативных элементов, но они добавляют новые и пользовательские функции
• Легкий вес : нет другой внутренней зависимости и импорта только компонентов, которые вам нужны

Если вам нужна библиотека компонентов и вы хотите легко применить свои пользовательские стили, Oruga - это библиотека для вас! ?

Кроме того, если вы не хотите самостоятельно стилизовать, мы создали несколько тем, чтобы предоставить вам различные готовые стили. ?

Документация

Просмотрите онлайн -документацию здесь.

? Для получения дополнительной информации о настройке компонентов внимательно прочитайте раздел «Настройка» в документации.

? Чтобы увидеть Oruga в действии, перейдите в раздел примера в документации.

ПРИМЕЧАНИЕ. Исходный код примеров документации можно найти в каталогах examples для каждого компонента, он также служит демонстрацией.

Быстрый старт

? Oruga доступна для Vue.js версии 3.x

Настройка Oruga

1. Установите Oruga.

npm install @oruga-ui/oruga-next

2. Импортируйте компоненты:

• Чтобы начать быстро, используйте Oruga , чтобы зарегистрировать все компоненты:

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

• Для использования встряхивания дерева, либо вручную зарегистрировать компонент:

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

• или импортируйте их в свой SFC.

Настройка

Сверхдержава Oruga - это его конфигурируемость и агностический подход CSS. Каждый компонент может быть индивидуально настроен и настроен, определяя конкретные классы с использованием подхода со картинами класса. Поэтому Oruga поставляется без какого -либо стиля по умолчанию. Тем не менее, существует несколько официальных предопределенных конфигураций, называемых темами, которые вы можете включить и расширить, чтобы придать приложению индивидуальный вид и ощущение. И все компоненты поставлялись с предопределенными классами по умолчанию.

Пожалуйста, прочитайте раздел «Настройка» в документации Oruga.

Если вы хотите увидеть пример с полностью настроенной регистрационной формой с использованием Tailwind , Bulma , Bootstrap , Material или любой другой Framework CSS, посмотрите на официальный пример Oruga Multiframework (исходный код доступен здесь) или если вы больше знакомы с Tailwindcs 2, дайте нашу официальную демо -демо -тейс -код (исходный код)

Использование Oruga с Nuxt

Oruga в данный момент не предоставляет модуль Nuxt.js.

Вы можете использовать систему плагинов nuxt.js, добавив файл (например, oruga.js ) в папке plugins , содержащая:

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

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

Чтобы сделать этот плагин доступным в вашем приложении, добавьте этот файл в массив plugins в вашем nuxt.config.js

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

Чтобы понять, как плагины работают с nuxt.js, посмотрите на документацию плагина Nuxtjs.

Взгляните на официальный пример Nuxtjs + Oruga.

Внося

Пожалуйста, смотрите рекомендации.

Связаться с нами ?

→ Присоединяйтесь к серверу Discord Oruga.

Версии

Oruga использует семантическую версию 2.0.0 для пакетных версий.

Пока это все еще в бета -версии, версии будут следовать этой шаблоне: v0.yz , где:

• Y : Major (нарушение изменений)
• Z : несовершеннолетний или патч

Основная команда

Уолтер Томмаси

Андреа Стаги

Марсель Моравет

Участники

Спасибо всем участникам за улучшение этого проекта, изо дня в день

Полный список.

Кредиты

Логотип Oruga, разработанный Matteo Guadagnini

Изображения Oruga SVG для флажок и радиокомпонентов и активов праздников, созданных Fabrizio Masini

Лицензия

Код, выпущенный по лицензии MIT.