ng-halfmoon
Version:
Angular Library to build upon the halfmoon-framework
67 lines (54 loc) • 1.77 kB
Markdown
# NgHalfmoon
This is the angular-library for [halfmoon](https://www.gethalfmoon.com/)
The documentation can be found via this [link](https://nostalgic-thompson-e79979.netlify.app/)
## Installation
You can install `ng-halfmoon` via npm
```bash
npm install halfmoon @types/halfmoon @fortawesome/fontawesome-free ng-halfmoon
```
## Setup
in your angular.json you need to add the following lines
```json
{
"styles": [
"node_modules/halfmoon/css/halfmoon.min.css",
"node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css"
],
"scripts": [
"node_modules/@fortawesome/fontawesome-free/js/brands.min.js",
"node_modules/@fortawesome/fontawesome-free/js/solid.min.js",
"node_modules/@fortawesome/fontawesome-free/js/fontawesome.min.js",
"node_modules/halfmoon/js/halfmoon.min.js"
]
}
```
Simply import the `NgHalfmoonModule` into your Application
```typescript
import {NgHalfmoonModule} from "ng-halfmoon";
@NgModule({
imports: [
NgHalfmoonModule
],
})
export class AppModule {
}
```
```html
<button hmButton appearance="primary">
```
If this shows the button in primary like on the halfmoon-docs you've made everything right.
## Going forward
Once your done setting everything up you can take a look at the repo there is a link to a documentation-app.
There you can take a look at how the current-components behave and what you can do to use them.
## Current Components
Currently there are only a few components available for this library but more is already in development.
You can use halfmoon as you would use it with normal html.
### Basics
* Button
* DarkModeService
### Form
* Input (with Containers to add labels and feedback)
* Select (with Containers to add labels and feedback)
### Advanced
* Alert
* Modal