nitsnets / unicorn_components

Angular UI components kit of Unicorn Platform.

Unicorn Components

Angular UI components kit of Unicorn Platform.

---

Install

npm install --save @unicorn.io/components

Demo

https://nitsnets.github.io/unicorn_components

Usage

Import the module

import { UnicornComponentsModule } from '@unicorn.io/components';

@NgModule({
  imports: [
    UnicornComponentsModule.forRoot()
  ]
})
export class AppModule { }

Start using components

<uni-button label="My button"></uni-button>

Select styles theme (Optional)

@import './node_modules/@unicorn.io/components/styles/themes/cms/all'

List of components

Group	Component	Naming	Status	Docs	Demo
Charts	Chart	<uni-chart>	🔵	Docs	-
"	Legend	<uni-chart-legend>	🔵	Docs	-
"	Tooltip	<uni-chart-tooltip>	🔴	Docs	-
Containers	Accordion	<uni-accordion>	✅	Docs	Demo
"	Aside	<uni-aside>	✅	Docs	Demo
"	Body	<uni-body>	✅	Docs	Demo
"	Box	<uni-box>	✅	Docs	Demo
"	Header	<uni-header>	✅	Docs	Demo
"	Layout	<uni-layout>	✅	Docs	Demo
"	Modal	<uni-modal>	✅	Docs	-
"	Popup	<uni-popup>	✅	Docs	Demo
"	Row	<uni-row>	✅	Docs	Demo
"	Row Spacer	<uni-row-spacer>	✅	Docs	Demo
"	Tabs	<uni-tabs>	✅	Docs	Demo
Forms	Button toggle	<uni-button-toggle>	✅	Docs	Demo
"	Checkbox	<uni-checkbox>	✅	Docs	Demo
"	Code Editor	<uni-code-editor>	🔴	Docs	-
"	Date Picker	<uni-date-picker>	✅	Docs	Demo
"	Date Range Picker	<uni-daterange-picker>	✅	Docs	Demo
"	Date Time Picker	<uni-datetime-picker>	✅	Docs	Demo
"	Image Picker	<uni-image-picker>	🔵	Docs	-
"	Input	<uni-input>	✅	Docs	Demo
"	Radio	<uni-radio>	✅	Docs	Demo
"	Select	<uni-select>	✅	Docs	Demo
"	Slider	<uni-slider>	🔵	Docs	Demo
"	Slider Range	<uni-slider-range>	🔵	Docs	Demo
"	Time Picker	<uni-time-picker>	✅	Docs	Demo
"	Toggle	<uni-toggle>	✅	Docs	Demo
UI	Button	<uni-button>	✅	Docs	Demo
"	Button File	<uni-button-file>	🔵	Docs	Demo
"	Button Group	<uni-button-group>	✅	Docs	Demo
"	Button Header	<uni-button-header>	✅	Docs	Demo
"	Button Menu	<uni-button-menu>	✅	Docs	Demo
"	Button Popup	<uni-button-popup>	✅	Docs	Demo
"	Calendar	<uni-calendar>	✅	Docs	Demo
"	Carousel	<uni-carousel>	🔵	Docs	-
"	Clock	<uni-clock>	✅	Docs	Demo
"	Datagrid	<uni-datagrid>	🔵	Docs	Demo
"	Filters	<uni-filters>	🔵	Docs	Demo
"	Filters List	<uni-filters-list>	🔵	Docs	-
"	List	<uni-list>	🔵	Docs	Demo
"	Menu	<uni-menu>	✅	Docs	Demo
"	Paginator	<uni-paginator>	✅	Docs	Demo
"	Tree	<uni-tree>	⚪	Docs	-
Utils	Alert	<uni-alert>	✅	Docs	Demo
"	Badge	<uni-badge>	✅	Docs	Demo
"	Chip	<uni-chip>	🔵	Docs	Demo
"	Face	<uni-face>	✅	Docs	Demo
"	Icon	<uni-icon>	✅	Docs	-
"	Progress	<uni-progress>	✅	Docs	Demo
"	Separator	<uni-separator>	✅	Docs	-
"	Spinner	<uni-spinner>	✅	Docs	Demo
"	Toast	<uni-toast>	🔴	Docs	-
"	Tooltip	<uni-tooltip>	🔴	Docs	-
Views	Filtered Datagrid	<uni-filtered-datagrid>	🔵	Docs	-
"	Search Header	<uni-search-header>	🔵	Docs	-

Legend:

⚪ Coming soon

🔵 Initial

✅ Stable

🔴 Unstable

⚫ Deprecated

unicorn_components's Issues

Calendar - rangeFrom

Hi, i want use calendar rangeFrom.
<uni-calendar [(model)]="daySelected"></uni-calendar>
I've tried a lot of combinations but I do not want to work, can you give me an example of how to do it?

uni-button-file URL correction

The documentation of the uni-button-file component leads to the uni-button documentation. However, when I want to edit the README.md, it leads to the correct documentation. Any ideas?

npm ERR! Please make sure you have the correct access rights

Hi, why i cant download this package?
npm install --save unicorn.io/components

`npm ERR! Error while executing:
npm ERR! C:\Program Files\Git\cmd\git.EXE ls-remote -h -t ssh://[email protected]/unicorn.io/components.git
npm ERR!
npm ERR! Host key verification failed.
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR!
npm ERR! exited with error code: 128

npm ERR! A complete log of this run can be found in:`

Improve components test coverage

Units test per component must be placed at:

/src/components/[category]/[component]/[name].component.spec.ts

Any help writing unit tests for one or more component will be welcome.

Translate component docs to English

Currently, the component docs are written in Spanish. They are located at:

/src/components/[category]/[component]/README.md

Any help translating one or more component's documentation will be welcome.

Allow chip deletion when backspace pressed

At component <uni-select> with chips and multiple attributes activated.
If the search-box is empty and the user presses backspace, the last chip added should be deleted.

Safari shows a blank page

It looks awesome in Chrome but in the latest safari on the latest macOS it just shows blank.

Charts overlap in the demo page