https://github.com/winter-cardinal/winter-cardinal-ui
WebGL-based UI library
https://github.com/winter-cardinal/winter-cardinal-ui
ui webapp webgl
Last synced: 5 months ago
JSON representation
WebGL-based UI library
- Host: GitHub
- URL: https://github.com/winter-cardinal/winter-cardinal-ui
- Owner: winter-cardinal
- License: apache-2.0
- Created: 2019-10-23T03:11:53.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-12-31T04:59:08.000Z (6 months ago)
- Last Synced: 2026-01-04T06:53:07.908Z (5 months ago)
- Topics: ui, webapp, webgl
- Language: JavaScript
- Homepage:
- Size: 320 MB
- Stars: 67
- Watchers: 5
- Forks: 17
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### WinterCardinal UI
WebGL-based UI library
### Installation
#### NPM
```
npm i @wcardinal/wcardinal-ui
```
Please note that this package has no default exports.
```javascript
import { loadAll, loadThemeWhiteEnUsAll, DApplication, DButtonCheck } from "@wcardinal/wcardinal-ui";
// Loads all the optional modules and the white theme.
// This is required for the tree shaking.
loadAll();
loadThemeWhiteEnUsAll();
// Make a new application
const application = new DApplication();
// Make a new check button
new DButtonCheck({
parent: application.stage,
text: {
value: "Check"
}
});
```
#### CDN
```html
(() => {
"use strict";
// Make a new application
const application = new wcardinal.ui.DApplication();
// Make a new check button
new wcardinal.ui.DButtonCheck({
parent: application.stage,
text: {
value: "Check"
}
});
})();
```
All the classes are in `wcardinal.ui`.
Please note that `loadAll` and `loadThemeWhiteEnUsAll` is not required in this case.
Prebuild files `wcardinal-ui.min.js` and `wcardinal-ui-theme-white.min.js` call `loadAll` and `loadThemeWhiteEnUsAll` for you.
See [sample/cdn](https://winter-cardinal.github.io/winter-cardinal-ui/sample/white/other/cdn.html) for a complete example.
### Tree shaking
The NPM package `@wcardinal/wcardinal-ui` is large in its size
because all the UI classes and their themes are included.
This is why the tree shaking is important for this library.
`loadAll` loads all the optional modules (e.g., `DMenuItemCheck`).
And `loadThemeWhiteEnUsAll` loads the white theme (e.g., `DThemeWhite`).
To remove unnecessary modules from your build, pick `load*` functions you need.
```javascript
import { loadThemeWhiteEnUsAll } from "@wcardinal/wcardinal-ui";
// Loads the white theme only.
// `DMenuItemCheck` will not be in your compiled package, for instance.
loadThemeWhiteEnUsAll();
```
### Documentation
* [API document](https://winter-cardinal.github.io/winter-cardinal-ui/api/)
* Samples
* [White theme](https://winter-cardinal.github.io/winter-cardinal-ui/sample/white/)
* [Dark theme](https://winter-cardinal.github.io/winter-cardinal-ui/sample/dark/)
* [Starter](https://github.com/winter-cardinal/winter-cardinal-starter)
### Requirements
* WebGL 1.0 support
* ES2017 support
* Base64-encoded SVG support for textures
* IE11 does not support this.
* Not required if your theme doesn't use it
* Stencil support
### How to Build
The following commands are for building `@wcardinal/wcardinal-ui` itself.
#### JS for Release
```shell
npm run build
```
#### JS for Development
```shell
npm run watch:ts
```
and then in an another terminal
```shell
npm run watch:rollup
```
#### Development Server
```shell
npm start
```
#### API Document
Update `gitRevision` in `typedoc.json` and then do
```shell
npm run build:api
```
#### Sample Index Page
```shell
npm run build:sample:index
```
#### Dark Samples
```shell
npm run build:sample:index
npm run build:sample:dark
```
#### Samples for GitHub Pages
```shell
npm run build
npm run build:sample:dark
npm run build:sample
```
#### Linting
```shell
npm run lint
```
To fix all the auto-fixable lint errors, do the following:
```shell
npm run lint:fix
```
### License
Apache License Version 2.0.
The default theme uses Material design icons developed by Google and licensed under Apache license version 2.0.\
https://github.com/google/material-design-icons