Skip to content

Commit 4fd48bc

Browse files
mandaputtramandaputtra
authored
Merge pull request #158 from jefrydco/docs/id-8
docs(id): fix various translation in class and style
2 parents 67ee37d + 60b2495 commit 4fd48bc

File tree

1 file changed

+73
-69
lines changed

1 file changed

+73
-69
lines changed

‎src/guide/class-and-style.md

+73-69
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
# Class dan Style Binding
1+
# _Binding_ Class dan Style
22

3-
Kebutuhan umum untuk _data binding_ adalah memanipulasi daftar kelas elemen dan gaya sebarisnya (_inline styles_). Karena keduanya adalah atribut, kita dapat menggunakan `v-bind` untuk menanganinya: kita hanya perlu menghitung string terakhir dengan _expression_ kita. Namun, mencampuri dengan penggabungan string mengganggu dan rawan kesalahan. Karena alasan ini, Vue menyediakan penyempurnaan khusus ketika `v-bind` digunakan dengan `class` dan `style`. Selain string, _expression_ juga dapat dievaluasi menjadi objek atau array.
3+
Kebutuhan umum untuk _binding_ data adalah memanipulasi daftar elemen _class_ dan _style_ sebarisnya (_inline styles_). Karena keduanya adalah atribut, kita dapat menggunakan `v-bind` untuk menanganinya: kita hanya perlu menghitung string terakhir dengan ekspresi kita. Namun, berurusan dengan penggabungan string mengjengkelkan dan rawan kesalahan. Karena alasan ini, Vue menyediakan penyempurnaan khusus ketika `v-bind` digunakan dengan `class` dan `style`. Selain string, ekspresi juga dapat dievaluasi menjadi objek atau array.
44

5-
## Binding Kelas HTML
5+
## _Binding_ Kelas HTML
66

7-
### Sintaks Objek
7+
### Sintaksis Objek
88

9-
Kita bisa _pass_ objek ke `:class` (kependekan dari `v-bind:class`) untuk _toggle_ kelas secara dinamis:
9+
Kita bisa melewatkan objek ke `:class` (kependekan dari `v-bind:class`) untuk mengubah _class_ secara dinamis:
1010

1111
```html
12-
<div :class="{ aktif: sedangAktif }"></div>
12+
<div :class="{ active: isActive }"></div>
1313
```
1414

15-
Sintaks di atas berarti keberadaan kelas `aktif` akan ditentukan oleh [kebenaran](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) properti data `sedangAktif`.
15+
Sintaksis di atas berarti keberadaan _class_ `active` akan ditentukan oleh nalai [_truthy_](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) properti data `isActive`.
1616

17-
Kamu dapat memiliki beberapa kelas _toggle_ dengan memiliki lebih banyak bidang di objek. Selain itu, perintah `:class` juga bisa ada berdampingan dengan atribut `class` biasa. Jadi misalkan diberikan template berikut:
17+
Anda dapat memiliki beberapa _class_ di-_toggle_ dengan memiliki lebih banyak properti di objek. Selain itu, direktif `:class` juga bisa berdampingan dengan atribut `class` biasa. Misalnya templat berikut:
1818

1919
```html
2020
<div
21-
class="statis"
22-
:class="{ aktif: sedangAktif, 'teks-peringatan': terdapatError }"
21+
class="static"
22+
:class="{ active: isActive, 'text-danger': hasError }"
2323
></div>
2424
```
2525

@@ -28,104 +28,104 @@ Dan data berikut:
2828
```js
2929
data() {
3030
return {
31-
sedangAktif: true,
32-
terdapatError: false
31+
isActive: true,
32+
hasError: false
3333
}
3434
}
3535
```
3636

37-
Ini akan membuat:
37+
Kode tersebut akan me-_render_:
3838

3939
```html
40-
<div class="statis aktif"></div>
40+
<div class="static active"></div>
4141
```
4242

