0.0.8 • Published 2 years ago
ryencatchers-ui v0.0.8
@ryencatchers/ui
Ryencatchers design system
Getting started
in a folder by level (ex. /child)
yarn:
yarn
yarn dev
npm:
npm install
npm run dev
Admin Components
컴포넌트 별 Ticket 확인
https://www.notion.so/ryencatchers/12a4ba6c348642469183c919d9cf94e6?v=49ca56a8e26e47dab7b80aab06ee95f6
Parameters:
| Level | Component | Props | Required | Type | Description | |
|---|---|---|---|---|---|---|
| Child | Input | value | true | string | ||
| theme | false | "light" or "dark" | ||||
| type | false | "login" or "basic" | 인풋 형식(로그인에쓰이는 인풋인지 일반 인풋인지) | |||
| error | false | boolean | 인풋 상태 | |||
| inputType | true | "email" | "password" | 인풋타입 | ||
| info | false | boolean | basic 인풋 타이틀 옆 아이콘 on off여부 | |||
| inputStyles | false | object | 인풋스타일 | |||
| title | false | string | 일반인풋 타이틀 | |||
| placeholder | false | string | 인풋 placeholder | |||
| --------- | ---------------- | ------------- | -------- | ------------------------------ | ---------------------------------------------------------------------------- | --- |
| Child | Input | |||||
| Child | CheckBox | |||||
| Child | Button | children | true | string or JSX.Elementren | 태그 내 string text 혹은 element 요소 | |
| theme | false | "dark" or "light" or "primary" | 버튼 색상(기본 스타일) | |||
| type | false | "fill" or "outline" | 버튼 타입 | |||
| size | false | "medium" or "small" | 버튼 사이즈 | |||
| isDisabled | false | boolean | 이벤트 실행 가능 여부 | |||
| hasCircleIcon | false | boolean | Circle 아이콘 생성 여부 | |||
| iconPosition | false | "right" or "left" | Circle 아이콘 위치 | |||
| outterStyles | false | object | 버튼 스타일 | |||
| textStyles | false | object | 텍스트 스타일 | |||
| onClick | false | function | 클릭 시 이벤트 | |||
| Child | Dropdown | |||||
| Child | BreadCremb | |||||
| Child | RadioButton | title | Yes | string | 태그 내 string text | |
| onChange | Yes | function | 클릭 시 button check 또는 uncheck | |||
| isSelected | Yes | boolean | checked(true)/unchecked(false) 지정 | |||
| disabled | No | boolean | 이벤트 실행 가능 여부 | |||
| color | No | string | 선택시 보이는 Button 컬러 | |||
| outterStyles | No | object | 전체 스타일 | |||
| textStyles | No | object | 텍스트 스타일 | |||
| Child | Logo | |||||
| Child | NavItem | |||||
| Child | SubMenu | |||||
| Child | Topbar | |||||
| Child | ButtonGroup | |||||
| Child | WidgetTitle | |||||
| Child | Pagination | |||||
| Child | TableTitle | title | true | string or JSX.Element | ||
| TableTitle | align | false | "left" or "center" or "right" | 태그 내 string title 혹은 element 요소 | ||
| TableTitle | searchFunc | false | function | 요소 정렬 방식 | ||
| TableTitle | filterFunc | false | function | 검색 함수 | ||
| TableTitle | sortFunc | false | function | 필터 함수 | ||
| TableTitle | width | false | number | 정렬 함수 | ||
| TableTitle | outterStyle | false | object | 전체 스타일 | ||
| TableTitle | textStyle | false | object | Title 스타일 | ||
| Child | TableItem | |||||
| Child | ListItem | |||||
| Child | SocialLogin | |||||
| Container | Sidebar | |||||
| Container | Login | |||||
| Container | RadioButtonGroup | data | Yes | string[] | Radio button 생성 data array | |
| onChange | Yes | function | 클릭 시 button check 또는 uncheck, 해당 radio button 값 상위 컴포넌트로 전달 | |||
| selected | Yes | boolean | 현재 checked 아이템 |