IBM carbon design system React framework μ‚¬μš©ν•΄λ³΄κΈ°

2024. 4. 2. 17:01Β· πš†πšŽπš‹/π™²πš‚πš‚
λͺ©μ°¨
  1. 전체 μ½”λ“œ
  2. 1️⃣ component import ν•˜κΈ° 
  3. 2️⃣ scss 파일 import 
  4. 3️⃣ μ‚¬μš©ν•  component λ„£κΈ° 
  5. 4️⃣ carbon μŠ€νƒ€μΌ κ°€μ Έμ˜€κΈ°
λ°˜μ‘ν˜•

 

 

npm install @carbon/react

carbon/reactλ₯Ό ν”„λ‘œμ νŠΈ 폴더에 κΉ”μ•„μ€€λ‹€. 

 

 

https://react.carbondesignsystem.com/?path=/docs/components-button--overview

 

Carbon Components React

This is the React implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs.

react.carbondesignsystem.com

μœ„ 링크에 λ“€μ–΄κ°€λ©΄ μ—¬λŸ¬κ°€μ§€ componentλ₯Ό μ°Ύμ•„λ³Ό 수 μžˆλ‹€. 

 

 

 

 

μ—¬κΈ°μžˆλŠ” λ²„νŠΌ λ””μžμΈμ„ μ‚¬μš©ν•΄λ³΄λ €κ³  ν•œλ‹€. 

 

 

 

 

Show Code λ²„νŠΌμ„ λˆ„λ₯΄λ©΄ 

 

 

 

μ½”λ“œκ°€ λ‚˜μ˜¨λ‹€. 

 

 

 

 

 

λΆ€νŠΈμŠ€νŠΈλž©λ³΄λ‹€ μ„€μ •ν•΄μ•Όν•  게 λͺ‡ 개 더 μžˆλ‹€.

- μ–΄λ–€ componentλ₯Ό μ‚¬μš©ν•  μ§€ import ν•˜κΈ°

- scss νŒŒμΌμ— @use '@carbon/react'; 써주기

- js νŒŒμΌμ— μœ„μ—μ„œ 적은 scss νŒŒμΌμ„ import ν•˜κΈ°

 

 

 

 

전체 μ½”λ“œ

App.js

import React from 'react';
import {Button} from '@carbon/react';
import './style/AppTest.scss';

function App() {
  return (
    <div>
      <Button className="btn">Primary</Button>
      <Button kind="secondary">Secondary</Button>
      <Button kind="tertiary">Tertiary</Button>
      <Button kind="danger">Danger</Button>
      <Button kind="danger--tertiary">Danger Tertiary</Button>
      <Button kind="danger--ghost">Danger Ghost</Button>
      <Button kind="ghost">Ghost</Button>
    </div>

  );
}

export default App;

 

 

 

AppTest.scss

// Bring in all the styles for Carbon in your root/global stylesheet
@use '@carbon/react';

.btn{
  background-color : pink;
}

 

 

 

 

 

 

 

 

1️⃣ component import ν•˜κΈ° 

import {Button} from '@carbon/react';

 

μ‚¬μš©ν•  componentλ₯Ό import ν•΄μ˜¨λ‹€. 

Button을 μ‚¬μš©ν•΄λ³΄λ €κ³  Button을 κ°€μ Έμ™”λ‹€. 

 

 

 

 

2️⃣ scss 파일 import 

import './style/AppTest.scss';

그리고 μ μš©ν•  scss νŒŒμΌλ„ μƒμ„±ν•œ λ’€ import ν•΄μ˜¨λ‹€. 

 

 

 

3️⃣ μ‚¬μš©ν•  component λ„£κΈ° 

      <Button className="btn">Primary</Button>
      <Button kind="secondary">Secondary</Button>
      <Button kind="tertiary">Tertiary</Button>
      <Button kind="danger">Danger</Button>
      <Button kind="danger--tertiary">Danger Tertiary</Button>
      <Button kind="danger--ghost">Danger Ghost</Button>
      <Button kind="ghost">Ghost</Button>

