156 lines
2.7 KiB
Markdown
156 lines
2.7 KiB
Markdown
# @ngshack/ui
|
|
|
|
Webland UI component library for Angular applications with gaming console theme.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm install @ngshack/ui
|
|
```
|
|
|
|
## Development
|
|
|
|
### Prerequisites
|
|
- Node.js 18+
|
|
- Angular CLI 17+
|
|
|
|
### Setup
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### Generate Components
|
|
```bash
|
|
# Generate new component
|
|
ng generate component components/my-component --project=ui
|
|
|
|
# Generate service
|
|
ng generate service services/my-service --project=ui
|
|
|
|
# Generate module
|
|
ng generate module modules/my-module --project=ui
|
|
```
|
|
|
|
### Build Library
|
|
```bash
|
|
ng build ui
|
|
```
|
|
|
|
### Test
|
|
```bash
|
|
ng test ui
|
|
```
|
|
|
|
### Publish
|
|
```bash
|
|
npm run build:libs
|
|
npm publish dist/ui
|
|
```
|
|
|
|
## Usage
|
|
|
|
### Button Component
|
|
|
|
```typescript
|
|
import { ButtonComponent } from '@ngshack/ui';
|
|
|
|
@Component({
|
|
imports: [ButtonComponent],
|
|
template: `
|
|
<wl-ui-button variant="primary">Click me</wl-ui-button>
|
|
<wl-ui-button variant="secondary" size="lg">Large Button</wl-ui-button>
|
|
<wl-ui-button variant="outline" [disabled]="true">Disabled</wl-ui-button>
|
|
`
|
|
})
|
|
export class MyComponent {}
|
|
```
|
|
|
|
#### Properties
|
|
- `variant`: 'primary' | 'secondary' | 'outline' (default: 'primary')
|
|
- `size`: 'sm' | 'md' | 'lg' (default: 'md')
|
|
- `disabled`: boolean (default: false)
|
|
- `type`: 'button' | 'submit' | 'reset' (default: 'button')
|
|
|
|
### Card Component
|
|
|
|
```typescript
|
|
import { CardComponent } from '@ngshack/ui';
|
|
|
|
@Component({
|
|
imports: [CardComponent],
|
|
template: `
|
|
<wl-ui-card title="My Card" [elevated]="true">
|
|
<p>Card content goes here</p>
|
|
|
|
<div slot="header">
|
|
<button>Header Action</button>
|
|
</div>
|
|
|
|
<div slot="footer">
|
|
<button>Footer Action</button>
|
|
</div>
|
|
</wl-ui-card>
|
|
`
|
|
})
|
|
export class MyComponent {}
|
|
```
|
|
|
|
#### Properties
|
|
- `title`: string (optional)
|
|
- `elevated`: boolean (default: false)
|
|
- `compact`: boolean (default: false)
|
|
|
|
## Development
|
|
|
|
### Building
|
|
|
|
```bash
|
|
npm run build:ui
|
|
```
|
|
|
|
### Watching for changes
|
|
|
|
```bash
|
|
npm run watch:ui
|
|
```
|
|
|
|
### Publishing
|
|
|
|
```bash
|
|
npm run publish:ui
|
|
```
|
|
|
|
## Styling
|
|
|
|
The library uses a gaming console theme with:
|
|
- Dark backgrounds with transparency
|
|
- Neon green accents (#00ff88)
|
|
- Smooth transitions and hover effects
|
|
- Backdrop blur effects
|
|
|
|
## License
|
|
|
|
MIT
|
|
|
|
## Running unit tests
|
|
|
|
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
|
|
|
```bash
|
|
ng test
|
|
```
|
|
|
|
## Running end-to-end tests
|
|
|
|
For end-to-end (e2e) testing, run:
|
|
|
|
```bash
|
|
ng e2e
|
|
```
|
|
|
|
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
|
|
|
## Additional Resources
|
|
|
|
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|