Ant-design: `prefixCls`๋Š” ์ผ๋ถ€ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ์ƒ์†๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2018๋…„ 06์›” 09์ผ  ยท  4์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: ant-design/ant-design

์ด๊ฒƒ์€ prefixCls ๋ฌธ์ œ๋ฅผ ์ถ”์ ํ•˜๊ธฐ์œ„ํ•œ ํฌ๊ด„์  ์ธ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค.

  • [] # 10017 ํƒœ๊ทธ : prefixCl์ด Icon์— ์ „๋‹ฌ๋˜์ง€ ์•Š์Œ
  • [] # 10565 ๋ชจ๋‹ฌ : prefixCls๊ฐ€ Button์— ์ „๋‹ฌ๋˜์ง€ ์•Š์Œ
  • [x] # 12546 Modal.xxx : prefixCls๊ฐ€ ๋งˆ์Šคํฌ์— ์ „๋‹ฌ๋˜์ง€ ์•Š์Œ
  • [] # 10042 ์—…๋กœ๋“œ-๋“œ๋ž˜ ๊ฑฐ : UploadList์— prefixCls ์ „๋‹ฌ-์—…๋กœ๋“œ
  • [] ์ „์†ก
  • [] # 12676 Popconfirm : prefixCls๊ฐ€ Button์— ์ „๋‹ฌ๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.
Inactive IssueHuntFest help wanted

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋‚ด๋ถ€ ํ† ๋ก ์—์„œ :

prefixCls ๊ตฌ์„ฑ์„ ์œ„ํ•ด ConfigProvider ๋ผ๋Š” ์ƒˆ ๊ณต๊ธ‰์ž๋ฅผ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.

import { ConfigProvider, Button } from 'antd';

<ConfigProvider prefixCls="awesome-">
  <Button>A Button</Button>
</ConfigProvider

์ƒ์„ฑ :

<button type="button" class="awesome-btn"><span>A Button</span></button>

๋ชจ๋“  4 ๋Œ“๊ธ€

Input ๋ชฉ๋ก์— ํฌํ•จ๋˜์–ด์•ผํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

import 'antd/dist/antd.less' ๋˜๋Š” import 'antd/lib/input/style' ์‚ฌ์šฉ์‹œ;

.ant-input-affix-wrapper .ant-input-prefix, .ant-input-affix-wrapper .ant-input-suffix {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    line-height: 0;
    color: rgba(0, 0, 0, 0.65);
}

import 'antd/dist/antd.css' ์‚ฌ์šฉํ•˜๋Š” ๋™์•ˆ ๋ธŒ๋ผ์šฐ์ € ๋ณ„ ์ ‘๋‘์‚ฌ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

.ant-input-affix-wrapper .ant-input-prefix, .ant-input-affix-wrapper .ant-input-suffix {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    line-height: 0;
    color: rgba(0, 0, 0, 0.65);
}

@chungwong ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค.

๋‚ด๋ถ€ ํ† ๋ก ์—์„œ :

prefixCls ๊ตฌ์„ฑ์„ ์œ„ํ•ด ConfigProvider ๋ผ๋Š” ์ƒˆ ๊ณต๊ธ‰์ž๋ฅผ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.

import { ConfigProvider, Button } from 'antd';

<ConfigProvider prefixCls="awesome-">
  <Button>A Button</Button>
</ConfigProvider

์ƒ์„ฑ :

<button type="button" class="awesome-btn"><span>A Button</span></button>

# 12991์„ ํ†ตํ•ด ํ•ด๊ฒฐ๋ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