Скачать пользовательский интерфейс ng sq ui

ng sq ui

Сторонние компоненты

Updated to angular 12.2.4 + bug fixes

Скачать

Ng-sq-ui

Простой качественный набор пользовательского интерфейса для угловой

Построенный разработчиками для разработчиков!

Док

Вы найдете описание публичного API для каждого компонента. Компоненты сгруппированы с помощью модулей. Любые свойства, которые вы можете увидеть с помощью инспекции кода, которые остаются в стороне от этой документации, для внутреннего использования, и вы не должны полагаться на них.

Любые виды публичных интерфейсов и услуг также включены.

Домашняя страница
Установка
Формации модуля
Модалмодуль
ProgressBarmodule
DateTimePickerModule
DataTableModule
CommonModule
О нас
Программа щедрости
Живые примеры
Поиск неисправностей

Нарушение изменений:

2,0.1, связанные со всеми пакетами совместимы с угловым 14+. Если вам нужна обратно-совместимая версия, пожалуйста, обратитесь к 1.XY Packages, как указано ниже.

Примечание:
Для проектов, которые используют двигатель View, вместо Ivy (Angular 10 ~ Angular 12), используйте следующую версию для каждого пакета:

@sq-ui/ng-sq-ui: 1.3.3
@sq-ui/ng-datetime-picker: 1.1.2
@sq-ui/ng-sq-common: 1.1.5
@sq-ui/ng-modal: 1.1.2
@sq-ui/ng-datatable: 1.1.3

Для проектов, которые используют угловую версию <9, используйте следующую версию для каждого пакета:

@sq-ui/ng-sq-ui: 1.1.5
@sq-ui/ng-datetime-picker: 1.1.0
@sq-ui/ng-sq-common: 1.0.3
@sq-ui/ng-modal: 1.0.6
@sq-ui/ng-datatable: 1.0.3

Установка

Вы можете клонировать / загрузить это репо или установить его как зависимость узла.

 npm i @sq-ui/ng-sq-ui@latest --save

-- или --

 yarn add @sq-ui/ng-sq-ui@latest

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

Импортируйте NGSQUIMODULE в свой модуль:

 import { NgSqUiModule } from '@sq-ui/ng-sq-ui';

а затем включите его в массив imports вашего декоратора @ngmodule ():

 @NgModule({
  declarations: [ //... ],
  imports: [
    NgSqUiModule,
    //...
  ],
  //...

NG-SQ-UI не поставляется с определенным шрифтом. Включая тему по умолчанию также необязательно. Обратитесь к нашей странице живых примеров.

Нужна сетка? Мы вас покрыли!

Добавить стили в angular.json

 "styles" : [
  " src/styles.css " ,
  " ./node_modules/@sq-ui/ng-sq-common/sq-ui-theme.scss " ,
  " ./node_modules/@sq-ui/ng-sq-ui/styles/form-elements.scss " ,
  " ./node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css " ,
  " ./node_modules/@fortawesome/fontawesome-free/css/solid.min.css " ,
  " ./node_modules/@fortawesome/fontawesome-free/css/regular.min.css " ,
],

Применить стиль к компонентам

Чтобы использовать наш стиль, просто добавьте class="sq" на родительский элемент.

 < body class =" sq " >
  < div class =" row " >
    < sq-input ... > </ sq-input >
  </ div >
</ body >

Зависимости

NG-SQ-UI зависит от:

Font-Caste и Immutable.js (оба будут установлены с NG-SQ-UI)

Попробуйте его на местном уровне

 git clone [email protected]:SQ-UI/ng-sq-ui.git
npm i
npm start

-- или --

 git clone [email protected]:SQ-UI/ng-sq-ui.git
yarn install
npm start

Библиотеки автоматически смотрят при npm start :

Компилятор TypeScript для этого проекта настроен для поиска библиотек в dist/ и если dist/ не существует, он относится к исходному коду библиотек. Вот почему вы должны npm start вместо того, чтобы просто ng serve --open -NPM, npm start удалять dist/ (если он существует), а затем запускает ng serve --open . Это готовит компилятор к прослушиванию изменений в рамках projects/ каталога.