https://github.com/HeyItsBATMAN/ngx-concern

A Angular library for creating simple, unstyled dialogs/modals and action-sheets/bottom-sheets.
https://github.com/HeyItsBATMAN/ngx-concern

Last synced: 2 months ago
JSON representation

A Angular library for creating simple, unstyled dialogs/modals and action-sheets/bottom-sheets.

• Host: GitHub
• URL: https://github.com/HeyItsBATMAN/ngx-concern
• Owner: HeyItsBATMAN
• Created: 2024-03-10T02:24:41.000Z (11 months ago)
• Default Branch: master
• Last Pushed: 2024-03-10T02:33:10.000Z (11 months ago)
• Last Synced: 2024-03-10T03:28:43.405Z (11 months ago)
• Language: TypeScript
• Size: 396 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-angular - ngx-concern - Angular library for creating simple, unstyled dialogs/modals and action-sheets/bottom-sheets. (Table of contents / Third Party Components)
• fucking-awesome-angular - ngx-concern - Angular library for creating simple, unstyled dialogs/modals and action-sheets/bottom-sheets. (Table of contents / Third Party Components)

README

        
# NgxConcern



    



A Angular library for creating simple, unstyled dialogs/modals and action-sheets/bottom-sheets.

## Requirements

This was only tested on Angular 17.2.0, so I do not know if it works on older versions.

## Installation

Install as usual using your package manager, e.g. when using `npm`:

`npm i ngx-concern`

Afterwards import in your `ApplicationConfig`:

```ts

import type { ApplicationConfig } from '@angular/core';

import { withConcernTheme } from 'ngx-concern'; // Import the provider function

export const appConfig: ApplicationConfig = {

  providers: [

    withConcernTheme('default'), // Add to providers of the ApplicationConfig

  ],

};

```

## Usage

The library currently provides three types of overlays:

- `ActionSheetComponent`

- `DialogComponent`

- `FullscreenDialogComponent`

Import any of them inside of the component you want to use it:

```ts

import { Component } from '@angular/core';

// Import the overlay components you want

import { ActionSheetComponent, DialogComponent, FullscreenDialogComponent } from 'ngx-concern';

@Component({

  selector: 'app-root',

  standalone: true,

  // Add them to the imports of your component

  imports: [ActionSheetComponent, DialogComponent, FullscreenDialogComponent],

  templateUrl: './app.component.html',

  styleUrl: './app.component.scss',

})

export class AppComponent {}

```

Add them to your HTML template and add content:

```html

Open Action Sheet

Open Dialog

Open Fullscreen Dialog

  
Bla bla

  


    Fugiat ad ut proident Lorem elit elit dolore quis reprehenderit veniam tempor consequat.

    Excepteur do consectetur sunt duis esse anim mollit consectetur cillum veniam minim sit minim

    ad. Cupidatat enim duis velit do sit fugiat anim nisi in eiusmod minim.

  


  
Bla bla

  


    Fugiat ad ut proident Lorem elit elit dolore quis reprehenderit veniam tempor consequat.

    Excepteur do consectetur sunt duis esse anim mollit consectetur cillum veniam minim sit minim

    ad. Cupidatat enim duis velit do sit fugiat anim nisi in eiusmod minim.

  


  Close

  
Bla bla

  


    Fugiat ad ut proident Lorem elit elit dolore quis reprehenderit veniam tempor consequat.

    Excepteur do consectetur sunt duis esse anim mollit consectetur cillum veniam minim sit minim

    ad. Cupidatat enim duis velit do sit fugiat anim nisi in eiusmod minim.

  


  Close

```

Every overlay component has an `open()` and a `close()` method for opening and closing.

You can also close overlays by clicking on the backdrop.

## Styling

There are two ways to style the overlays:

- providing global CSS attributes to the `withConcernTheme` function

- providing CSS per component

### Global styling / withConcernTheme

The `withConcernTheme` can take any number of `TypeProvider`s with `InjectionToken`s to override the default theme. The value of each provider is just a `Partial`.

```ts

import type { ApplicationConfig } from '@angular/core';

import { CONCERN_BACKDROP_STYLE, CONCERN_DIALOG_STYLE, withConcernTheme } from 'ngx-concern';

export const appConfig: ApplicationConfig = {

  providers: [

    withConcernTheme(

      'default',

      {

        provide: CONCERN_BACKDROP_STYLE,

        useValue: {

          backgroundColor: 'rgba(0, 0, 0, 0.5)',

        } satisfies Partial,

      },

      {

        provide: CONCERN_DIALOG_STYLE,

        useValue: {

          maxWidth: '80vw',

          maxHeight: '80vh',

          minWidth: '50vw',

          minHeight: '50vh',

          display: 'flex',

          flexDirection: 'column',

          alignItems: 'stretch',

          backgroundColor: 'rgba(255, 255, 255, 0.8)',

          backdropFilter: 'blur(4px)',

          boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)',

        } satisfies Partial,

      },

    ),

  ],

};

```

### Local styling / CSS per component

If you need to use the components in a way where a uniform style cannot be used, you can override the styles per component by providing `CSSStyleDeclaration`s to the components.

```html

  
Bla bla

  


    Fugiat ad ut proident Lorem elit elit dolore quis reprehenderit veniam tempor consequat.

    Excepteur do consectetur sunt duis esse anim mollit consectetur cillum veniam minim sit minim

    ad. Cupidatat enim duis velit do sit fugiat anim nisi in eiusmod minim.

  


```

### Motivation

I wanted a simpler alternative to `@angular/material` and `@angular/cdk` for my projects.