Skip to content

Commit

Permalink
docs(component-docs): add tabs examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@junghyeonsu
junghyeonsu committed Oct 8, 2024
1 parent 7caf8ae commit fa31bb1
Show file tree
Hide file tree
Showing 24 changed files with 475 additions and 150 deletions.
5 changes: 5 additions & 0 deletions component-docs/public/mdx/component/tabs.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,12 @@ interface TabsContextValue {
api: ReturnType<typeof useTabs> & ReturnType<typeof useSwipeable>;
classNames: ReturnType<typeof tabs>;
shouldRender: (value: string) => boolean;

/**
* @default false
*/
isSwipeable: boolean;

layout: "fill" | "hug";
size: "small" | "medium";
}
Expand Down
29 changes: 29 additions & 0 deletions component-docs/public/mdx/react/tabs-alert.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
```tsx copy
import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";

export default function TabsAlert() {
return (
<Tabs defaultValue="1" isSwipeable layout="fill" size="medium">
<TabTriggerList>
<TabTrigger value="1">라벨1</TabTrigger>
<TabTrigger value="2" alert>
라벨2
</TabTrigger>
<TabTrigger value="3">라벨3</TabTrigger>
</TabTriggerList>
<TabContentList>
<TabContent value="1">
<div>Content 1</div>
</TabContent>
<TabContent value="2">
<div>Content 2</div>
</TabContent>
<TabContent value="3">
<div>Content 3</div>
</TabContent>
</TabContentList>
</Tabs>
);
}

```
29 changes: 29 additions & 0 deletions component-docs/public/mdx/react/tabs-disabled.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
```tsx copy
import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";

export default function TabsDisabled() {
return (
<Tabs defaultValue="1" isSwipeable layout="fill" size="medium">
<TabTriggerList>
<TabTrigger value="1">라벨1</TabTrigger>
<TabTrigger value="2" isDisabled>
라벨2
</TabTrigger>
<TabTrigger value="3">라벨3</TabTrigger>
</TabTriggerList>
<TabContentList>
<TabContent value="1">
<div>Content 1</div>
</TabContent>
<TabContent value="2">
<div>Content 2</div>
</TabContent>
<TabContent value="3">
<div>Content 3</div>
</TabContent>
</TabContentList>
</Tabs>
);
}

```
30 changes: 30 additions & 0 deletions component-docs/public/mdx/react/tabs-dynamic-height.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
```tsx copy
import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";

export default function TabsDynamicHeight() {
return (
<>
<Tabs defaultValue="1" lazyMode="unmount" isLazy={true} isSwipeable={false}>
<TabTriggerList>
<TabTrigger value="1">라벨1</TabTrigger>
<TabTrigger value="2">라벨2</TabTrigger>
<TabTrigger value="3">라벨3</TabTrigger>
</TabTriggerList>
<TabContentList>
<TabContent value="1">
<div style={{ height: "100px", backgroundColor: "#ffeeee" }}>Content 1</div>
</TabContent>
<TabContent value="2">
<div style={{ height: "200px", backgroundColor: "#ffeeff" }}>Content 2</div>
</TabContent>
<TabContent value="3">
<div style={{ height: "300px", backgroundColor: "#ffeedd" }}>Content 3</div>
</TabContent>
</TabContentList>
</Tabs>
<div style={{ height: "100px", backgroundColor: "gray" }}>아래 컨텐츠</div>
</>
);
}

```
27 changes: 27 additions & 0 deletions component-docs/public/mdx/react/tabs-layout-fill.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
```tsx copy
import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";

export default function TabsLayoutFill() {
return (
<Tabs defaultValue="1" layout="fill">
<TabTriggerList>
<TabTrigger value="1">라벨1</TabTrigger>
<TabTrigger value="2">라벨2</TabTrigger>
<TabTrigger value="3">라벨3</TabTrigger>
</TabTriggerList>
<TabContentList>
<TabContent value="1">
<div>Content 1</div>
</TabContent>
<TabContent value="2">
<div>Content 2</div>
</TabContent>
<TabContent value="3">
<div>Content 3</div>
</TabContent>
</TabContentList>
</Tabs>
);
}

```
27 changes: 27 additions & 0 deletions component-docs/public/mdx/react/tabs-layout-hug.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
```tsx copy
import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";

export default function TabsLayoutHug() {
return (
<Tabs defaultValue="1" layout="hug">
<TabTriggerList>
<TabTrigger value="1">라벨1</TabTrigger>
<TabTrigger value="2">라벨2</TabTrigger>
<TabTrigger value="3">라벨3</TabTrigger>
</TabTriggerList>
<TabContentList>
<TabContent value="1">
<div>Content 1</div>
</TabContent>
<TabContent value="2">
<div>Content 2</div>
</TabContent>
<TabContent value="3">
<div>Content 3</div>
</TabContent>
</TabContentList>
</Tabs>
);
}

```
2 changes: 1 addition & 1 deletion component-docs/public/mdx/react/tabs-preview.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "se

