64 lines
1.1 KiB
Markdown
64 lines
1.1 KiB
Markdown
|
# Base Components
|
||
|
|
|
||
|
|
This is a small collection of handy base angular components.
|
||
|
|
|
||
|
|
## Layout
|
||
|
|
|
||
|
|
::: code-group
|
||
|
|
|
||
|
|
```ts:line-numbers [vstack.component.ts]
|
||
|
|
import { CommonModule } from '@angular/common';
|
||
|
|
import { Component, Input } from '@angular/core';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'app-vstack',
|
||
|
|
standalone: true,
|
||
|
|
imports: [CommonModule],
|
||
|
|
template: `
|
||
|
|
<div class="vstack" [ngStyle]="{ gap: gap }">
|
||
|
|
<ng-content />
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
styles: `
|
||
|
|
.vstack {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
`
|
||
|
|
})
|
||
|
|
export class VStackComponent {
|
||
|
|
@Input() gap: string = '5px';
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
:::
|
||
|
|
|
||
|
|
::: code-group
|
||
|
|
|
||
|
|
```ts:line-numbers [hstack.component.ts]
|
||
|
|
import { CommonModule } from '@angular/common';
|
||
|
|
import { Component, Input } from '@angular/core';
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'app-hstack',
|
||
|
|
standalone: true,
|
||
|
|
imports: [CommonModule],
|
||
|
|
template: `
|
||
|
|
<div class="hstack" [ngStyle]="{ gap: gap }">
|
||
|
|
<ng-content />
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
styles: `
|
||
|
|
.hstack {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
`
|
||
|
|
})
|
||
|
|
export class HStackComponent {
|
||
|
|
@Input() gap: string = '5px';
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
:::
|