Angular UI components kit of Unicorn Platform.
npm install --save @unicorn.io/components
https://nitsnets.github.io/unicorn_components
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'
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