A user experience framework with higher-level capabilities, designed to bring simplicity and elegance to building cross-device, rich experiences.
Address package sync and release issues.
Adds new positioning and modal capabilities.
New properties available in ux.design
:
surfaceBackground
: set here main surface background/foreground, esp. for cardssurfaceForeground
controlLabelColor
: set here the default label color for all controlsdisabledBackground
: set here the default background/foreground for all disabled statesdisabledForeground
error
: set here the default error coloronError
: 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 componentsComponents 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
filled
or outline
variants (exemple <ux-input variant="outline"></ux-input>
dense
: (exemple <ux-input dense></ux-input>
Floating Labels or Placeholder
label
bindable for floating labelsplaceholder
bindable for labels that disappear when field has a value<ux-field><label>...</label><ux-input>...</ux-input></ux-field>
markup for labels that stay on top of the field all the timeLeading and Trailing Icons
ux-select
and ux-datepicker
due to the arrow and calendar icons present in the control by default<ux-input><ux-icon icon="person" slot="leading-icon"></ux-input>
Affected components:
ux-input
ux-textarea
ux-select
ux-datepicker
ux-chip-input
flatBackground
, flatForeground
, textBackground
, textForeground
, outlineBackground
and outlineBorder
. Each of this colors now derived from background
and foreground
or accentBackground
and accentForeground
backgroundDisabled
and foregroundDisabled
in disabledBackground
and disabledForeground
New ux-card-separator
component.
no-margin
attribute.Defaults to surface colors
surfaceBackground
and surfaceForeground
design properties.New .ux-card__thumnail
class
disableBorder
theme propertycheckedBackground
and checkmarkColor
by activeColor
indeterminate
stateux-chip-list
componentux-chip-input
theme supports now all the new control theme propertiesux-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 purposestrackHeight
theme propertyThe 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>
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.