43-
Ketika `sedangAktif` atau `terdapatError` berubah, daftar kelas akan diperbarui sesuai dengan itu. Misalnya, jika `terdapatError` menjadi`true`, daftar kelas akan menjadi `"statis aktif teks-peringatan"`.
43+
Ketika `isActive` atau `hasError` berubah, daftar _class_ akan diperbarui juga. Misalnya, jika `hasError` menjadi`true`, daftar _class_ akan menjadi `"static active text-danger"`.
4444

45-
Objek terikat tidak harus sejajar:
45+
Objek yang di-_bind_ tidak harus diletakkan secara sebaris (_inline_):
4646

4747
```html
48-
<div :class="objekKelas"></div>
48+
<div :class="classObject"></div>
4949
```
5050

5151
```js
5252
data() {
5353
return {
54-
objekKelas: {
55-
aktif: true,
56-
'teks-peringatan': false
54+
classObject: {
55+
active: true,
56+
'text-danger': false
5757
}
5858
}
5959
}
6060
```
6161

62-
Ini akan memberikan hasil yang sama. Kita juga bisa melakukan _bind_ ke [properti komputasi](computed.md) yang mengembalikan objek. Ini adalah pola yang umum dan manjur:
62+
Kode tersebut akan memberikan hasil yang sama. Kita juga bisa melakukan _binding_ ke [properti terkomputasi](computed.md) yang mengembalikan objek. Cara tersebut adalah pola yang umum dan manjur:
6363

6464
```html
65-
<div :class="objekKelas"></div>
65+
<div :class="classObject"></div>
6666
```
6767

6868
```js
6969
data() {
7070
return {
71-
sedangAktif: true,
71+
isActive: true,
7272
error: null
7373
}
7474
},
7575
computed: {
76-
objekKelas() {
76+
classObject() {
7777
return {
78-
aktif: this.sedangAktif && !this.error,
79-
'teks-peringatan': this.error && this.error.type === 'fatal'
78+
aktif: this.isActive && !this.error,
79+
'text-danger': this.error && this.error.type === 'fatal'
8080
}
8181
}
8282
}
8383
```
8484

85-
### Sintaks Array
85+
### Sintaksis Array
8686

87-
Kita bisa _pass_ array ke `:class` untuk menerapkan daftar kelas:
87+
Kita bisa memasukkan array ke dalam `:class` untuk menerapkan daftar _class_:
8888

8989
```html
90-
<div :class="[kelasAktif, kelasError]"></div>
90+
<div :class="[isActive, errorClass]"></div>
9191
```
9292

9393
```js
9494
data() {
9595
return {
96-
kelasAktif: 'aktif',
97-
kelasError: 'teks-peringatan'
96+
isActive: 'active',
97+
errorClass: 'text-danger'
9898
}
9999
}
100100
```
101101

102-
Yang akan membuat:
102+
Yang akan me-_render_:
103103

104104
```html
105-
<div class="aktif teks-peringatan"></div>
105+
<div class="active text-danger"></div>
106106
```
107107

108-
Jika kamu juga ingin mengubah kelas dalam daftar secara bersyarat, kamu dapat melakukannya dengan ekspresi _ternary_:
108+
Jika Anda juga ingin mengubah _class_ dalam daftar dengan kondisi tertentu, Anda dapat melakukannya dengan ekspresi _ternary_:
109109

110110
```html
111-
<div :class="[sedangAktif ? kelasAktif : '', kelasError]"></div>
111+
<div :class="[isActive ? isActive : '', errorClass]"></div>
112112
```
113113

