Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[고급 레이아웃 컴포넌트] 윤생(이윤성) 미션 제출합니다. #69

Merged
merged 14 commits into from
Oct 3, 2023
1 change: 1 addition & 0 deletions .gitattributes
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
* text=auto

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요건 어떤 설정인가요??

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

제가 주말에 윈도우에서 작업을 한번 했는데, CRLF로 저장이 되어서 그걸 막으려고 지정해준 옵션입니다!

24 changes: 24 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -130,3 +130,27 @@ Grid 컴포넌트에 속하는 아이템입니다. 각 요소가 그리드에서
<GridItem>E</GridItem>
</Grid>
```

# TabLayout

## 설명

TabBar가 존재하는 레이아웃입니다. 상단의 Tab으로 이동할 수 있습니다.

Tab Layout의 크기는 부모의 크기를 상속받습니다.

## 속성

`tabs: string[]` : 요소를 선택해 콘텐츠를 이동할 수 있는 Tab Header에 표시될 문자열 배열 값입니다.

`children: ReactElement` : 선택된 tabs 요소에 따라 띄울 콘텐츠를 보여줍니다. 보여주는 값은 선택된 tabs의 인덱스에 의존합니다.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

사용해보니 bordercolor도 필수인 것 같아서, 속성에 추가해주면 좋을 것 같아요!


## 사용 예시

```tsx
<TabLayout tabs={["항목 1", "항목 2", "항목 3"]} bordercolor={"blue"}>
<div>콘텐츠 11</div>
<div>콘텐츠 22</div>
<div>콘텐츠 33</div>
</TabLayout>
```
7 changes: 0 additions & 7 deletions dist/cjs/components/Container/index.d.ts

This file was deleted.

27 changes: 0 additions & 27 deletions dist/cjs/components/Container/index.js

This file was deleted.

1 change: 0 additions & 1 deletion dist/cjs/components/Container/index.js.map

This file was deleted.

9 changes: 0 additions & 9 deletions dist/cjs/components/Flex/index.d.ts

This file was deleted.

31 changes: 0 additions & 31 deletions dist/cjs/components/Flex/index.js

This file was deleted.

1 change: 0 additions & 1 deletion dist/cjs/components/Flex/index.js.map

This file was deleted.

6 changes: 0 additions & 6 deletions dist/cjs/components/FlexItem/index.d.ts

This file was deleted.

22 changes: 0 additions & 22 deletions dist/cjs/components/FlexItem/index.js

This file was deleted.

1 change: 0 additions & 1 deletion dist/cjs/components/FlexItem/index.js.map

This file was deleted.

8 changes: 0 additions & 8 deletions dist/cjs/components/Grid/index.d.ts

This file was deleted.

28 changes: 0 additions & 28 deletions dist/cjs/components/Grid/index.js

This file was deleted.

1 change: 0 additions & 1 deletion dist/cjs/components/Grid/index.js.map

This file was deleted.

5 changes: 0 additions & 5 deletions dist/cjs/components/GridItem/index.d.ts

This file was deleted.

19 changes: 0 additions & 19 deletions dist/cjs/components/GridItem/index.js

This file was deleted.

1 change: 0 additions & 1 deletion dist/cjs/components/GridItem/index.js.map

This file was deleted.

10 changes: 0 additions & 10 deletions dist/cjs/index.d.ts

This file was deleted.

17 changes: 0 additions & 17 deletions dist/cjs/index.js

This file was deleted.

1 change: 0 additions & 1 deletion dist/cjs/index.js.map

This file was deleted.

6 changes: 3 additions & 3 deletions dist/esm/components/Container/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { PropsWithChildren } from 'react';
import { CSSProperties } from 'styled-components';
interface ContainerProps extends PropsWithChildren {
maxWidth?: number;
minWidth?: number;
maxwidth?: number;
minwidth?: number;
backgroundColor: CSSProperties['backgroundColor'];
}
declare const Container: ({ minWidth, maxWidth, backgroundColor, children, }: Partial<ContainerProps>) => import("react/jsx-runtime").JSX.Element;
declare const Container: ({ minwidth, maxwidth, backgroundColor, children, }: Partial<ContainerProps>) => import("react/jsx-runtime").JSX.Element;
export default Container;
25 changes: 7 additions & 18 deletions dist/esm/components/Container/index.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading