ngx-nitro-multiline
TypeScript icon, indicating that this package has built-in type declarations

1.0.1-ng17 • Public • Published

@nitro / Multiline Input

Angular Library - Nitro Multiline Input

Angular Library - Nitro Multiline Input

Multiline Input can be used for long text inputs such as description, Patient History, Search Box etc. This control will display in a single line, and also it will grow when the content gets bigger. Also we can able to restrict the total number of rows to display.

Features:

  1. Light weight
  2. Fully customizable
  3. CSS vars for theming
  4. Single Line input control for compact view and can open the text to multiple lines onHover or onFocus

Usage

app.module.ts

import { MultilineModule } from "ngx-nitro-multiline";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MultilineModule
  ]
})

some.component.ts

import { MultilineComponent } from "ngx-nitro-multiline";

...

export class AppComponent {
...

  mlForm: FormGroup;
  constructor(
    public fb: FormBuilder
  ) {
    this.mlForm = this.fb.group({
      multiline: ['', Validators.required],
    });
  }

  onInputChange(event: any) {
    console.log(event.target.value);
  }
...
}

some.component.html

  <div [formGroup]="mlForm">
    <ngx-nitro-multiline [fontSize]="16" [disabled]="false" [readonly]="false" (input)="onInputChange($event)"
      placeholder="Product Description" formControlName="multiline"></ngx-nitro-multiline>
  </div>

CSS Variables:

.multilineInput {
    --nitro-ml-bg: #fff;
    --nitro-ml-pad-x: 0.4em;
    --nitro-ml-pad-y: 0.5em;
    --nitro-ml-radius: 10px;
    --nitro-ml-height: 36px;
    --nitro-ml-fontsize: 16px;
    --nitro-ml-lineheight: 1.5em;
    --nitro-ml-border-color: #ccc;
    --nitro-ml-transition: all ease-in 300ms;
}

This library was generated with Angular CLI version 17.1.3.

Package Sidebar

Install

npm i ngx-nitro-multiline

Weekly Downloads

5

Version

1.0.1-ng17

License

MIT

Unpacked Size

59.7 kB

Total Files

14

Last publish

Collaborators

  • asphub