114-
Ini akan selalu menerapkan `kelasError`, tetapi hanya akan menerapkan`kelasAktif` jika `sedangAktif` benar (_truthy_).
114+
Kode tersebut akan selalu menerapkan `errorClass`, dan hanya akan menerapkan `isActive` jika `isActive` bernilai _truthy_[[1]](#footnote-1).
115115

116-
Namun, ini bisa sedikit bertele-tele jika kamu memiliki beberapa kelas bersyarat. Itu sebabnya juga dimungkinkan untuk menggunakan sintaks objek di dalam sintaks array:
116+
Namun, cara tersebut bisa cukup bertele-tele jika Anda memiliki beberapa _class_ dengan kondisinya masing-masing. Oleh karena itu, memungkinkan juga untuk menggunakan sintaksis objek di dalam sintaksis array:
117117

118118
```html
119-
<div :class="[{ aktif: sedangAktif }, kelasError]"></div>
119+
<div :class="[{ active: isActive }, errorClass]"></div>
120120
```
121121

122122
### Dengan Komponen
123123

124-
> Bagian ini mengasumsikan pengetahuan tentang [Vue Components](component-basics.md). Jangan ragu untuk melewatkannya dan kembali lagi nanti.
124+
> Bagian ini mengasumsikan pengetahuan tentang [Vue Components](component-basics.md). Jangan ragu untuk melewatinya dan kembali lagi nanti.
125125
126-
Saat kamu menggunakan atribut `class` pada komponen khusus dengan satu elemen root, kelas tersebut akan ditambahkan ke elemen ini. Kelas yang ada pada elemen ini tidak akan ditimpa.
126+
Saat Anda menggunakan atribut `class` pada komponen buatan sendiri (_custom component_) dengan satu elemen _root_, _class_ tersebut akan ditambahkan ke elemen tersebut. Kelas yang ada pada elemen tersebut tidak akan ditimpa.
127127

128-
Misalnya, jika kamu mendeklarasikan komponen berikut:
128+
Misalnya, jika Anda mendeklarasikan komponen berikut:
129129

130130
```js
131131
const app = Vue.createApp({})
@@ -135,33 +135,33 @@ app.component('my-component', {
135135
})
136136
```
137137

138-
Kemudian tambahkan beberapa kelas saat menggunakannya:
138+
Kemudian tambahkan beberapa _class_ saat menggunakannya:
139139

140140
```html
141141
<div id="app">
142142
<my-component class="baz boo"></my-component>
143143
</div>
144144
```
145145

146-
HTML yang dirender akan menjadi:
146+
HTML yang di-_render_ akan menjadi:
147147

148148
```html
149149
<p class="foo bar baz boo">Hi</p>
150150
```
151151

152-
Hal yang sama berlaku untuk _class binding_:
152+
Hal yang sama berlaku untuk _binding_ _class_:
153153

154154
```html
155-
<my-component :class="{ aktif: sedangAktif }"></my-component>
155+
<my-component :class="{ active: isActive }"></my-component>
156156
```
157157

158-
Jika `sedangAktif` benar, HTML yang dirender akan menjadi:
158+
Jika `isActive` bernilai _truthy_, HTML yang di-_render_ akan menjadi:
159159

160160
```html
161-
<p class="foo bar aktif">Hi</p>
161+
<p class="foo bar active">Hi</p>
162162
```
163163

164-
Jika komponenmu memiliki beberapa elemen root, kamu perlu menentukan komponen mana yang akan menerima kelas ini. Kamu dapat melakukan ini menggunakan properti komponen `$attrs`:
164+
Jika komponen Anda memiliki beberapa elemen _root_, Anda perlu menentukan komponen mana yang akan menerima _class_ ini. Anda juga dapat melakukannya dengan menggunakan properti `$attrs` pada komponen:
165165

166166
```html
167167
<div id="app">
@@ -175,69 +175,73 @@ const app = Vue.createApp({})
175175
app.component('my-component', {
176176
template: `
177177
<p :class="$attrs.class">Hi!</p>
178-
<span>Ini merupakan komponen anak</span>
178+
<span>This is a child component</span>
179179
`
180180
})
181181
```
182182

183-
Kamu dapat mempelajari lebih lanjut tentang pewarisan atribut komponen di bagian [Atribut Non-Properti](komponen-attrs.html).
183+
Anda dapat mempelajari lebih lanjut tentang pewarisan atribut komponen pada bagian [Atribut Non-Properti](komponen-attrs.html).
184184

185-
## Binding Inline Style
185+
## _Binding_ _Style_ Sebaris (_Inline_)
186186

187-
### Sintaks Objek
187+
### Sintaksos Objek
188188

189-
Sintaks objek untuk `:style` cukup mudah - terlihat hampir seperti CSS, kecuali itu adalah objek JavaScript. Kamu dapat menggunakan camelCase atau kebab-case (gunakan tanda kutip dengan kebab-case) untuk nama properti CSS:
189+
Sintaksis objek untuk `:style` cukup mudah - terlihat hampir seperti CSS, kecuali itu adalah objek JavaScript. Anda dapat menggunakan camelCase atau kebab-case (gunakan tanda kutip dengan kebab-case) untuk nama properti CSS:
190190

191191
```html
192-
<div :style="{ color: warnaAktif, fontSize: ukuranTeks + 'px' }"></div>
192+
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
193193
```
194194

195195
```js
196196
data() {
197197
return {
198-
warnaAktif: 'red',
199-
ukuranTeks: 30
198+
activeColor: 'red',
199+
fontSize: 30
200200
}
201201
}
202202
```
203203

204-
Seringkali merupakan ide yang bagus untuk _bind_ objek gaya secara langsung agar templatenya lebih bersih:
204+
Seringkali cara tersebut adalah cara yang baik untuk me-_bind_ objek _style_ secara langsung agar templatnya lebih bersih:
205205

206206
```html
207-
<div :style="objekGaya"></div>
207+
<div :style="styleObject"></div>
208208
```
209209

210210
```js
211211
data() {
212212
return {
213-
objekGaya: {
214-
warnaAktif: 'red',
215-
ukuranTeks: '13px'
213+
styleObject: {
214+
activeColor: 'red',
215+
fontSize: '13px'
216216
}
217217
}
218218
}
219219
```
220220

221-
Sekali lagi, sintaks objek sering digunakan bersama dengan properti komputasi yang mengembalikan objek.
221+
Sekali lagi, sintaksis objek sering digunakan bersama dengan properti komputasi yang mengembalikan objek.
222222

223-
### Sintaks Array
223+
### Sintaksis Array
224224

225-
Sintaks array untuk `:style` memungkinkan kamu menerapkan beberapa objek gaya ke elemen yang sama:
225+
Sintaksis array untuk `:style` memungkinkan Anda menerapkan beberapa objek _style_ ke elemen yang sama:
226226

227227
```html
228-
<div :style="[gayaDasar, gayaOverride]"></div>
228+
<div :style="[baseStyles, overridingStyles]"></div>
229229
```
230230

231-
### Auto-prefixing
231+
### Memberi Awalan Secara Otomatis
232232

233-
Saat kamu menggunakan properti CSS yang membutuhkan [vendor prefixes](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) pada `:style`, misalnya `transform`, Vue akan secara otomatis mendeteksi dan tambahkan prefiks yang sesuai ke gaya yang diterapkan.
233+
Saat Anda menggunakan properti CSS yang membutuhkan [awalan vendor](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) pada `:style`, misalnya `transform`, Vue akan secara otomatis mendeteksi dan tambahkan prefiks yang sesuai ke _style_ yang diterapkan.
234234

235235
### Beberapa Nilai
236236

237-
Kamu dapat memberikan sebuah array dengan beberapa nilai (awalan) ke properti gaya, misalnya:
237+
Anda dapat memberikan sebuah array dengan beberapa nilai (awalan) ke properti _style_, misalnya:
238238

239239
```html
240240
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
241241
```
242242

243-
Ini hanya akan me-_render_ nilai terakhir dalam array yang didukung peramban. Dalam contoh ini, ini akan merender `display: flex` untuk peramban yang mendukung versi flexbox yang tidak diperbaiki.
243+
Kode tersebut hanya akan me-_render_ nilai terakhir dalam array yang didukung peramban. Dalam kasus ini, contoh tersebut akan me-_render_ `display: flex` untuk peramban yang mendukung versi flexbox yang tidak memiliki awalan.
244+
245+
<small>**Catatan penerjemah**:</small>
246+
247+
<small><a id="footnote-1"></a>[1] _Truthy_ bukanlah bernilai `true`, silahkan memembaca [Mozilla Developer Network - Truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) untuk penjelasan lebih lanjut.</small>

0 commit comments

Comments
 (0)