0.0.27 • Published 2 years ago

au-cardigan v0.0.27

Weekly downloads
2
License
MIT
Repository
github
Last release
2 years ago

Cardigan UI

A robust set of UI components for Aurelia 2.

Installation

npm install au-cardigan

Usage

Import the configuration object and register it with Aurelia during app boostrap. The following would usually go inside of main.ts / main.js.

import { CardiganConfiguration } from 'au-cardigan';

Aurelia
  .register(
    CardiganConfiguration,
  )
  .app(App)
  .start(

Components

Cardigan features a small, but growing number of components.

  • <au-button> wraps the native <button> component
  • <au-heading> wraps the native heading elements, h1 through to h6
  • <au-image> wraps the native <img> element, but also offers support for scaling, srcSet and more
  • <au-modal> a lightweight modal implementation
  • <au-select> wraps the native select element

Styling Components

Styling components uses CSS Shadow Parts which allow you complete stylistic control over each component used. Each component in this library exposes a part name which you can then reference in your CSS styles.

For example, to style a primary button in your app you can reference the element and the primary style part like this:

au-button::part(primary) {
    background: blue;
}

Similarly, if you have added a class to your button, reference the class instead:

.my-button::part(primary) {
    background: blue;
}
0.0.27

2 years ago

0.0.22

3 years ago

0.0.23

3 years ago

0.0.24

3 years ago

0.0.25

3 years ago

0.0.26

3 years ago

0.0.20

4 years ago

0.0.19

4 years ago

0.0.18

4 years ago

0.0.16

5 years ago

0.0.17

5 years ago

0.0.15

5 years ago

0.0.14

5 years ago

0.0.13

5 years ago

0.0.12

5 years ago

0.0.11

5 years ago

0.0.10

5 years ago

0.0.9

5 years ago

0.0.8

5 years ago

0.0.7

5 years ago

0.0.5

5 years ago

0.0.6

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.4

5 years ago

0.0.1

5 years ago