The wml-penrose
library is an Angular module that provides a specialized set of components designed to create and manage complex penrose patterns within Angular applications. This library serves as a toolkit for developers to integrate sophisticated penrose designs into their web interfaces, offering a blend of aesthetic appeal and interactivity. With a focus on customization and dynamic content integration, wml-penrose
aims to enhance the visual dimension of Angular applications while providing a seamless user experience.
At the heart of the wml-penrose
library is the PenroseComponent
, a central component responsible for rendering penrose patterns. This component serves as the primary interface for developers, encapsulating the complexity of penrose generation while exposing customizable properties and methods. Through its well-defined API, the PenroseComponent
allows for dynamic adjustments, enabling developers to modify aspects of the pattern such as size, color, and animation. Additionally, the library is structured to facilitate interactivity, allowing components to respond to user actions or application events. By leveraging Angular's data binding and event handling capabilities, developers can create interactive penrose patterns that adapt to user interactions or application state changes, offering a dynamic and engaging user experience.
npm install -d @windmillcode/angular-wml-penrose
<wml-penrose></wml-penrose>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {}
<wml-penrose [style]="{'width': width, 'height': height}"></wml-penrose>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
width = '300px';
height = '300px';
}
<button (click)="toggleVisibility()">Toggle Penrose Visibility</button>
<wml-penrose *ngIf="isVisible"></wml-penrose>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
isVisible = true;
toggleVisibility() {
this.isVisible = !this.isVisible;
}
}
<wml-penrose [isPresent]="isPresent"></wml-penrose>
<button (click)="togglePresent()">Toggle Presence</button>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
isPresent = true;
togglePresent() {
this.isPresent = !this.isPresent;
}
}
Property | Type | Description |
---|---|---|
isPresent |
boolean |
Controls the visibility of the Penrose pattern. |
style |
Object |
Custom styles that can be applied to the Penrose component. |
- updated package to reflect the version 16.2.80 of @angular/core package,
- updated package to reflect the version 16.2.80 of @angular/core package,
- updated package to reflect the version 16.2.90 of @angular/core package,
- updated package to reflect the version 16.2.91 of @angular/core package,
- updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
- updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
- updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
- updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
- updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
- updated package to conform with @windmillcode/angular-wml-components-base for unit testing features ,
- updated package to reflect the version ^17.0.2 of @angular/core package,
- updated package to reflect the version ^17.0.4 of @angular/core package,
- updated package to reflect the version ^17.0.5 of @angular/core package,
- updated package to reflect the version ^17.0.6 of @angular/core package,
- updated package to reflect the version ^17.0.7 of @angular/core package,
- updated package to conform with @windmillcode/angular-wml-components-base ,
- updated package to conform with @windmillcode/angular-wml-components-base ,
- updated package to conform with @windmillcode/angular-wml-components-base ,
- updated package to reflect the version ^17.0.8 of @angular/core package,
- updated package to conform with @windmillcode/angular-wml-components-base ,
- updated package to conform with @windmillcode/angular-wml-components-base ,
- updated package to conform with @windmillcode/angular-wml-components-base ,
- updated package to conform with @windmillcode/angular-wml-components-base ,
- updated package to conform with @windmillcode/angular-wml-components-base ,
- updated package to reflect the version ^17.1.0 of @angular/core package,
- updated package to conform with @windmillcode/angular-wml-components-base ,
- updated package to conform with @windmillcode/angular-wml-components-base ,
- updated package to reflect the version ^17.1.2 of @angular/core package,
- updated package to conform with @windmillcode/angular-wml-components-base ,
- updated package to reflect the version ^17.1.3 of @angular/core package,
- updated package to reflect the version ^17.2.1 of @angular/core package,
- updated package to reflect the version ^17.2.2 of @angular/core package,
- updated package to reflect the version ^17.2.3 of @angular/core package,
- updated package to conform with @windmillcode/angular-wml-components-base ,
- updated package to conform with @windmillcode/angular-wml-components-base ,
- updated package to reflect the version ^17.2.4 of @angular/core package,
- updated package to conform with @windmillcode/angular-wml-components-base ,
- updated package to conform with @windmillcode/angular-wml-components-base ,
- updated package to conform with @windmillcode/angular-wml-components-base ,
- updated package to conform with @windmillcode/angular-wml-components-base ,
- updated package to reflect the version ^17.3.0 of @angular/core package ,
- updated package to reflect the version ^17.3.1 of @angular/core package ,
- updated package to reflect the version ^17.3.2 of @angular/core package,
- updated package to reflect the version ^17.3.3 of @angular/core package,
- updated package to reflect the version ^17.3.4 of @angular/core package,
- updated package to conform with @windmillcode/angular-wml-components-base ,
- updated package to reflect the version ^17.3.5 of @angular/core package,
- updated package to conform with @windmillcode/angular-wml-components-base ,
- updated package to reflect the version ^17.3.6 of @angular/core package,
- updated package to reflect the version ^17.3.7 of @angular/core package,
- updated package to reflect the version ^17.3.8 of @angular/core package,
- updated package to reflect the version ^17.3.9 of @angular/core package,
- updated package to reflect the version ^18.0.0 of @angular/core package,
- updated package to conform with @windmillcode/angular-wml-components-base ,
- updated package to reflect the version ^18.0.1 of @angular/core package