-
Notifications
You must be signed in to change notification settings - Fork 48
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
Changes from 12 commits
f4f032f
3dc0054
c20ba3f
f0bee88
1ad13f4
e82ffbf
dde18a0
cf9c82e
1053fe5
4681130
08fe868
cd611f1
3639aa8
d0dcd35
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
* text=auto | ||
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -130,3 +130,27 @@ Grid 컴포넌트에 속하는 아이템입니다. 각 요소가 그리드에서 | |
<GridItem>E</GridItem> | ||
</Grid> | ||
``` | ||
|
||
# TabLayout | ||
|
||
## 설명 | ||
|
||
TabBar가 존재하는 레이아웃입니다. 상단의 Tab으로 이동할 수 있습니다. | ||
|
||
Tab Layout의 크기는 부모의 크기를 상속받습니다. | ||
|
||
## 속성 | ||
|
||
`tabs: string[]` : 요소를 선택해 콘텐츠를 이동할 수 있는 Tab Header에 표시될 문자열 배열 값입니다. | ||
|
||
`children: ReactElement` : 선택된 tabs 요소에 따라 띄울 콘텐츠를 보여줍니다. 보여주는 값은 선택된 tabs의 인덱스에 의존합니다. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 사용해보니 |
||
|
||
## 사용 예시 | ||
|
||
```tsx | ||
<TabLayout tabs={["항목 1", "항목 2", "항목 3"]} bordercolor={"blue"}> | ||
<div>콘텐츠 11</div> | ||
<div>콘텐츠 22</div> | ||
<div>콘텐츠 33</div> | ||
</TabLayout> | ||
``` |
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
This file was deleted.
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; |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
요건 어떤 설정인가요??
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
제가 주말에 윈도우에서 작업을 한번 했는데, CRLF로 저장이 되어서 그걸 막으려고 지정해준 옵션입니다!