Angular Desktop UI
This is a collection for native desktop like user interface components in Angular, especially useful for Electron apps.
It starts with MacOS support, light and dark mode.
Goal
The goal of this library is to provide native looking and behaving Angular UI components like buttons, checkboxes, inputs, tables, etc to match the user interface of common operating systems. Since all native UI designs of browser engines (like <input>, <button>) look and behave differently in browsers engines compared to the actual operating system UI you have to manually
design those elements when you want to provide a native look and feel. Material design and alike is for websites and not desktop applications.
The most obvious use-case is for Electron apps. Although it also works in browsers directly, you get the most out of it when using Electron since it provides certain Electron features to make your life easier.
Features
- Button, Inputs, Radiobox, Checkbox, Slider, Dropdown
- Window decoration: Actionbar, sidebar, splitter. Linux Ubuntu with Closer/Minimize/Maximize buttons
- Lists and tables with sorting, dynamic columns, context menu
- Emoji chooser
- Form handling
- Custom icon abstraction (converting automatically into svg font) for your svg icons.
- Simple dialog system (build-in alert, prompt, confirm)
- Zoneless support for high-performance
- App menu abstraction ("File, Edit, View" menus of desktop applications)
Angular versions:
With the new rendering engine Ivy this library will switch to Angular v9 Ivy support only.
It might work in the non-ivy renderer as well, but is not tested.
Documentation
The full interactive auto-generated documentation is available at angular-desktop-ui.marcj.dev.
Installation
Getting started documentation.
As example see marcj/angular-desktop-ui-example you can find an freshly installed Angular v9 with configured angular-desktop-ui. Take a look at the last commit.
Screens
<dui-form #form>
<dui-form-row label="Username">
<dui-input [(ngModel)]="username"></dui-input>
</dui-form-row>
<dui-form-row label="Really?">
<dui-checkbox [(ngModel)]="checkbox">Checkbox A</dui-checkbox>
</dui-form-row>
<dui-form-row label="Which one">
<dui-radiobox [(ngModel)]="radioValue" value="a">Radio A</dui-radiobox><br/>
<dui-radiobox [(ngModel)]="radioValue" value="b">Radio B</dui-radiobox>
<p>
Chosen: {{radioValue}}
</p>
</dui-form-row>
<dui-form-row label="Another one">
<dui-select [(ngModel)]="radioValue" placeholder="Please choose">
<dui-option value="a">Option A</dui-option>
<dui-option value="b">Option B</dui-option>
</dui-select>
</dui-form-row>
<dui-form-row label="Empty">
<dui-select style="width: 100px;" [(ngModel)]="selectBox1" placeholder="Please choose">
<dui-option value="x">Option X</dui-option>
<dui-option value="y">Option Y</dui-option>
</dui-select>
</dui-form-row>
<diu-button [submitForm]="form">Send</diu-button>
</dui-form>
124 Sep 16, 2022
2.2k Jan 8, 2023
41 Oct 27, 2022
2 Dec 17, 2021
35 Sep 8, 2021
82 Dec 24, 2022
9 Nov 10, 2022
9 Mar 3, 2022
3 Feb 22, 2022
193 Dec 22, 2022
463 Dec 23, 2022
8 Jun 7, 2022
34 Oct 18, 2022
6.8k Jan 1, 2023
266 Dec 28, 2022
1 Feb 13, 2022
46 Sep 13, 2022
2 Jan 5, 2022
58 Dec 18, 2022