@designbasekorea/ui-wc

Designbase Web Components — Vue 3, Angular, React, vanilla HTML에서 공통으로 사용하는 웹 컴포넌트 원본입니다.

React 사용자는 @designbasekorea/ui-wc/react의 Button, Input, Tabs wrapper를 사용할 수 있습니다. vanilla/Vue/Angular는 <db-button> 같은 Custom Elements를 직접 사용할 수 있습니다. 기존 @designbasekorea/ui React 패키지는 별도 레거시/완성형 패키지로 유지합니다.

설치

npm install @designbasekorea/ui-wc @designbasekorea/tokens @designbasekorea/theme

사용법

import '@designbasekorea/tokens/dist/css/tokens.css';
import '@designbasekorea/theme/dist/css/theme.css';
import '@designbasekorea/ui-wc/dist/index.css';
import '@designbasekorea/ui-wc';

<db-button variant="primary">저장</db-button>
<db-input label="이메일" placeholder="[email protected]"></db-input>
<db-tabs labels="홈,탐색,알림" active-index="0"></db-tabs>

React wrapper

import '@designbasekorea/tokens/dist/css/tokens.css';
import '@designbasekorea/theme/dist/css/theme.css';
import '@designbasekorea/ui-wc/dist/index.css';
import { Button } from '@designbasekorea/ui-wc/react';

<Button variant="primary" onPress={() => save()}>
    저장
</Button>

컴포넌트 (11개)

| 태그 | 설명 | |------|------| | db-button | 버튼 | | db-input | 텍스트 입력 | | db-checkbox | 체크박스 | | db-toggle | 토글 | | db-badge | 뱃지 | | db-spinner | 로딩 스피너 | | db-card | 카드 | | db-tabs | 탭 | | db-modal | 모달 (<dialog>) | | db-dropdown | 드롭다운 | | db-tooltip | 툴팁 |

이벤트

커스텀 이벤트는 db- 접두사를 사용합니다.

• db-click — Button
• db-input — Input (detail.value)
• db-change — Checkbox, Toggle, Tabs, Dropdown
• db-close — Modal

스타일

Light DOM + 글로벌 --db-* CSS 변수. 자세한 내용은 docs/STYLING.md.

프레임워크별 가이드

• 멀티플랫폼 가이드
• WordPress 관리자 연동
• 크로스플랫폼 컴포넌트 전략
• React 통합
• Vue / Angular 통합

Storybook

npm run storybook

포트: 6007