Custom Elements for a Metro-inspired mobile shell: pivot navigation, frame/page transitions, and a splash screen—built with vanilla JS, Shadow DOM, and CSS.
npm install
npm run dev
# open http://localhost:3000 (auto-opens by default)The viewer loads examples/index.html by default.
- DiscoUI Capacitor - Capacitor plugin for Android, Electron, and Web.
Import the bundle and drop the components:
<disco-frame>
<disco-pivot-page app-title="DISCO APP">
<disco-pivot-item header="Home">…</disco-pivot-item>
<disco-pivot-item header="Music">…</disco-pivot-item>
<disco-pivot-item header="About">…</disco-pivot-item>
</disco-pivot-page>
</disco-frame>Set the theme and accent color via attributes on the <html> tag:
<html disco-theme="auto" disco-accent="#d80073" disco-font="Times New Roman"><html disco-theme="dark" disco-accent="green">src/components/— web components (frame, page, splash, pivot, hub, list view, buttons, inputs)examples/— demo apps and viewer shellvite.config.js— bundling/dev-server config
npm run dev— start Vite dev server with hot reloadnpm run build— production bundlenpm run test:unit— run unit tests (Vitest + jsdom)npm run test:e2e— run browser tests (Playwright)
- Password Box
- Radio Button
- Text Box
- Install dependencies:
npm install. - Run tests:
npm test. - Ensure
npm run typespasses before opening a PR.
| Control | Description | |
|---|---|---|
| ✅ | DiscoApp | App entry/runner (launch, ready, splash control) |
| ✅ | DiscoAppBar | Bottom app bar / command area |
| ✅ | DiscoButton | Button control |
| ✅ | DiscoCheckbox | Checkbox input |
| ✅ | DiscoComboBox | Combo box input |
| ✅ | DiscoContextMenu | Contextual menu / right-click menu |
| ✅ | DiscoDatePicker | Date picker input |
| ✅ | DiscoDialog | Programmatic dialog with backdrop and flipped panel |
| ✅ | DiscoFlipView | Displays a collection of items one at a time |
| ✅ | DiscoFlyout | Fullscreen flyout modal with flip/slide animations |
| ✅ | DiscoFrame | Top-level frame handling navigation, theme, and transitions |
| ✅ | DiscoHub | Panoramic layout with parallax header |
| DiscoHyperlink | Displays a hyperlink inline | |
| DiscoHyperlinkButton | Button that displays a hyperlink | |
| ✅ | DiscoImage | Image with loading progress bar and fade transitions |
| ✅ | DiscoListView / DiscoListItem | Virtualized list for long lists |
| ✅ | DiscoLongListSelector | Jump list for grouped list views |
| ✅ | DiscoMediaElement | Audio media playback with custom controls and volume flyout |
| ✅ | DiscoMessageDialog | Programmatic message dialog with text and actions |
| ✅ | DiscoPage | Base page component for content and transitions (used by variants) |
| ✅ | DiscoPivot / DiscoPivotPage | Pivot navigation (pivot page and pivot items) |
| ✅ | DiscoProgressRing | Circular indeterminate progress indicator |
| ✅ | DiscoProgressBar | Indeterminate/determinate progress indicator |
| ✅ | DiscoPasswordBox | Password input |
| ✅ | DiscoRadioButton | Radio button input |
| ✅ | DiscoScrollView | Scrollable content area |
| ✅ | DiscoSlider | Slider input control |
| ✅ | DiscoLoopingSelector | Base class for wheel/column pickers |
| ✅ | DiscoSplash | Optional splash screen (modes: none, auto, manual) |
| ✅ | DiscoTextBox | Single-line text input |
| ✅ | DiscoTimePicker | Time picker input |
| ✅ | DiscoTimeSpanPicker | Duration picker input |
| ✅ | DiscoToggleButton | On/off toggle button |
| ✅ | DiscoToggleSwitch | On/off toggle control |
...maybe more to come! (feel free to open issues/PRs for them)
This project is licensed under the MIT License.
For any inquiries or feedback, feel free to reach out!
