From 9e74da6683b83e1c00b4c7c401d933770c7d83b1 Mon Sep 17 00:00:00 2001 From: yeon-dong Date: Sun, 6 Oct 2024 18:27:57 +0900 Subject: [PATCH 1/2] =?UTF-8?q?components=20button=20md=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EB=B2=88=EC=97=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/button/demo/basic.tsx | 2 +- components/button/index.ko-KR.md | 57 +++++++++++++++----------------- 2 files changed, 28 insertions(+), 31 deletions(-) diff --git a/components/button/demo/basic.tsx b/components/button/demo/basic.tsx index c0ac0563d6fe..2ad9bd830313 100644 --- a/components/button/demo/basic.tsx +++ b/components/button/demo/basic.tsx @@ -5,7 +5,7 @@ const App: React.FC = () => ( - + diff --git a/components/button/index.ko-KR.md b/components/button/index.ko-KR.md index d46d4d647298..d2c4ec9300b5 100644 --- a/components/button/index.ko-KR.md +++ b/components/button/index.ko-KR.md @@ -1,7 +1,7 @@ --- category: Components title: Button -description: To trigger an operation. +description: 아래 코드로 버튼을 사용해보세요. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7va7RKs3YzIAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3T4cRqxH9-8AAAAAAAAAAAAADrJ8AQ/original demo: @@ -11,30 +11,29 @@ group: order: 1 --- -## When To Use +## 아래와 같을 때 사용합니다 -A button means an operation (or a series of operations). Clicking a button will trigger its corresponding business logic. +버튼은 작업(또는 일련의 작업들)을 의미합니다. 버튼을 클릭하면 해당 비지니스 로직이 실행됩니다. -In Ant Design we provide 5 types of button. +Ant Design에서는 5가지 유형의 버튼을 제공합니다. -- Primary button: used for the main action, there can be at most one primary button in a section. -- Default button: used for a series of actions without priority. -- Dashed button: commonly used for adding more actions. -- Text button: used for the most secondary action. -- Link button: used for external links. +- 주 버튼(Primary button): 주요 작업에 사용되며, 한 섹션에 주 버튼은 최대 하나만 있을 수 있습니다. +- 기본 버튼(Default button): 우선순위가 없는 일련의 작업에 사용됩니다. +- 대시 버튼(Dashed button): 추가 작업을 위해 일반적으로 사용됩니다. +- 텍스트 버튼(Text button): 가장 부차적인 작업에 사용됩니다. +- 링크 버튼(Link button): 외부 링크에 사용됩니다. -And 4 other properties additionally. +추가적으로 4가지 속성이 더 있습니다: -- `danger`: used for actions of risk, like deletion or authorization. -- `ghost`: used in situations with complex background, home pages usually. -- `disabled`: used when actions are not available. -- `loading`: adds a loading spinner in button, avoids multiple submits too. +- `danger`: 삭제나 권한 부여와 같은 위험한 작업에 사용됩니다. +- `ghost`: 복잡한 배경에서 사용되며, 주로 홈 화면에서 사용됩니다. +- `disabled`: 액션을 허락되지 않을 때 사용됩니다. +- `loading`: 버튼에 로딩 스피너를 추가하여 여러 번 제출하는 것을 방지합니다. -## Examples +## 예시 -Syntactic sugar -Color & Variant +Type Icon Icon Position Debug Icon @@ -62,12 +61,11 @@ Different button styles can be generated by setting Button properties. The recom | autoInsertSpace | We add a space between two Chinese characters by default, which can be removed by setting `autoInsertSpace` to `false`. | boolean | `true` | 5.17.0 | | block | Option to fit button width to its parent width | boolean | false | | | classNames | Semantic DOM class | [Record](#semantic-dom) | - | 5.4.0 | -| color | Set button color | `default` \| `primary` \| `danger` | - | 5.21.0 | -| danger | Syntactic sugar. Set the danger status of button. will follow `color` if provided | boolean | false | | +| danger | Set the danger status of button | boolean | false | | | disabled | Disabled state of button | boolean | false | | | ghost | Make background transparent and invert text and border colors | boolean | false | | | href | Redirect url of link button | string | - | | -| htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type) | `submit` \| `reset` \| `button` | `button` | | +| htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | | | icon | Set the icon component of button | ReactNode | - | | | iconPosition | Set the icon position of button | `start` \| `end` | `start` | 5.17.0 | | loading | Set the loading status of button | boolean \| { delay: number } | false | | @@ -75,31 +73,30 @@ Different button styles can be generated by setting Button properties. The recom | size | Set the size of button | `large` \| `middle` \| `small` | `middle` | | | styles | Semantic DOM style | [Record](#semantic-dom) | - | 5.4.0 | | target | Same as target attribute of a, works when href is specified | string | - | | -| type | Syntactic sugar. Set button type. Will follow `variant` & `color` if provided | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` | | +| type | Set button type | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` | | | onClick | Set the handler to handle `click` event | (event: React.MouseEvent) => void | - | | -| variant | Set button variant | `outlined` \| `dashed` \| `solid` \| `filled` \| `text` \| `link` | - | 5.21.0 | It accepts all props which native buttons support. -## Semantic DOM +## 시맨틱(의미 있는) DOM -## Design Token +## 디자인 토큰 -## FAQ +## 자주 물어보는 질문 -### How to choose type and color & variant? +### 유형과 색상 및 변형을 어떻게 선택하나요? -Type is essentially syntactic sugar for colors and variants. It internally provides a set of mapping relationships between colors and variants for the type. If both exist at the same time, the colors and variants will be used first. +유형(type)은 본질적으로 색상(color)과 변형(variant)에 대한 추가(syntactic sugar)된 문법입니다. 내부적으로 유형에 대해 색상과 변형 간의 매핑 관계를 설정합니다. 두 가지가 동시에 존재하는 경우, 색상과 변형이 우선적으로 사용됩니다. ```jsx ``` -Equivalent +아래와도 똑같습니다. ```jsx ``` -### How to close the click wave effect? +### 어떻게 클릭 파동 효과를 끌 수 있나요? -If you don't need this feature, you can set `disabled` of `wave` in [ConfigProvider](/components/config-provider#api) as `true`. +이 기능이 필요하지 않다면, [ConfigProvider](/components/config-provider#api)에서 `wave`의 `disabled`을 `true`로 설정할 수 있습니다. ```jsx From 5838775c6c646263dabe10c41a12ae3566f7feaa Mon Sep 17 00:00:00 2001 From: yeon-dong Date: Tue, 8 Oct 2024 09:34:41 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20button=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EB=A7=81=ED=81=AC=20ko?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/button/demo/basic.tsx | 2 +- components/button/index.ko-KR.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/button/demo/basic.tsx b/components/button/demo/basic.tsx index 2ad9bd830313..c0ac0563d6fe 100644 --- a/components/button/demo/basic.tsx +++ b/components/button/demo/basic.tsx @@ -5,7 +5,7 @@ const App: React.FC = () => ( - + diff --git a/components/button/index.ko-KR.md b/components/button/index.ko-KR.md index d2c4ec9300b5..982c289c3e3a 100644 --- a/components/button/index.ko-KR.md +++ b/components/button/index.ko-KR.md @@ -65,7 +65,7 @@ Different button styles can be generated by setting Button properties. The recom | disabled | Disabled state of button | boolean | false | | | ghost | Make background transparent and invert text and border colors | boolean | false | | | href | Redirect url of link button | string | - | | -| htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | | +| htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/ko/docs/Web/HTML/Element/button#attr-type) | string | `button` | | | icon | Set the icon component of button | ReactNode | - | | | iconPosition | Set the icon position of button | `start` \| `end` | `start` | 5.17.0 | | loading | Set the loading status of button | boolean \| { delay: number } | false | |