turtle601-layout-component
v1.2.2
Published
푸만능의 재사용 가능한 레이아웃 컴포넌트
Downloads
19
Readme
turtle601-layout-component
설명
재사용 가능한 레이아웃 컴포넌트 구현
설치
- 리액트 환경에서 사용 가능합니다
- js 환경과 ts환경 둘 다 사용 가능합니다.
npm i react react-dom
npm i turtle601-layout-component
사용법
Container
- 설명: 화면의 폭에 따라 내용의 최대 폭을 제한하고 중앙에 배치하는 레이아웃
import { Container } from 'turtle601-layout-component';
/*
Container Props 설명
- as? 원하는 html 태그를 넣을 수 있다.
- minWidth? 화면 중앙에 위치한 Container 자식 요소의 최소 크기를 지정할 수 있다.
- maxWidth? 화면 중앙에 위치한 Container 자식 요소의 최대 크기를 제한할 수 있다.
*/
function ContainerExample() {
return (
<Container minWidth="500px">
<div style={{ border: '1px solid red' }}>
별 하나의 동경과 별하나에 사랑과 별 하나의 어머니, 어머니, 어머님
</div>
<div>
별 하나의 동경과 별하나에 사랑과 별 하나의 어머니, 어머니, 어머님
</div>
</Container>
);
}
Flex
/*
Flex Props 설명
- as? 원하는 html 태그를 넣을 수 있다.
- direction?: flexBox의 flex-direction'을 설정을 할 수 있다.
- justify?: flexBox의 justify-content 설정을 할 수 있다.
- align?: flexBox의 align-items 설정을 할 수 있다.
- gap?: flexBox의 gap 설정을 할 수 있다.
*/
import { Flex } from 'turtle601-layout-component';
function FlexExample() {
return (
<Flex
as="section"
justify="space-between"
style={{
border: `1px solid red`,
}}
gap="4px"
>
)
}
Grid
- 설명: CSS Grid를 사용하여 자식 컴포넌트들을 격자 형태로 배열하는 컴포넌트
/*
Grid Props 설명
- as? 원하는 html 태그를 넣을 수 있다.
- gap?: grid의 gap을 설정을 할 수 있다.
- placeItems?: grid의 placeItems 설정을 할 수 있다.
Grid.Item Props 설명
- xs?: grid의 전체 폭 12 중 차지하는 너비를 지정할 수 있다. ex) 1 | 2 | 3 | 4 | 6 | 8 | 12;
*/
import { GridLayout, GridItem } from 'turtle601-layout-component';
function GridExample() {
return (
<Grid gap={5} placeItems='center'>
<Grid.Item xs={8}>Item 1</Grid.Item>
<Grid.Item xs={4}>Item 2</Grid.Item>
<Grid.Item xs={12}>Item 3</Grid.Item>
</Grid>;
)
}
Tab
사용 방법:
TabItem에 부여된 value값과 TabPanel에 부여된 value값을 매칭시킵니다. 내가 보고 싶은 TabItem을 클릭 시 동일한 value값이 부여된 TabPanel의 컴포넌트의 내용이 보여집니다.
/*
TabProvider
- tabIdx? tab에서 처음 보여줄 idx를 설정할 수 있다.
TabList
- width?: TabList의 width를 정할 수 있다.
TabItem
- value: TabPanel과 mapping되는 TabItem의 idx값
- label: TabItem에 보여줄 string값;
- disabled?: 해당 속성값이 true일 경우 TabItem 버튼을 누를 수 없다.
- indicatorColor?: TabItem 활성화되었을 때 나타내는 색깔
TabPanel
- value: 선택된 TabItem과 mapping된 idx값
*/
function TabExample() {
const [value] = useState(1);
return (
<TabProvider tabIdx={value}>
<TabList>
<TabItem label="Item One" value={1} />
<TabItem label="Item Two" value={2} />
<TabItem label="Item Three" value={3} />
</TabList>
<TabPanel value={1}>Item One</TabPanel>
<TabPanel value={2}>Item Two</TabPanel>
<TabPanel value={3}>Item Three</TabPanel>
</TabProvider>
);
}