Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/criar-art/up-window-angular
UpWindow is an Angular library designed to create dynamic, customizable modals and window-based components for web applications.
https://github.com/criar-art/up-window-angular
angular component hacktoberfest modal window
Last synced: 6 days ago
JSON representation
UpWindow is an Angular library designed to create dynamic, customizable modals and window-based components for web applications.
- Host: GitHub
- URL: https://github.com/criar-art/up-window-angular
- Owner: criar-art
- Created: 2024-10-14T10:57:47.000Z (about 2 months ago)
- Default Branch: master
- Last Pushed: 2024-10-24T09:39:09.000Z (about 2 months ago)
- Last Synced: 2024-10-25T07:24:56.468Z (about 2 months ago)
- Topics: angular, component, hacktoberfest, modal, window
- Language: TypeScript
- Homepage: https://up-window-angular.web.app
- Size: 2.98 MB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-angular - up-window-angular - An Angular library designed to create dynamic, customizable modals and window-based components for web applications. (Table of contents / Third Party Components)
- awesome-angular - up-window-angular - An Angular library designed to create dynamic, customizable modals and window-based components for web applications. (Table of contents / Third Party Components)
README
# up-window-angular
An Angular library designed to create dynamic, customizable windows and window-based components for web applications. With a simple and intuitive API, UpWindow enables developers to easily integrate responsive windows, popups, floating windows, and drawers into their projects. It provides full control over window size, position, animations, and behavior, offering a flexible solution for creating engaging user interfaces.
## Install
```bash
npm install up-window-angular
```
### Usage Example
```typescript
import { Component } from '@angular/core';
import { signal, WritableSignal } from 'signals';
import UpWindowAngularModule from 'up-window-angular';
@Component({
selector: 'app-window-example',
templateUrl: './window-example.component.html',
})
export class WindowExampleComponent {
isWindowOpenExample: WritableSignal = signal(false);
openWindowExample() {
this.isWindowOpenExample.set(true);
}
}
```
### HTML Template
```html
Open Window Example
Window Example content!
```
### Component Setup
- In the `WindowExampleComponent`, a `WritableSignal` named `isWindowOpenExample` is defined, initialized to `false`.
- The `openWindowExample` method sets `isWindowOpenExample` to `true`, which opens the window.
### Inputs
- **`@Input() title!: string;`**
- Example: Set the title of the window.
```html
```
- **`@Input() subtitle!: string;`**
- Example: Set the subtitle of the window.
```html
```
- **`@Input() class: string | undefined;`**
- Example: Add custom CSS classes.
```html
```
- **`@Input() isOpen: WritableSignal = signal(false);`**
- Example: Control the visibility of the window.
```typescript
this.isWindowOpenExample.set(true); // Opens the window
```
- **`@Input() animation: string = 'fade';`**
- Example: Set a different animation type.
```html
```
- **`@Input() restrictMode: boolean = false;`**
- Example: Enable restricted mode.
```html
```
- **`@Input() fullScreen: boolean = false;`**
- Example: Enable fullscreen mode for the window.
```html
```
- **`@Input() drawer: 'left' | 'right' | 'top' | 'bottom' = 'left';`**
- Example: Set the position of the drawer when in drawer mode.
```html
```
- **`@Input() confirmText: string = 'Confirm';`**
- Example: Customize the confirm button text.
```html
```
- **`@Input() cancelText: string = 'Cancel';`**
- Example: Customize the cancel button text.
```html
```
- **`@Input() confirmType: string = 'primary';`**
- Example: Set the style of the confirm button.
```html
```
- **`@Input() cancelType: string = 'default';`**
- Example: Set the style of the cancel button.
```html
```
- **`@Input() buttonAlignment: 'start' | 'end' | 'center' = 'end';`**
- Example: Align the buttons to the center.
```html
```
- **`@Input() onConfirmClick: () => void = () => this.onConfirm();`**
- Example: Custom confirm action.
```typescript
onConfirm() {
console.log('Confirmed!');
}
```
- **`@Input() onCancelClick: () => void = () => this.onCancel();`**
- Example: Custom cancel action.
```typescript
onCancel() {
console.log('Cancelled!');
}
```
- **`@Input() hiddenActions: boolean = false;`**
- Example: Control the visibility of action buttons (confirm and cancel). When set to `true`, the action buttons will not be displayed.
```html
```
- **`@Input() blur: boolean = false;`**
- Example: Enable blur effect for the window.
```html
```
- **`@Input() grayscale: boolean = false;`**
- Example: Enable grayscale effect for the window.
```html
```
### Outputs
- **`@Output() confirm = new EventEmitter();`**
- Example: Emit an event when confirm is clicked.
```typescript
this.confirm.subscribe(() => {
console.log('Confirmed action triggered');
});
```
- **`@Output() cancel = new EventEmitter();`**
- Example: Emit an event when cancel is clicked.
```typescript
this.cancel.subscribe(() => {
console.log('Cancel action triggered');
});
```
### ng-content for Custom Footer
You can project custom content into the footer of the `up-window-angular` component using `ng-template`. This allows for more flexible designs in your window. Here’s how to use it:
#### Example of Custom Footer
```html
Window Example content!
Close
Custom footer content!
```