zhouao / winter-cardinal-ui Goto Github PK

A WebGL-based UI library.

npm i @wcardinal/wcardinal-ui

Please note that this package has no default exports.

import { loadAll, loadThemeWhiteAll, DApplication, DButtonCheck } from "@wcardinal/wcardinal-ui";

// Loads all the optional modules and the white theme.
// This is required for the tree shaking as explained later.
loadAll();
loadThemeWhiteAll();

// Make a new application
const application = new DApplication();

// Make a new check button
new DButtonCheck({
	parent: application.stage,
	text: {
		value: "Check"
	}
});

<script src="https://cdn.jsdelivr.net/npm/pixi.js/dist/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@wcardinal/wcardinal-ui/dist/wcardinal-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@wcardinal/wcardinal-ui/dist/wcardinal-ui-theme-white.min.js"></script>
<script>
(function(){
	'use strict';

	// Make a new application
	var application = new wcardinal.ui.DApplication();

	// Make a new check button
	new wcardinal.ui.DButtonCheck({
		parent: application.stage,
		text: {
			value: 'Check'
		}
	});
}());
</script>

All the classes are in the wcardinal.ui. Please note that the loadAll and the loadThemeWhiteALl is not required in this case. Prebuild files wcardinal-ui.min.js and wcardinal-ui-theme-white.min.js call the loadAll and the loadThemeWhiteAll for you.

See sample/cdn.html for complete example.

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.

The loadAll loads all the optional modules (e.g., DMenuItemCheck). And the loadThemeWhiteAll loads the white theme (e.g., DThemeWhite). To remove unnecessary modules from your build, pick load* functions you need.

import { loadThemeWhiteAll } from '@wcardinal/wcardinal-ui';

// Loads the white theme only.
// `DMenuItemCheck` will not be in your compiled package.
loadThemeWhiteAll();

• API document (In progress)
• Cheatsheet (In progress)

• Board
• Button
  • Ambient button
  • Check button (Left / right)
  • Gradient color button
  • Color button
  • Danger button
  • Date button
  • Datetime button
  • File button
  • Group button
  • Primary button
  • Radio button (Left / right)
  • Redo button
  • Secondary button
  • Time button
  • Undo button
• Canvas container and Canvas
• Chart
  • Line chart (In progress)
  • Bar chart (In progress)
• Diagram with tile server support
• Dialog
  • Gradient color dialog
  • Color dialog
  • Confirm dialog
    • For deleting
    • For discarding
  • Date dialog
  • Datetime dialog
  • Text input dialog
  • Message dialog
  • Processing dialog
  • Save-as dialog
  • Select dialog
  • Time dialog
• Input
  • Integer input
  • Real number input
  • Text input
• Layout
  • Horizontal layout
  • Vertical layout
• List
• Menu
• Side menu
• Menu bar
• Pane
• Picker
  • Gradient color picker
  • Color picker
  • Date picker
  • Datetime picker
  • Time picker
• Scroll bar
  • Horizontal scroll bar
  • Vertical scroll bar
• Slider (In progress)
• Table
• Tree (In progress)

• WebGL 1.0 support
• Promise support
• Base64-encoded SVG support for textures
  • IE11 does not support this.
  • Not required if your theme doesn't use it
• Stencil support

The following commands are for building @wcardinal/wcardinal-ui itself. For most users, you do not need to do this.

npm run build

npm run watch:ts

and then in an another terminal

npm run watch:rollup

npm run build:api

./gradlew compileCheatsheet

npm run build
./gradlew copyJSToSampleDir

npm run lint

To fix all the auto-fixable lint errors, do the following:

npm run lint:fix

Apache License Version 2.0.

The default theme uses Material Design icons by Google licensed under Apache license version 2.0.
https://github.com/google/material-design-icons