Installation
Load Tsunami from the CDN with two tags, or install it from npm for an app with a bundler.
Install
Load the files from jsDelivr, which serves each release tag of
the GitHub repository. Load the script in
<head> as a plain script, not
type="module": it then applies the saved theme before
the first paint, so there is no flash and no inline script to add.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Djirasak/tsunami-framework@v1.4.0/dist/tsunami.min.css">
<script src="https://cdn.jsdelivr.net/gh/Djirasak/tsunami-framework@v1.4.0/dist/tsunami.min.js"></script>
The fonts and flags load from the same tag, next to
dist/. The libraries some components need come from
the same place, for example
@v1.4.0/dist/chart.min.js, loaded before the
Tsunami script. That includes the code editor's
dist/monaco/vs/loader.js.
Or install it from npm, for an app with a bundler. The package
holds dist/, fonts/ and
flags/ side by side, and its TypeScript declarations
type window.tsunami and the
tsunami:* events once you import it.
npm install @djirasak/tsunami-uipnpm add @djirasak/tsunami-uiyarn add @djirasak/tsunami-uibun add @djirasak/tsunami-uiimport "@djirasak/tsunami-ui/css";
import "@djirasak/tsunami-ui";
A bundler runs the script after the first paint, so people who
chose dark can see a flash. To avoid it, load
node_modules/@djirasak/tsunami-ui/dist/tsunami.min.js
as a plain <script> in
<head> instead. The libraries some components
need (chart, date picker, editor, code editor, drag and drop) are
files in dist/ that you load with a
<script> before the Tsunami script.
To host the files yourself, copy dist/,
fonts/ and flags/ side by side and link
dist/tsunami.min.css and
dist/tsunami.min.js.