Skeleton for Aurelia with Material Design Components. See Aurelia and Material Components Web.
For a list of components: MDC components.
For a live demo: Demo
Please execute the following steps. Please do not clone the GIT repository before it is stated in the steps.
Create Aurelia project by running npx makes aurelia/v1
.
Choose a project with at least WebPack, TypeScript and SASS or follow the next steps.
- Choose Custom Project
- Choose App
- Choose WebPack
- Choose Web or .NET
- Choose TypeScript
- Choose any HTML template
- Choose SASS
- Choose any PostCSS processing
- Choose any unit test runner
- Choose any integration test runner
- Choose any code editor
- Choose any scaffolding
- Choose docker or not
- Choose Yes to install dependencies
- Install Material Design components via
npm install material-components-web --save
- Add the following to the
index.ejs
file after the<title>
tag:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
- Add the following attribute to top of the
app.ts
file:
import "@material/typography/mdc-typography.scss";
- Add the attribute
class=mdc-typography--headline1
to theh1
tag in theapp.html
file: - Run the project with
npm start
. The Welcome message should have the Material Design look.
- Clone the repository to the root folder
- Install Aurelia Validation via
npm install aurelia-validation --save
- Add following part to the
aurelia.use
in themain.ts
file
.plugin(PLATFORM.moduleName('aurelia-validation'))
.feature(PLATFORM.moduleName('mdc/index'))
- For the demo change in
main.ts
the reference toapp
todemo/demo-app
- Run the project with
au run
.