Skip to content
Native desktop UI kit for Angular. Angular package for native macOS desktop UI (Electron/Web)
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs/assets
packages
.editorconfig
.gitignore
README.md
lerna.json
package.json

README.md

Angular Desktop UI

This is a collection for native desktop like user interface components in Angular 7, especially useful for Electron apps.

It starts with MacOS support, light and dark mode.

Work in progress

This work is in progress and is sometimes streamed via twitch.tv: https://www.twitch.tv/marc__js

Screens

MacOS Light

MacOS Dark

<dui-form>
    <dui-form-row label="Username">
        <input type="text" value="Value" />
    </dui-form-row>

    <dui-form-row label="Really?">
        <dui-checkbox>Checkbox A</dui-checkbox>
    </dui-form-row>

    <dui-form-row label="Which one">
        <dui-radiobox [(model)]="radioValue" value="a">Radio A</dui-radiobox><br/>
        <dui-radiobox [(model)]="radioValue" value="b">Radio B</dui-radiobox>
        <p>
            Chosen: {{radioValue}}
        </p>
    </dui-form-row>

    <dui-form-row label="Another one">
        <dui-select [(model)]="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;" [(model)]="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>
</dui-form>

<diu-button>Send</diu-button>

Installation

Install in your already existing Angular project.

npm install @marcj/angular-desktop-ui

Add assets to your Angular assets.

# angular.json
# projects.architect.build.assets:

              {
                "glob": "**/*",
                "input": "./node_modules/@marcj/angular-desktop-ui/assets/fonts",
                "output": "assets/fonts"
              }

Add to tsconfig.json

tsconfig.json

  "include": [
    "./src",
    "node_modules/@marcj/angular-desktop-ui/**/*.ts"
  ]
You can’t perform that action at this time.