Elastic UI

Elastic UI

Elastic에서 제공하는 디자인 시스템이자 React 기반의  UI 컴포넌트 라이브러리

사용자 인터페이스를 구축하는 데 사용

일관된 디자인과 사용자 경험을 제공하기 위해 스타일과 인터랙션을 정의한 여러 재사용 가능한 컴포넌트를 포함

 

특징

 

• 일관성: Elastic UI는 일관된 디자인과 UX 패턴을 제공해, 앱 전체에서 일관된 사용자 경험을 보장한다.
• 재사용 가능한 컴포넌트: 버튼, 폼, 네비게이션 등 다양한 UI 요소를 미리 제공하여, 이를 쉽게 조합해 복잡한 인터페이스를 만드는 것이 가능하다.
• 반응형 디자인: 다양한 화면 크기에서 잘 작동하도록 설계되어, 반응형 레이아웃을 손쉽게 구축 가능하다.
• 접근성: Elastic UI는 웹 접근성을 우선시하며, WAI-ARIA 표준을 준수하는 컴포넌트들을 제공한다.
• TypeScript 지원: EUI는 TypeScript를 기본적으로 지원하여 더 안전하고 안정적인 개발 경험을 제공한다.

설치 명령어

// npm
npm install @elastic/eui @elastic/datemath moment

// yarn
yarn add @elastic/eui @elastic/datemath moment

 

 

• @elastic/eui: Elastic UI의 메인 패키지.
• @elastic/datemath: 날짜 수식을 처리하는 유틸리티.
• moment: 날짜와 시간을 다루는 라이브러리로, Elastic UI에서 날짜 처리에 사용

CSS 파일 가져오기

// index.tsx 또는 App.tsx 등 프로젝트의 시작 파일에 추가

import '@elastic/eui/dist/eui_theme_light.css'; // 라이트 테마
import '@elastic/eui/dist/eui_theme_dark.css'; // 다크 테마

 

 

예시

import React from 'react';
import {
  EuiButton,
  EuiFieldText,
  EuiFormRow,
  EuiPanel,
  EuiSpacer,
  EuiText,
} from '@elastic/eui';

function App() {
  return (
    <EuiPanel paddingSize="l">
      <EuiText>
        <h2>Elastic UI 예시</h2>
      </EuiText>
      
      <EuiSpacer size="l" />
      
      <EuiFormRow label="이름을 적어주세요">
        <EuiFieldText placeholder="이름" />
      </EuiFormRow>
      
      <EuiSpacer size="l" />
      
      <EuiButton fill>작성</EuiButton>
    </EuiPanel>
  );
}

export default App;

 

• EuiButton: 기본 버튼 컴포넌트로, 다양한 스타일 옵션을 제공
• EuiPanel: 카드 스타일의 컨테이너로, 레이아웃을 구성할 때 유용
• EuiFieldText: 입력 필드 컴포넌트로, 다양한 폼 입력값을 처리
• EuiFormRow: 폼 요소에 대한 레이블과 오류 메시지 등을 깔끔하게 렌더링
• EuiSpacer: 컴포넌트 간 간격을 조절하는 간단한 레이아웃 유틸리티

그 외 자료는 공식 문서에서 참고하면 된다.

 

https://eui.elastic.co/#/