μ‚¬μš©ν•  μš”μ†Œλ“€μ„ 적어쀀닀. 

 

 

 

 

4️⃣ carbon μŠ€νƒ€μΌ κ°€μ Έμ˜€κΈ°

@use '@carbon/react';

μ „μ—­ scss νŒŒμΌμ— @use '@carbon/react'; λ₯Ό μž‘μ„±ν•΄μ€€λ‹€. 

 

 

 

 

μ΄λ ‡κ²Œ μ‚¬μš©ν•  수 μžˆλ‹€. 

 

 

 

 

 

λ°˜μ‘ν˜•

'πš†πšŽπš‹ > π™²πš‚πš‚' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

[SCSS] IBM Carbon Design System React μ„€μ •  (0) 2024.04.01
  1. 전체 μ½”λ“œ
  2. 1️⃣ component import ν•˜κΈ° 
  3. 2️⃣ scss 파일 import 
  4. 3️⃣ μ‚¬μš©ν•  component λ„£κΈ° 
  5. 4️⃣ carbon μŠ€νƒ€μΌ κ°€μ Έμ˜€κΈ°
'πš†πšŽπš‹/π™²πš‚πš‚' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€
  • [SCSS] IBM Carbon Design System React μ„€μ •
ν•΄λ²„λ‹ˆ
ν•΄λ²„λ‹ˆ
κ°œλ°œν•˜λ©΄μ„œ 배운 것듀을 κΈ°λ‘ν•©λ‹ˆλ‹€.
ν•΄λ²„λ‹ˆ
DevNight
ν•΄λ²„λ‹ˆ
전체
였늘
μ–΄μ œ
  • 전체보기 (195)
    • πšπšŽπšπš›πš˜πšœπš™πšŽπšŒπšπš’πšŸπšŽπšœ (5)
      • πšƒπš’πš™πšœ (2)
      • 회고 (3)
      • μ‹€μˆ˜ λͺ¨μŒμ§‘ (0)
    • π™Ώπš›πš˜πš“πšŽπšŒπš (3)
      • π™Ίπ™Ύπš‚πšƒπ™° πš†πšŽπš‹ π™Ώπš›πš˜πš“πšŽπšŒπš (2)
    • π™Ώπš›πš˜πšπš›πšŠπš–πš–πš’πš—πš π™»πšŠπš—πšπšžπšŠπšπšŽ (16)
      • π™·πšƒπ™Όπ™» (6)
      • π™²πš‚πš‚ (1)
      • π™Ήπ™°πš…π™° (1)
      • π™ΉπšŠπšŸπšŠπš‚πšŒπš›πš’πš™πš (7)
      • πšƒπš’πš™πšŽπš‚πšŒπš›πš’πš™πš (1)
    • π™±πšŠπšŒπš”πšŽπš—πš (1)
      • πš‚πš™πš›πš’πš—πš π™±πš˜πš˜πš (0)
      • Spring (2)
      • 파일 처리 (1)
      • π™Ήπš‚π™Ώ (1)
    • π™΅πš›πš˜πš—πšπšŽπš—πš (5)
      • 𝚁𝚎𝚊𝚌𝚝 (3)
      • πš…πšžπšŽ.πš“πšœ (2)
    • π™°πš•πšπš˜πš›πš’πšπš‘πš– (32)
      • π™Ώπš›πš˜πšπš›πšŠπš–πš–πšŽπš›πšœ (6)
      • π™±πšŠπšŽπš”πš“πš˜πš˜πš— (24)
    • π™³π™°πšƒπ™°π™±π™°πš‚π™΄ (16)
      • πš‚πš€π™» (1)
      • π™Ώπš˜πšœπšπšπš›πšŽπš‚πš€π™» (1)
      • π™Όπš’πš‚πš€π™» (3)
      • π™Ύπš›πšŠπšŒπš•πšŽ (0)
      • π™Ώπš›πš˜πšπš›πšŠπš–πš–πšŽπš›πšœ (1)
    • π™³πšŽπšŸπšŽπš•πš˜πš™πš–πšŽπš—πš πšƒπš˜πš˜πš•πšœ (4)
      • π™Έπš—πšπšŽπš•πš•πš’π™Ή (0)
      • π™΄πšŒπš•πš’πš™πšœπšŽ (1)
      • πš…πš‚π™²πš˜πšπšŽ (0)
      • π™±πšžπš’πš•πš πš‚πšŒπš›πš’πš™πšπšœ (1)
    • πš…πšŽπš›πšœπš’πš˜πš— π™²πš˜πš—πšπš›πš˜πš• (0)
      • π™Άπš’πš (0)
      • π™Άπš’πšπ™·πšžπš‹ (0)
      • πš‚πš…π™½ (0)
    • 배포 및 인프라 (2)
      • π™°πš†πš‚ (2)
    • π™Έπšƒ (15)
      • πš‚πš…π™½ (3)
    • π™ΉπšŠπšŸπšœπš‚πšŒπš›πš’πš™πš (4)
      • πš…πšžπšŽ.πš“πšœ (0)
    • πš†πšŽπš‹ (9)
      • 𝚊𝚠𝚜 (0)
      • π™·πšƒπ™Όπ™» (0)
      • π™²πš‚πš‚ (2)
    • π™ΉπšŠπšŸπšŠ (56)
      • πš‚πš™πš›πš’πš—πš π™±πš˜πš˜πš (3)
    • π™Άπš’πšπ™·πšžπš‹ (10)
    • ν™˜κ²½μ„€μ • (10)

