Skip to content

Commit 9dd047d

Browse files
qgp9rigor789
authored andcommitted
translate to KO; init and introduction (#47)
* translate to KO; init and introduction * translate to KO; remove original contributors from introduction * translate to KO; add index_ko.ejs * translate to KO; modify a language name as native * translate to KO; quick-start * translate to KO; installation * translate to KO; getting-started * translate to KO; routing * translate to KO; partial of utilities * translate to KO; layout * translate to KO; action-bar * translate to KO; partial of components * translate to KO; components * translate to KO; dialogs
1 parent 7b2dabc commit 9dd047d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+2197
-1
lines changed

build/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ Metalsmith(cwd)
3838
moment,
3939
localeMap: {
4040
'en': 'English',
41+
'ko': '한국어',
4142
},
4243
home(current) {
4344
const locale = current.locale || this.defaultLocale;
@@ -110,7 +111,7 @@ Metalsmith(cwd)
110111
})
111112
.use(locales({
112113
defaultLocale: 'en',
113-
locales: ['en']
114+
locales: ['en', 'ko']
114115
}))
115116
.use(order())
116117
.use(categories())
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
title: 액션바 (ActionBar)
3+
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionbar
4+
contributors: [rigor789, eddyverbruggen]
5+
---
6+
7+
액션바 컴포넌트는 안드로이드 액션바와 iOS NavigationBar의 네이티브-스크립트 추상화 입니다.
8+
9+
---
10+
11+
#### 제목 사용
12+
13+
```html
14+
<ActionBar title="MyApp" />
15+
```
16+
17+
#### 커스텀 제목 view
18+
19+
```html
20+
<ActionBar>
21+
<StackLayout orientation="horizontal">
22+
<Image src="res://icon" width="40" height="40" verticalAlignment="center" />
23+
<Label text="ativeScript" fontSize="24" verticalAlignment="center" />
24+
</StackLayout>
25+
</ActionBar>
26+
```
27+
28+
#### 안드로이드에서 앱 아이콘 설정
29+
30+
```html
31+
<ActionBar title="My App" android.icon="res://icon" android.iconVisibility="always" />
32+
```
33+
34+
#### 가장자리 경계(border) 없애기
35+
iOS와 안드로이드에서 작은 보더가 액션바 바닥에 그려집니다.
36+
추가로 iOS에서 액션바의 배경색은 iOS가 적용하는 필터때문에 지정한 값과 약간 달라집니다.
37+
이 필터와 보더를 제거하려면 `flat``true` 로 설정하세요
38+
39+
```html
40+
<ActionBar title="My App" flat="true" />
41+
```
42+
43+
## Props
44+
45+
| 이름 | 타입 | 설명 |
46+
|------|------|-------------|
47+
| `title` | `String` | 액션바에 나타나는 제목.
48+
| `android.icon` | `String` | 안드로이드에서 보여지는 아이콘.
49+
| `android.iconVisibility` | `String` | 아이콘이 보여질지 지정.
50+
| `flat` | `boolean` | 보더와 iOS 컬러 필터를 제거. 기본값은 `false`.
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
---
2+
title: 액션아이템 (ActionItem)
3+
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.actionitem
4+
contributors: [rigor789]
5+
---
6+
7+
ActionItem 컴포넌트는 액션바에 추가적인 액션 버턴을 추가하는데 쓰임
8+
9+
---
10+
11+
```html
12+
<ActionBar title="My App">
13+
<ActionItem @tap="onTapShare"
14+
ios.systemIcon="9" ios.position="left"
15+
android.systemIcon="ic_menu_share" android.position="actionBar" />
16+
<ActionItem @tap="onTapDelete"
17+
ios.systemIcon="16" ios.position="right"
18+
text="delete" android.position="popup" />
19+
</ActionBar>
20+
```
21+
22+
#### 액션 아이템의 조건부 표시
23+
24+
ActionItems 은 `v-show` 디렉티브를 이용하여 조건부로 표시할 수 있습니다.
25+
26+
```html
27+
<ActionBar title="My App">
28+
<ActionItem @tap="onTapEdit"
29+
v-show="!isEditing"
30+
ios.systemIcon="2" ios.position="right"
31+
android.systemIcon="ic_menu_edit" />
32+
<ActionItem @tap="onTapSave"
33+
v-show="isEditing"
34+
ios.systemIcon="3" ios.position="right"
35+
android.systemIcon="ic_menu_save" />
36+
<ActionItem @tap="onTapCancel"
37+
v-show="isEditing"
38+
ios.systemIcon="1"
39+
android.systemIcon="ic_menu_close_clear_cancel" />
40+
</ActionBar>
41+
```
42+
43+
## Props
44+
45+
| 이름 | 타입 | 설명 |
46+
|------|------|------------|
47+
| `ios.systemIcon` | `String` | iOS용 아이콘.
48+
| `android.systemIcon` | `String` | 안드로이드용 아이콘.
49+
| `ios.position` | `String` | iOS용 위치 설정.<br>가능한 값:<br>- `left` (기본값): 아이템을 액션바의 왼쪽에 위치.<br>- `right`: 아이템을 액션바의 오른쪽에 위치.
50+
| `android.position` | `String` | 안드로이드용 위치설정.<br>가능한 값:<br>- `actionBar` (기본값): 아이템을 액션바 내에 위치.<br>- `popup`: 아이템을 옵션 메뉴에 위치. 아이템은 텍스트로 렌더링됨. .<br>- `actionBarIfRoom`: 공간이 있을 경우 아이템을 액션바 내에 위치. 아니면 옵션 메뉴에 둠.
51+
52+
## 이벤트
53+
54+
| 이름 | 설명 |
55+
|------|-------------|
56+
| `tap`| 액션 아이템이 탭(tap)되었을때 호출(Emit)
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
title: 네비게이션 버튼 (NavigationButton)
3+
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_action_bar_.navigationbutton
4+
contributors: [rigor789]
5+
---
6+
7+
NavigationButton 컴포넌트는 안드로이드 네비게이션 버튼과 iOS 백버튼(back button)의 네이티브-스크립트 추상화입니다.
8+
9+
---
10+
11+
```html
12+
<ActionBar title="My App">
13+
<NavigationButton text="Go back" android.systemIcon="ic_menu_back" @tap="goBack" />
14+
</ActionBar>
15+
```
16+
17+
## Props
18+
19+
| 이름 | 타입 | 설명 |
20+
|------|------|-------------|
21+
| `text` | `String` | 텍스트를 iOS 에서 보여주도록 설정.
22+
| `android.systemIcon` | `String` | 해당 아이콘이 안드로이드에서 보입니다.
23+
24+
*안드로이드의 아이콘 리스트는 다음 페이지에서 찾을 수 있습니다. <https://developer.android.com/reference/android/R.drawable.html>. 아이콘은 `ic_` 접두어와 함께 시작하는 것들입니다.*
25+
26+
## Events
27+
28+
| 이름 | 설명 |
29+
|------|-------------|
30+
| `tap`| 네비게이션 버튼을 탭(tab) 했을때 발생(Emit).
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
title: ActivityIndicator
3+
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_activity_indicator_.activityindicator
4+
contributors: [qgp9]
5+
---
6+
7+
ActivityIndicator 컴포넌트는 백그라운드에서 동작하는 것을 표시하는 프로그레스 인디케이터를 추가하고 사용자가 일시중지(pause) 할수 있게 도와줍니다.
8+
9+
---
10+
11+
```html
12+
<ActivityIndicator busy="true" @busyChange="onBusyChanged" />
13+
```
14+
15+
[> screenshots for=ActivityIndicator <]
16+
17+
## Props
18+
19+
| 이름 | 타입 | 설명 |
20+
|------|------|-------------|
21+
| `busy` | `Boolean` | `true` 일때 인디케이터가 활성화됨.
22+
23+
## 이벤트
24+
25+
| 이름 | 설명 |
26+
|------|-------------|
27+
| `busyChange`| `busy` 프로퍼티가 바뀔때 발생(Emit)
28+
29+
## 네이티브 컴포넌트
30+
31+
| Android | iOS |
32+
|---------|-----|
33+
| android.widget.ProgressBar (indeterminate = true) | UIActivityIndicatorView
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: 버튼 (Button)
3+
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_button_.button
4+
contributors: [qgp9]
5+
---
6+
7+
버튼(Button) 컴포넌트는 탭(tab) 이벤트에 반응하는 버튼을 표시하는데 사용됩니다.
8+
9+
상호작용이 탭(tab) 이벤트로만 제한되는 것은 아닙니다.
10+
[네이티브-스크립트에서 사용가능한 모든 제스쳐에대하여 공식 문서를 읽어보세요](https://docs.nativescript.org/ui/gestures).
11+
12+
---
13+
14+
```html
15+
<Button text="Button" />
16+
```
17+
18+
[> screenshots for=Button <]
19+
20+
## Props
21+
22+
| 이름 | 타입 | 설명 |
23+
|------|------|-------------|
24+
| `text` | `String` | 버튼에 보이는 텍스트.
25+
| `textWrap` | `boolean` | 버튼의 텍스트가 래핑될지 결정. 기본값은 `false`.
26+
27+
## 이벤트
28+
29+
| 이름 | 설명 |
30+
|------|-------------|
31+
| `tap` | 버튼이 눌릴때 발생(Emit)
32+
33+
## 네이티브 컴포넌트
34+
| Android | iOS |
35+
|---------|-----|
36+
| android.widget.Button | UIButton
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
title: 날짜선택 (DatePicker)
3+
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_date_picker_.datepicker
4+
contributors: [qgp9]
5+
---
6+
7+
DatePicker 컴포넌트는 사용자가 날짜를 선택할 수 있도록 합니다.
8+
9+
---
10+
11+
```html
12+
<DatePicker @loaded="onDatePickerLoaded" @dateChanged="onDateChanged" />
13+
```
14+
15+
**노트**: 이 컴포넌트는 `v-model` 을 이용한 양방향(two-way) 바인딩을 지원합니다:
16+
17+
```html
18+
<DatePicker v-model="selectedDate" />
19+
```
20+
21+
[> screenshots for=DatePicker <]
22+
23+
## Props
24+
25+
| 이름 | 타입 | 설명 |
26+
|------|------|-------------|
27+
| `date` | `Date` | 현재 표시되는 날짜.
28+
| `minDate` | `Date` | 최소 선택 가능 날짜.
29+
| `maxDate` | `Date` | 최대 선택 가능 날짜.
30+
| `day` | `Number` | 현재 선택된 날.
31+
| `month` | `Number` | 현재 선택된 달.
32+
| `year` | `Number` | 현재 선택된 년.
33+
34+
## 이벤트
35+
36+
| 이름 | 설명 |
37+
|------|-------------|
38+
| `dateChanged` | 선택된 날짜가 바뀔때 발생(Emit)
39+
40+
## 네이티브 컴포넌트
41+
42+
| Android | iOS |
43+
|---------|-----|
44+
| android.widget.DatePicker | UIDatePicker
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
title: HTML뷰 (HtmlView)
3+
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_html_view_.htmlview
4+
contributors: [qgp9]
5+
---
6+
7+
HtmlView 컴포넌트는 정적인 html 컨텐츠를 웹뷰(WebView) 없이 보여줄 수 있도록 해줍니다.
8+
9+
---
10+
11+
```html
12+
<HtmlView html="<div><h1>HtmlView</h1></div>" />
13+
```
14+
15+
[> screenshots for=HtmlView <]
16+
17+
## Props
18+
19+
| 이름 | 타입 | 설명 |
20+
|------|------|-------------|
21+
| `html` | `String` | 보여줄 html 컨텐츠.
22+
23+
## 네이티브 컴포넌트
24+
25+
| Android | iOS |
26+
|---------|-----|
27+
| android.widget.TextView | UILabel
Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
title: 이미지 (Image)
3+
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_image_.image
4+
contributors: [qgp9]
5+
---
6+
7+
이미지(Image) 컴포넌트는 [ImageSource](https://docs.nativescript.org/api-reference/modules/_image_source_) 나 URL 로부터 이미지를 표시합니다.
8+
9+
---
10+
11+
#### `app` 디렉토리로부터 상대경로로 이미지 표시
12+
13+
```html
14+
<Image src="~/logo.png" stretch="none" />
15+
```
16+
17+
#### URL 로 부터 이미지 표시
18+
19+
```html
20+
<Image src="https://art.nativescript-vue.org/NativeScript-Vue-White-Green.png" stretch="none" />
21+
```
22+
23+
#### `App_Resources` 로 부터 이미지 표시
24+
25+
```html
26+
<Image src="res://icon" stretch="none" />
27+
```
28+
29+
#### `base64` 인코딩 이미지
30+
31+
```html
32+
<Image src="data:Image/png;base64,iVBORw..." stretch="none" />
33+
```
34+
35+
[> screenshots for=Image <]
36+
37+
## Props
38+
39+
| 이름 | 타입 | 설명 |
40+
|------|------|-------------|
41+
| `src` | `String`, [`ImageSource`](https://docs.nativescript.org/api-reference/modules/_image_source_) | 이미지 소스.
42+
43+
## 네이티브 컴포넌트
44+
45+
| Android | iOS |
46+
|---------|-----|
47+
| android.widget.ImageView | UIImageView
Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
title: 레이블 (Label)
3+
apiRef: https://docs.nativescript.org/api-reference/classes/_ui_label_.label
4+
contributors: [qgp9]
5+
---
6+
7+
레이블(Label) 컴포넌트는 읽기전용 텍스트를 표시하는데 사용됩니다.
8+
9+
**노트**: `<Label>` HTML의 `<Label>`**다릅니다**.
10+
11+
---
12+
13+
```html
14+
<Label text="Label" />
15+
```
16+
17+
[> screenshots for=Label <]
18+
19+
### FormattedString
20+
21+
특정 부분의 텍스트를 다르게 스타일링해야 한다면 `FormattedString` `Span` 요소를 결합하여 사용할 수 있습니다.
22+
23+
예:
24+
```html
25+
<Label textWrap="true">
26+
<FormattedString>
27+
<Span text="This text has a " />
28+
<Span text="red " style="color: red" />
29+
<Span text="piece of text. " />
30+
<Span text="Also, this bit is italic, " fontStyle="italic" />
31+
<Span text="and this bit is bold." fontWeight="bold" />
32+
</FormattedString>
33+
</Label>
34+
```
35+
36+
## Props
37+
38+
| 이름 | 타입 | 설명 |
39+
|------|------|-------------|
40+
| `text` | `String` | 레이블의 텍트스.
41+
| `textWrap` | `boolean` | 레이블의 텍스트가 래핑될것 인지 지정. 기본값은 `false`.
42+
43+
## 네이티브 컴포넌트
44+
45+
| Android | iOS |
46+
|---------|-----|
47+
| android.widget.TextView | UILabel

0 commit comments

Comments
 (0)