Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kor-ui/kor
User Interface Component Library based on LitElement / lit-html
https://github.com/kor-ui/kor
design-system kor lit-element lit-html litelement webcomponents
Last synced: 3 months ago
JSON representation
User Interface Component Library based on LitElement / lit-html
- Host: GitHub
- URL: https://github.com/kor-ui/kor
- Owner: kor-ui
- License: mit
- Created: 2019-11-25T16:27:39.000Z (over 4 years ago)
- Default Branch: develop
- Last Pushed: 2023-03-02T06:36:37.000Z (over 1 year ago)
- Last Synced: 2024-04-09T06:13:11.843Z (3 months ago)
- Topics: design-system, kor, lit-element, lit-html, litelement, webcomponents
- Language: TypeScript
- Homepage: https://www.kor-ui.com
- Size: 5.45 MB
- Stars: 258
- Watchers: 11
- Forks: 18
- Open Issues: 16
-
Metadata Files:
- Readme: readme.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Lists
- awesome-lit - Kor - An open source Design System and lightweight UI Component Library. (Design Systems)
- awesome-kor - Repository - Official Kor UI repository. (Useful Links)
- awesome-stars - kor - html | kor-ui | 190 | (TypeScript)
README
# kor
### Visit [www.kor-ui.com](https://www.kor-ui.com/) for samples, APIs and other design/development documentation
A design system / UI component library built with LitElement. Based on the web components standards, kor is browser-, framework- and OS-agnostic and can be used to build web, desktop and mobile applications using Angular, Vue, React, plain JS and so on.
## Installation
Install the library through npm:
```
npm install @kor-ui/kor --save
```
---
## Integration of Components
### Load the whole bundle
The most simple and common way of including the components into an application is by loading the core bundle:
```js
// include bundle through module import
import '@kor-ui/kor'
// if using JS, css can also be imported. if using TS, use html stylesheet as shown below
import '@kor-ui/kor/kor-styles.css'
```
*or*
```html
```
### Load single components
As an alternative, you can also load individual components to reduce loading time. Be aware that components are inter-dependent and should be imported independently:
```js
// include individual components and styles through module import
import '@kor-ui/kor/components/button'
import '@kor-ui/kor/components/text'
// if using JS, css can also be imported. if using TS, use html stylesheet as shown below
import '@kor-ui/kor/kor-styles.css'
```
*or*
```html
```
---
## Usage
Use the kor components as if they were native HTML tags. All components allow one and two-way data binding and the attributes fire an `-changed` event when modified:
```html
```