Releases · aurelia/ux

Core

New properties available in ux.design :

surfaceBackground : set here main surface background/foreground, esp. for cards
surfaceForeground
controlLabelColor : set here the default label color for all controls
disabledBackground : set here the default background/foreground for all disabled states
disabledForeground
error : set here the default error color
onError : this one is available for when you need to write text on top of a surface using the error color. It is currently not used in Aurelia UX components

Input Controls

Components that act as an input control are now more consistent and can be themed like Material Design components. Here are some cool stuff available:

Themable properties (same for all input-like components)

foreground
foregroundLabel
background
backgroundHover
activeColor
fontSize
letterSpacing
labelFontSize
labelLetterSpacing
lineHeight
labelLineHeight
borderColor
borderRadius
borderWidth
borderActiveWidth
disabledForeground
disabledBackground
error

Filled, Outline, Dense

change the style of the input with filled or outline variants (exemple <ux-input variant="outline"></ux-input>
Reduce the visual impact of the input with dense: (exemple <ux-input dense></ux-input>

Floating Labels or Placeholder

Floating labels are the default way, but you can choose:
Use the label bindable for floating labels
Use the placeholder bindable for labels that disappear when field has a value
Use the <ux-field><label>...</label><ux-input>...</ux-input></ux-field> markup for labels that stay on top of the field all the time

Leading and Trailing Icons

All input controls host leading and trailing icons slots. The trailing icon is deactivated for ux-select and ux-datepicker due to the arrow and calendar icons present in the control by default
Exemple: <ux-input><ux-icon icon="person" slot="leading-icon"></ux-input>

Affected components:

ux-input
ux-textarea
ux-select
ux-datepicker
ux-chip-input

Button

Removed some theme properties: flatBackground, flatForeground, textBackground, textForeground, outlineBackground and outlineBorder. Each of this colors now derived from background and foreground or accentBackground and accentForeground
Renamed backgroundDisabled and foregroundDisabled in disabledBackground and disabledForeground

Card

New ux-card-separator component.

This component makes it easy to add separator in cards (see Material Design guidelines)
By default it adds a vertical margin (up and down) of the separator. You can disable this margin with no-margin attribute.
You can include the separator between cards parts (header and content for exemple) or inside the content. It will adjust its width accordingly

Defaults to surface colors

Cards default color properties are now defaulted with the new surfaceBackground and surfaceForeground design properties.

New .ux-card__thumnail class

Checkbox and Radio

Removed disableBorder theme property
Replaces checkedBackground and checkmarkColor by activeColor
Add the indeterminate state

Chip-Input

New ux-chip-list component
ux-chip-input theme supports now all the new control theme properties
ux-chip now have a selected state (bindable)
ux-chip also supports variants such as filled or outline
ux-chip now have a thumbnail slot for icon or avatar purposes

Slider

Add new trackHeight theme property
Mobile-friendly: now works with touch gestures

New Custom Attributes

The new ux-choice-container and ux-choice-item can be used to make any markup act as a selector component. It works works particularly well with ux-list or ux-chip-list but you can use them anywhere. Here are two exemples:

<!-- bind a property to the ux-choice-container attribute to get the value of the choice -->
<!-- bind a property to the ux-choice attribute to give it its choice value -->
<ux-chip-list ux-choice-container.bind="labelPosition">
  <ux-chip variant="outline" ux-choice="floating">Floating</ux-chip>
  <ux-chip variant="outline" ux-choice="placeholder">Placeholder</ux-chip>
  <ux-chip variant="outline" ux-choice="top">On Top</ux-chip>
</ux-chip-list>

<!-- If the binded property in ux-choice-container is an array, then the selector will allow multiple choices -->
<ux-chip-list type="inline" ux-choice-container.bind="region">
  <ux-chip variant.bind="variant" ux-choice="basel">Basel</ux-chip>
  <ux-chip variant.bind="variant" ux-choice="bern">Bern</ux-chip>
  <ux-chip variant.bind="variant" ux-choice="geneva">Geneva</ux-chip>
  <ux-chip variant.bind="variant" ux-choice="lausanne">Lausanne</ux-chip>
  <ux-chip variant.bind="variant" ux-choice="zurich">Zürich</ux-chip>
</ux-chip-list>

Icons

This version do not automatically import any icons by default. From now on, you must decide on a per-project basis what icon sets you want to use.

Here are a few exemples on how you can prepare your icon sets:

1. Import full set when configuring the plugin

As a quick start, you can import the same icon sets that was previously shipped with the package by configuring the plugin as such in your main.ts

// main.ts

/* Add this line to import the full set into an `icons` variable */
import icons from '@aurelia-ux/icons/sets/full-array.min.json';

/* When you initilize the plugin, you can pass on this `icons` variable */
aurelia.use.plugin(PLATFORM.moduleName('@aurelia-ux/icons'), {icons: icons})

/* That's it ! */

2. Lazy loading later

// app.ts

import { inject } from 'aurelia-framework';
import { UxIconMap } from '@aurelia-ux/icons';
// here we import the full set from @aurelia-ux/icon but you can define any
// icon set in the proper format (see below)
import icons from '@aurelia-ux/icons/sets/full-array.min.json';

@inject(UxIconMap)
export class App {
  constructor(private iconMap: UxIconMap) {
    iconMap.registerIcons(icons);
  }
}

3. Import Font Awesome Icons

If you want to use Font Awesome icons, you can use them inside the <ux-icon> component. First you need to install the icons like:

npm install @fortawesome/fontawesome-free

Then you can import them like so:

// app.ts

import { inject } from 'aurelia-framework';
import { UxIconMap, UxIconRegArray } from '@aurelia-ux/icons';

// You can import any font awesome set like so.
// They will all become available in the ux-icon component
import '@fortawesome/fontawesome-free/js/brands';
import '@fortawesome/fontawesome-free/js/regular';

const w = (window as any);

@inject(UxIconMap)
export class App {
  constructor(private uxIconMap: UxIconMap) {
    if (w.___FONT_AWESOME___ && w.___FONT_AWESOME___.styles) {
      type FabIcon = [number, number, Array<any>, string, string];
      for (let fKey in (window as any).___FONT_AWESOME___.styles) {
        let fIcons: {[key: string]: FabIcon} = (window as any).___FONT_AWESOME___.styles[fKey];
        let fSet: Array<UxIconRegArray> = [];
        for (let iconKey in fIcons) {
          const icon = fIcons[iconKey];
          fSet.push([iconKey, `<path d="${icon[4]}"/></svg>`, icon[0], icon[1]]);
        }
        this.uxIconMap.registerIcons(fSet);
      }
    }
  }
}

Registered icon list

You can get the list of all registered icons by calling iconMap.getAllKeys() which will return a Array<string> with all icon names. Knowing this you could add the following code to your template to have a preview of all your registered icons with their names:

<ux-grid>
  <ux-card sm="2" repeat.for="name of uxIconMap.getAllKeys()">
    <ux-icon icon="${name}"></ux-icon>
    <br >${name}
  </ux-card>
</ux-grid>

Icon Set Format

You can register icons in an object or array form. The array form is slightly lighter.

// array form
[
  [
    "person", // icon name
    "<path d=\"M12 ...\"></path>", // svg path (without the svg tag)
    24, // optional (viewport width, default to 24)
    24 // optional (viewport height, default to 24)
  ],
  [
    "other-icon-name",
    "<path>...</path">
  ],
  ...
]

// object form
[
  {
    "name": "person", // icon name
    "svg": "<svg viewBox=\"0 0 24 24\"><path d=\"M12 ...\"></path></svg>" // svg path (with the svg tag)
  },
]

Importing JSON

Note for typescript users: make sure that your tsconfig.json is set to allow importing JSON files. This can be achieved by settings "resolveJsonModule": true in the compilerOptions section.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

aurelia-ux

Features

Bug Fixes

Core

Input Controls

Button

Card

Checkbox and Radio

Chip-Input

Slider

New Custom Attributes

Icons

Aurelia UX 0.16

Features

Releases: aurelia/ux

0.25.0

0.24.0

0.23.0

aurelia-ux

Features

Bug Fixes

0.20.0

0.19.0

0.18.1

0.18.0

Core

Input Controls

Button

Card

Checkbox and Radio

Chip-Input

Slider

New Custom Attributes

Icons

v0.17.0

v0.16.0

Aurelia UX 0.16

Features

v0.14.1