Skip to content

Commit bc41a9c

Browse files
committed
Add missing file
1 parent d2dd6dd commit bc41a9c

File tree

1 file changed

+78
-0
lines changed

1 file changed

+78
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { Meta, Title, Subtitle, Description, Canvas, Source } from "@storybook/blocks";
2+
import * as InsetStories from "./inset.stories";
3+
import * as StackStories from "./stack.stories";
4+
import * as InlineStories from "./inline.stories";
5+
import * as ColumnsStories from "./columns.stories";
6+
import * as TilesStories from "./tiles.stories";
7+
import * as ContentBlockStories from "./content-block.stories";
8+
9+
<Meta title="Get Started" />
10+
11+
<Title>Install and use the components</Title>
12+
13+
Install the library using
14+
15+
<Source language="sh" dark code="npm install @buildo/angular-layout-components" />
16+
17+
Then to use the layout components you need to import the module in your Angular module:
18+
19+
<Source language="typescript" dark code={`import { StackComponent, TilesComponent } from '@buildo/angular-layout-components';
20+
21+
@NgModule({
22+
imports: [
23+
StackComponent,
24+
TilesComponent
25+
]
26+
})
27+
class AppModule {}`} />
28+
29+
Then use them in the template:
30+
31+
<Source language="html" dark code={`<stack gap="16px">
32+
<div>Element 1</div>
33+
<div>Element 2</div>
34+
<div>Element 3</div>
35+
</stack>
36+
37+
<tiles gap="16px" columns 3>
38+
<div>Element 1</div>
39+
<div>Element 2</div>
40+
<div>Element 3</div>
41+
<div>Element 4</div>
42+
<div>Element 5</div>
43+
</tiles>
44+
`} />
45+
46+
<Title>Layout components</Title>
47+
Layout components are containers that represent the most common spacing and alignment
48+
rules that are usually employed in constructing an interface.
49+
50+
## Inset
51+
52+
<Description of={InsetStories} />
53+
<Canvas of={InsetStories.Basic} />
54+
55+
## Stack
56+
57+
<Description of={StackStories} />
58+
<Canvas of={StackStories.Basic} />
59+
60+
## Inline
61+
62+
<Description of={InlineStories} />
63+
<Canvas of={InlineStories.Basic} />
64+
65+
## Columns & Column
66+
67+
<Description of={ColumnsStories} />
68+
<Canvas of={ColumnsStories.Basic} />
69+
70+
## Tiles
71+
72+
<Description of={TilesStories} />
73+
<Canvas of={TilesStories.Basic} />
74+
75+
## Content Block
76+
77+
<Description of={ContentBlockStories} />
78+
<Canvas of={ContentBlockStories.Basic} />

0 commit comments

Comments
 (0)