Input
Gives an input field or a component a distinct look that indicates its input capabilities
import { Component } from '@angular/core';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
@Component({
selector: 'spartan-input-preview',
standalone: true,
imports: [HlmInputDirective],
template: `<input class="w-80" hlmInput placeholder='Email' type='email' />`,
})
export class InputPreviewComponent {}Installation
npx nx g @spartan-ng/cli:ui input
ng g @spartan-ng/cli:ui input
Usage
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';<input hlmInput/>Examples
Default
import { Component } from '@angular/core';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
@Component({
selector: 'spartan-input-preview',
standalone: true,
imports: [HlmInputDirective],
template: `<input class="w-80" hlmInput placeholder='Email' type='email' />`,
})
export class InputPreviewComponent {}File
import { Component } from '@angular/core';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
@Component({
selector: 'spartan-input-file',
standalone: true,
imports: [HlmInputDirective],
template: `<input class="w-80" hlmInput type="file"/>`,
})
export class InputFilePreviewComponent {}Disabled
import { Component } from '@angular/core';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
@Component({
selector: 'spartan-input-disabled',
standalone: true,
imports: [HlmInputDirective],
template: `<input class="w-80" hlmInput disabled type='email' placeholder='Email' />`,
})
export class InputDisabledPreviewComponent {}With Label
import { Component } from '@angular/core';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
@Component({
selector: 'spartan-input-label',
standalone: true,
imports: [HlmInputDirective, HlmLabelDirective],
template: ` <label hlmLabel
>Email
<input class="w-80" hlmInput type="email" placeholder="Email" />
</label>`,
})
export class InputLabelPreviewComponent {}With Button
import { Component } from '@angular/core';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
@Component({
selector: 'spartan-input-button',
standalone: true,
imports: [HlmInputDirective, HlmButtonDirective],
template: `
<div class='flex w-full max-w-sm items-center space-x-2'>
<input aria-label='Email' class='w-80' hlmInput type='email' placeholder='Email' />
<button hlmBtn>Subscribe</button>
</div>
`,
})
export class InputButtonPreviewComponent {}