Compare commits
No commits in common. "a2b40910c28083c144b52cfc2cc2184a2fadc3f5" and "1974c5328de4e23d03978d9db190cc550d89484c" have entirely different histories.
a2b40910c2
...
1974c5328d
@ -38,14 +38,6 @@ export default defineConfig({
|
|||||||
{ text: 'Controller Testing', link: '/dotnet/controller-testing' },
|
{ text: 'Controller Testing', link: '/dotnet/controller-testing' },
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
|
||||||
text: 'Angular',
|
|
||||||
link: '/angular/',
|
|
||||||
collapsed: true,
|
|
||||||
items: [
|
|
||||||
{ text: 'Base Components', link: '/angular/base-components' },
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
text: 'Ansible',
|
text: 'Ansible',
|
||||||
link: '/ansible/',
|
link: '/ansible/',
|
||||||
|
@ -1,64 +0,0 @@
|
|||||||
# 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';
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
:::
|
|
@ -1,3 +0,0 @@
|
|||||||
# Angular Snippets and Musings
|
|
||||||
|
|
||||||
#### [Base Components](./base-components.md)
|
|
@ -10,10 +10,6 @@ hero:
|
|||||||
text: .NET
|
text: .NET
|
||||||
link: /dotnet/
|
link: /dotnet/
|
||||||
|
|
||||||
- theme: alt
|
|
||||||
text: Angular
|
|
||||||
link: /angular/
|
|
||||||
|
|
||||||
- theme: alt
|
- theme: alt
|
||||||
text: Ansible
|
text: Ansible
|
||||||
link: /ansible/
|
link: /ansible/
|
||||||
|
Loading…
Reference in New Issue
Block a user