Integrations

Integrations

Fomantic UI를 React, Meteor, Ember, Angular 같은 다른 라이브러리와 함께 사용하는 방법을 알려드릴게요. 각 프레임워크별 연동 저장소와 설치 방법이 정리되어 있어요.

출처: 문서

본문

Fomantic UI를 다른 라이브러리와 함께 사용하는 방법을 살펴볼게요.

React

Contribute to React Development

Semantic UI React 바인딩은 아직 개발 중이지만, 대부분의 컴포넌트에서 사용할 수 있어요.

Visit React Repo

Meteor

Install via Atmosphere

Atmosphere에서 Semantic UI 패키지를 설치해요.

meteor add semantic:ui
    

    
    
    
      meteor add flemay:less-autoprefixer
    
    
    
    
    
      meteor remove standard-minifier-css
    
    
    
      meteor add less juliancwirko:postcss
    
    
    
      {
        "devDependencies": {
          "autoprefixer": "^6.3.1"
        },
        "postcss": {
          "plugins": {
            "autoprefixer": {"browsers": ["last 2 versions"]}
          }
        }
      }
    
    
    
      meteor npm install

Create a custom.semantic.json file

Meteor를 중지한 상태에서:

touch client/lib/semantic-ui/custom.semantic.json

custom.semantic.json은 프로젝트 빌드에 어떤 테마와 컴포넌트를 포함할지 결정하는 특별한 파일이에요.

{
      "definitions": {
        "accordion" : true,
        "ad"        : true,
        "api"       : true,
        /* etc */
      },
      "themes": {
        "amazon"     : false,
        "basic"      : false,
        "bookish"    : false,
        "bootstrap3" : false,
        "chubby"     : false,
        "classic"    : false,
        "default"    : true,
        /* etc */
      }

Start Meteor / Generate

Meteor가 시작되거나 새로고침될 때마다 semantic:ui 패키지를 호출해서 Semantic UI를 생성해요.

Customize Site Variables

Semantic UI meteor에는 사이트의 less 변수를 맞춤 설정할 수 있는 사이트 테마 site/가 포함돼 있어요. 이 파일들은 선택 사항이며, 커스터마이징이 필요 없다면 안전하게 제거할 수 있어요.

Issues & Debugging

Semantic UI Meteor에 대한 도움과 최신 업데이트는 GitHub 저장소 홈페이지를 방문해 주세요.

Visit Meteor Repo

Ember

Installing via CLI

ember-cli 앱 안에서 라이브러리를 NPM 의존성으로 포함해요.

If you are using Ember CLI 1.13-2.X
    
      ember install semantic-ui-ember
    
    If you are using an older version 
    
    npm install --save-dev Semantic-Org/Semantic-UI-Ember

Run the Library's Blueprint

ember generate semantic-ui-ember

Get Coding

각 컴포넌트의 예시는 GitHub 저장소에서 확인할 수 있어요.

Visit Ember Repo

Angular

Contribute to Angular Development

Semantic UI Angular 바인딩은 아직 개발 중이지만, 일부 컴포넌트에서는 사용할 수 있어요.

Visit Angular Repo

더 알아보기 (Learn more)

프레임워크별 바인딩은 각각의 저장소에서 관리되고 있어요. 프로젝트에 맞는 연동을 찾아 설치한 뒤, Getting Started를 참고해 기본 사용법을 익혀 보세요.