export default function TabsPreview() {
return (
<Tabs defaultValue="1" isSwipeable layout="fill" size="medium">
<Tabs defaultValue="1">
<TabTriggerList>
<TabTrigger value="1">라벨1</TabTrigger>
<TabTrigger value="2">라벨2</TabTrigger>
Expand Down
27 changes: 27 additions & 0 deletions component-docs/public/mdx/react/tabs-size-medium.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
```tsx copy
import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";

export default function TabsSizeMedium() {
return (
<Tabs defaultValue="1" size="medium">
<TabTriggerList>
<TabTrigger value="1">라벨1</TabTrigger>
<TabTrigger value="2">라벨2</TabTrigger>
<TabTrigger value="3">라벨3</TabTrigger>
</TabTriggerList>
<TabContentList>
<TabContent value="1">
<div>Content 1</div>
</TabContent>
<TabContent value="2">
<div>Content 2</div>
</TabContent>
<TabContent value="3">
<div>Content 3</div>
</TabContent>
</TabContentList>
</Tabs>
);
}

```
27 changes: 27 additions & 0 deletions component-docs/public/mdx/react/tabs-size-small.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
```tsx copy
import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";

export default function TabsSizeSmall() {
return (
<Tabs defaultValue="1" size="small">
<TabTriggerList>
<TabTrigger value="1">라벨1</TabTrigger>
<TabTrigger value="2">라벨2</TabTrigger>
<TabTrigger value="3">라벨3</TabTrigger>
</TabTriggerList>
<TabContentList>
<TabContent value="1">
<div>Content 1</div>
</TabContent>
<TabContent value="2">
<div>Content 2</div>
</TabContent>
<TabContent value="3">
<div>Content 3</div>
</TabContent>
</TabContentList>
</Tabs>
);
}

```
27 changes: 27 additions & 0 deletions component-docs/public/mdx/react/tabs-swipeable.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
```tsx copy
import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";

export default function TabsSwipeable() {
return (
<Tabs defaultValue="1" isSwipeable>
<TabTriggerList>
<TabTrigger value="1">라벨1</TabTrigger>
<TabTrigger value="2">라벨2</TabTrigger>
<TabTrigger value="3">라벨3</TabTrigger>
</TabTriggerList>
<TabContentList>
<TabContent value="1">
<div>Content 1</div>
</TabContent>
<TabContent value="2">
<div>Content 2</div>
</TabContent>
<TabContent value="3">
<div>Content 3</div>
</TabContent>
</TabContentList>
</Tabs>
);
}

```
2 changes: 1 addition & 1 deletion component-docs/public/registry/component/tabs.json
View file

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions component-docs/snippets/component/tabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,12 @@ interface TabsContextValue {
api: ReturnType<typeof useTabs> & ReturnType<typeof useSwipeable>;
classNames: ReturnType<typeof tabs>;
shouldRender: (value: string) => boolean;

/**
* @default false
*/
isSwipeable: boolean;

layout: "fill" | "hug";
size: "small" | "medium";
}
Expand Down
26 changes: 26 additions & 0 deletions component-docs/snippets/example/react/tabs-alert.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";

export default function TabsAlert() {
return (
<Tabs defaultValue="1" isSwipeable layout="fill" size="medium">
<TabTriggerList>
<TabTrigger value="1">라벨1</TabTrigger>
<TabTrigger value="2" alert>
라벨2
</TabTrigger>
<TabTrigger value="3">라벨3</TabTrigger>
</TabTriggerList>
<TabContentList>
<TabContent value="1">
<div>Content 1</div>
</TabContent>
<TabContent value="2">
<div>Content 2</div>
</TabContent>
<TabContent value="3">
<div>Content 3</div>
</TabContent>
</TabContentList>
</Tabs>
);
}
26 changes: 26 additions & 0 deletions component-docs/snippets/example/react/tabs-disabled.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";

export default function TabsDisabled() {
return (
<Tabs defaultValue="1" isSwipeable layout="fill" size="medium">
<TabTriggerList>
<TabTrigger value="1">라벨1</TabTrigger>
<TabTrigger value="2" isDisabled>
라벨2
</TabTrigger>
<TabTrigger value="3">라벨3</TabTrigger>
</TabTriggerList>
<TabContentList>
<TabContent value="1">
<div>Content 1</div>
</TabContent>
<TabContent value="2">
<div>Content 2</div>
</TabContent>
<TabContent value="3">
<div>Content 3</div>
</TabContent>
</TabContentList>
</Tabs>
);
}
27 changes: 27 additions & 0 deletions component-docs/snippets/example/react/tabs-dynamic-height.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";

export default function TabsDynamicHeight() {
return (
<>
<Tabs defaultValue="1" lazyMode="unmount" isLazy={true} isSwipeable={false}>
<TabTriggerList>
<TabTrigger value="1">라벨1</TabTrigger>
<TabTrigger value="2">라벨2</TabTrigger>
<TabTrigger value="3">라벨3</TabTrigger>
</TabTriggerList>
<TabContentList>
<TabContent value="1">
<div style={{ height: "100px", backgroundColor: "#ffeeee" }}>Content 1</div>
</TabContent>
<TabContent value="2">
<div style={{ height: "200px", backgroundColor: "#ffeeff" }}>Content 2</div>
</TabContent>
<TabContent value="3">
<div style={{ height: "300px", backgroundColor: "#ffeedd" }}>Content 3</div>
</TabContent>
</TabContentList>
</Tabs>
<div style={{ height: "100px", backgroundColor: "gray" }}>아래 컨텐츠</div>
</>
);
}
24 changes: 24 additions & 0 deletions component-docs/snippets/example/react/tabs-layout-fill.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";

export default function TabsLayoutFill() {
return (
<Tabs defaultValue="1" layout="fill">
<TabTriggerList>
<TabTrigger value="1">라벨1</TabTrigger>
<TabTrigger value="2">라벨2</TabTrigger>
<TabTrigger value="3">라벨3</TabTrigger>
</TabTriggerList>
<TabContentList>
<TabContent value="1">
<div>Content 1</div>
</TabContent>
<TabContent value="2">
<div>Content 2</div>
</TabContent>
<TabContent value="3">
<div>Content 3</div>
</TabContent>
</TabContentList>
</Tabs>
);
}
24 changes: 24 additions & 0 deletions component-docs/snippets/example/react/tabs-layout-hug.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "seed-design/ui/tabs";

export default function TabsLayoutHug() {
return (
<Tabs defaultValue="1" layout="hug">
<TabTriggerList>
<TabTrigger value="1">라벨1</TabTrigger>
<TabTrigger value="2">라벨2</TabTrigger>
<TabTrigger value="3">라벨3</TabTrigger>
</TabTriggerList>
<TabContentList>
<TabContent value="1">
<div>Content 1</div>
</TabContent>
<TabContent value="2">
<div>Content 2</div>
</TabContent>
<TabContent value="3">
<div>Content 3</div>
</TabContent>
</TabContentList>
</Tabs>
);
}
Loading

0 comments on commit fa31bb1

Please sign in to comment.