Skip to content

Commit

Permalink
docs(component-docs): tabs examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@junghyeonsu
junghyeonsu committed Oct 10, 2024
1 parent ab396e3 commit d30920d
Show file tree
Hide file tree
Showing 18 changed files with 628 additions and 306 deletions.
58 changes: 38 additions & 20 deletions component-docs/public/__mdx__/react/tabs-alert.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,45 @@ import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "se

export default function TabsAlert() {
return (
<Tabs defaultValue="1">
<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>
<div style={{ width: "360px" }}>
<Tabs defaultValue="1">
<TabTriggerList>
<TabTrigger value="1">라벨1</TabTrigger>
<TabTrigger value="2" alert>
라벨2
</TabTrigger>
<TabTrigger value="3">라벨3</TabTrigger>
</TabTriggerList>
<TabContentList>
<TabContent value="1">
<Content>Content 1</Content>
</TabContent>
<TabContent value="2">
<Content>Content 2</Content>
</TabContent>
<TabContent value="3">
<Content>Content 3</Content>
</TabContent>
</TabContentList>
</Tabs>
</div>
);
}

const Content = (props: React.PropsWithChildren) => {
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "300px",
backgroundColor: "var(--seed-color-bg-layer-default)",
}}
>
{props.children}
</div>
);
};

```
58 changes: 38 additions & 20 deletions component-docs/public/__mdx__/react/tabs-disabled.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,45 @@ import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "se

export default function TabsDisabled() {
return (
<Tabs defaultValue="1">
<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>
<div style={{ width: "360px" }}>
<Tabs defaultValue="1">
<TabTriggerList>
<TabTrigger value="1">라벨1</TabTrigger>
<TabTrigger value="2" isDisabled>
라벨2
</TabTrigger>
<TabTrigger value="3">라벨3</TabTrigger>
</TabTriggerList>
<TabContentList>
<TabContent value="1">
<Content>Content 1</Content>
</TabContent>
<TabContent value="2">
<Content>Content 2</Content>
</TabContent>
<TabContent value="3">
<Content>Content 3</Content>
</TabContent>
</TabContentList>
</Tabs>
</div>
);
}

const Content = (props: React.PropsWithChildren) => {
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "300px",
backgroundColor: "var(--seed-color-bg-layer-default)",
}}
>
{props.children}
</div>
);
};

```
27 changes: 22 additions & 5 deletions component-docs/public/__mdx__/react/tabs-dynamic-height.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 TabsDynamicHeight() {
return (
<>
<div style={{ width: "360px" }}>
<Tabs defaultValue="1" lazyMode="unmount" isLazy={true} isSwipeable={false}>
<TabTriggerList>
<TabTrigger value="1">라벨1</TabTrigger>
Expand All @@ -12,19 +12,36 @@ export default function TabsDynamicHeight() {
</TabTriggerList>
<TabContentList>
<TabContent value="1">
<div style={{ height: "100px", backgroundColor: "#ffeeee" }}>Content 1</div>
<Content height="100px">Content 1</Content>
</TabContent>
<TabContent value="2">
<div style={{ height: "200px", backgroundColor: "#ffeeff" }}>Content 2</div>
<Content height="200px">Content 2</Content>
</TabContent>
<TabContent value="3">
<div style={{ height: "300px", backgroundColor: "#ffeedd" }}>Content 3</div>
<Content height="300px">Content 3</Content>
</TabContent>
</TabContentList>
</Tabs>
<div style={{ height: "100px", backgroundColor: "gray" }}>아래 컨텐츠</div>
</>
</div>
);
}

const Content = (props: React.PropsWithChildren<{ height: string }>) => {
const { height, children } = props;
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height,
backgroundColor: "var(--seed-color-bg-layer-default)",
}}
>
{children}
</div>
);
};

```
54 changes: 36 additions & 18 deletions component-docs/public/__mdx__/react/tabs-layout-fill.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,43 @@ import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "se

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>
<div style={{ width: "360px" }}>
<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">
<Content>Content 1</Content>
</TabContent>
<TabContent value="2">
<Content>Content 2</Content>
</TabContent>
<TabContent value="3">
<Content>Content 3</Content>
</TabContent>
</TabContentList>
</Tabs>
</div>
);
}

const Content = (props: React.PropsWithChildren) => {
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "300px",
backgroundColor: "var(--seed-color-bg-layer-default)",
}}
>
{props.children}
</div>
);
};

```
54 changes: 36 additions & 18 deletions component-docs/public/__mdx__/react/tabs-layout-hug.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,43 @@ import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "se

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>
<div style={{ width: "360px" }}>
<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">
<Content>Content 1</Content>
</TabContent>
<TabContent value="2">
<Content>Content 2</Content>
</TabContent>
<TabContent value="3">
<Content>Content 3</Content>
</TabContent>
</TabContentList>
</Tabs>
</div>
);
}

const Content = (props: React.PropsWithChildren) => {
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "300px",
backgroundColor: "var(--seed-color-bg-layer-default)",
}}
>
{props.children}
</div>
);
};

```
54 changes: 36 additions & 18 deletions component-docs/public/__mdx__/react/tabs-preview.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,43 @@ import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from "se

export default function TabsPreview() {
return (
<Tabs defaultValue="1">
<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>
<div style={{ width: "360px" }}>
<Tabs defaultValue="1">
<TabTriggerList>
<TabTrigger value="1">라벨1</TabTrigger>
<TabTrigger value="2">라벨2</TabTrigger>
<TabTrigger value="3">라벨3</TabTrigger>
</TabTriggerList>
<TabContentList>
<TabContent value="1">
<Content>Content 1</Content>
</TabContent>
<TabContent value="2">
<Content>Content 2</Content>
</TabContent>
<TabContent value="3">
<Content>Content 3</Content>
</TabContent>
</TabContentList>
</Tabs>
</div>
);
}

const Content = (props: React.PropsWithChildren) => {
return (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "300px",
backgroundColor: "var(--seed-color-bg-layer-default)",
}}
>
{props.children}
</div>
);
};

```
Loading

0 comments on commit d30920d

Please sign in to comment.