Close Docs

API Reference

This section collects the public APIs exposed by DiscoUI.

Core

Components

See the full list under Components.

Extending DiscoUI Classes

If you want to create custom components or pages, extend the base classes and reuse the animation set.

Custom Page Example

import DiscoPage from 'discoui/src/components/disco-page.js';
import DiscoAnimations from 'discoui/src/components/animations/disco-animations.js';

class MyPage extends DiscoPage {
	async animateInFn(options = { direction: 'forward' }) {
		await DiscoAnimations.animationSet.page.in(this, options);
	}

	async animateOutFn(options = { direction: 'forward' }) {
		await DiscoAnimations.animationSet.page.out(this, options);
	}
}

customElements.define('my-page', MyPage);

Custom Element Example

import DiscoUIElement from 'discoui/src/components/disco-ui-element.js';

class MyTile extends DiscoUIElement {
	constructor() {
		super();
		this.attachShadow({ mode: 'open' });
		this.shadowRoot.innerHTML = '<slot></slot>';
	}
}

customElements.define('my-tile', MyTile);