λΈ”λ‘œκ·Έ 메뉴

  • ν™ˆ
  • νƒœκ·Έ
  • λ°©λͺ…둝

곡지사항

인기 κΈ€

νƒœκ·Έ

  • λ°±μ€€
  • html
  • web
  • spring
  • μ½”λ”©ν…ŒμŠ€νŠΈ
  • ν‹°μŠ€ν† λ¦¬μ±Œλ¦°μ§€
  • μžλ°”μŠ€ν¬λ¦½νŠΈ
  • μžλ°”μ˜μ •μ„
  • λ°°μ—΄
  • JavaScript
  • PostgreSQL
  • php
  • μžλ°”
  • μ•Œκ³ λ¦¬μ¦˜
  • 이클립슀
  • Java
  • μ˜€λΈ”μ™„
  • ν”„λ‘œκ·Έλž˜λ¨ΈμŠ€
  • React
  • database

졜근 λŒ“κΈ€

졜근 κΈ€

hELLO Β· Designed By μ •μƒμš°.v4.3.0
ν•΄λ²„λ‹ˆ
IBM carbon design system React framework μ‚¬μš©ν•΄λ³΄κΈ°
μƒλ‹¨μœΌλ‘œ

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”

단좕킀

λ‚΄ λΈ”λ‘œκ·Έ

λ‚΄ λΈ”λ‘œκ·Έ - κ΄€λ¦¬μž ν™ˆ μ „ν™˜
Q
Q
μƒˆ κΈ€ μ“°κΈ°
W
W

λΈ”λ‘œκ·Έ κ²Œμ‹œκΈ€

κΈ€ μˆ˜μ • (κΆŒν•œ μžˆλŠ” 경우)
E
E
λŒ“κΈ€ μ˜μ—­μœΌλ‘œ 이동
C
C

λͺ¨λ“  μ˜μ—­

이 νŽ˜μ΄μ§€μ˜ URL 볡사
S
S
맨 μœ„λ‘œ 이동
T
T
ν‹°μŠ€ν† λ¦¬ ν™ˆ 이동
H
H
단좕킀 μ•ˆλ‚΄
Shift + /
⇧ + /

* λ‹¨μΆ•ν‚€λŠ” ν•œκΈ€/영문 λŒ€μ†Œλ¬Έμžλ‘œ 이용 κ°€λŠ₯ν•˜λ©°, ν‹°μŠ€ν† λ¦¬ κΈ°λ³Έ λ„λ©”μΈμ—μ„œλ§Œ λ™μž‘ν•©λ‹ˆλ‹€.