You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/essentials/application.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -12,7 +12,7 @@ const app = createApp({
12
12
})
13
13
```
14
14
15
-
## The Root Component {#the-root-component}
15
+
## المكون الجذر {#the-root-component}
16
16
17
17
الكائن الذي نمرره إلى دالة `createApp` هو في الأصل مكون. يتطلب كل تطبيق "مكوِّنًا جذريًا" الذي بدوره يمكن أن يحتوي على مكونات أخرى مثل مكوناته الفرعية.
Copy file name to clipboardExpand all lines: src/guide/essentials/class-and-style.md
+56-52
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,7 @@
1
-
# Class and Style Bindings {#class-and-style-bindings}
1
+
# ربط التنسيقات و الأصناف {#class-and-style-bindings}
2
2
3
-
A common need for data binding is manipulating an element's class list and inline styles. Since `class` and `style` are both attributes, we can use `v-bind` to assign them a string value dynamically, much like with other attributes. However, trying to generate those values using string concatenation can be annoying and error-prone. For this reason, Vue provides special enhancements when `v-bind` is used with `class` and `style`. In addition to strings, the expressions can also evaluate to objects or arrays.
4
-
5
-
## Binding HTML Classes {#binding-html-classes}
3
+
احتياج شائع لربط البيانات هو التحكم في قائمة الأصناف وتنسيقات العنصر. بما أن `class` و `style` عبارة عن سمتين، يمكننا استخدام `v-bind` لاعطائهما سلسلة نصية كقيمة بشكل ديناميكي، على غرار السمات الأخرى. ومع ذلك، يمكن أن يكون توليد هذه القيم عن طريق ربط سلاسل مزعجًا ومُحتملًا للأخطاء. لهذا السبب، توفر Vue تحسينات خاصة عند استخدام `v-bind` مع `class` و `style`. بالإضافة إلى السلاسل النصية، يمكن أن تُقيّم العبارات أيضًا إلى كائنات أو مصفوفات.
We can pass an object to `:class` (short for`v-bind:class`) to dynamically toggle classes:
16
+
يمكننا تمرير كائن إلى `:class` (الإختصار لـ`v-bind:class`) لتبديل الأصناف بشكل ديناميكي:
18
17
19
18
```vue-html
20
19
<div :class="{ active: isActive }"></div>
21
20
```
22
21
23
-
The above syntax means the presence of the `active` class will be determined by the [truthiness](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) of the data property `isActive`.
24
22
25
-
You can have multiple classes toggled by having more fields in the object. In addition, the `:class` directive can also co-exist with the plain `class` attribute. So given the following state:
23
+
الصيغة أعلاه تعني أن وجود الصنف `active` سيتم تحديده بواسطة [صحة](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) الخاصية `isActive` من البيانات.
24
+
25
+
يمكن أن يكون لديك عدة أصناف تتبدل بواسطة وجود العديد من الخاصيات في الكائن. بالإضافة إلى ذلك، يمكن للسمة المربوطة `:class` أيضًا أن تكون موجودة بجانب السمة `class` العادية. لذا، بالنظر إلى الحالة التالية:
26
26
27
27
<divclass="composition-api">
28
28
@@ -46,7 +46,7 @@ data() {
46
46
47
47
</div>
48
48
49
-
And the following template:
49
+
و القالب الموالي:
50
50
51
51
```vue-html
52
52
<div
@@ -55,15 +55,15 @@ And the following template:
55
55
></div>
56
56
```
57
57
58
-
It will render:
58
+
سيتم تصيير العنصر التالي:
59
59
60
60
```vue-html
61
61
<div class="static active"></div>
62
62
```
63
63
64
-
When `isActive`or`hasError` changes, the class list will be updated accordingly. For example, if `hasError`becomes `true`, the class list will become`"static active text-danger"`.
64
+
عند تغيير `isActive`أو`hasError`، سيتم تحديث قائمة الصنف بناءً على ذلك. على سبيل المثال، إذا أصبح `hasError``true`، فسيصبح قائمة الصنف`"static active text-danger"`.
65
65
66
-
The bound object doesn't have to be inline:
66
+
الكائن المربوط لا يحتاج أن يكون مُضمَّنا:
67
67
68
68
<divclass="composition-api">
69
69
@@ -95,7 +95,7 @@ data() {
95
95
<div :class="classObject"></div>
96
96
```
97
97
98
-
This will render the same result. We can also bind to a [computed property](./computed)that returns an object. This is a common and powerful pattern:
98
+
سيقوم هذا الربط بتصيير نفس النتيجة. يمكننا أيضًا الربط بخاصية [محسوبة](./computed)تعيد كائنًا. و هو نمط شائع وقوي:
99
99
100
100
<divclass="composition-api">
101
101
@@ -136,9 +136,9 @@ computed: {
136
136
<div :class="classObject"></div>
137
137
```
138
138
139
-
### Binding to Arrays {#binding-to-arrays}
139
+
### الربط بالمصفوفات {#binding-to-arrays}
140
140
141
-
We can bind `:class`to an array to apply a list of classes:
141
+
يمكننا ربط `:class`بمصفوفة لتطبيق قائمة من الأصناف:
142
142
143
143
<divclass="composition-api">
144
144
@@ -166,90 +166,91 @@ data() {
166
166
<div :class="[activeClass, errorClass]"></div>
167
167
```
168
168
169
-
Which will render:
169
+
نتيجة التصيير :
170
170
171
171
```vue-html
172
172
<div class="active text-danger"></div>
173
173
```
174
174
175
-
If you would like to also toggle a class in the list conditionally, you can do it with a ternary expression:
175
+
إذا كنت ترغب أيضًا في تبديل صنف في القائمة بشكل شرطي، يمكنك القيام بذلك باستخدام تعبير ثلاثي:
This will always apply`errorClass`, but`activeClass`will only be applied when`isActive`is truthy.
181
+
هذا الربط سيطبق دائمًا`errorClass`، ولكن`activeClass`سيتم تطبيقه فقط عندما يكون`isActive`صحيحًا.
182
182
183
-
However, this can be a bit verbose if you have multiple conditional classes. That's why it's also possible to use the object syntax inside array syntax:
183
+
لكن قد يكون هذا طويلا نوعا ما إذا كان لديك أصناف شرطية متعددة. لهذا السبب، يمكنك أيضًا استخدام صيغة الكائن داخل صيغة المصفوفة :
> This section assumes knowledge of [Components](/guide/essentials/component-basics). Feel free to skip it and come back later.
191
+
> هذا القسم يفترض أن لديك معرفة [بالمكونات](/guide/essentials/component-basics). لا تتردد في تخطيه والعودة إليه لاحقًا.
192
192
193
-
When you use the `class`attribute on a component with a single root element, those classes will be added to the component's root element, and merged with any existing class already on it.
193
+
لما تستخدم السمة `class`على مكون يحتوي على عنصر واحد فقط، سيتم إضافة هذه الصنف إلى العنصر الجذري للمكون، وسيتم دمجها مع أي صنف موجود عليه من قبل.
194
194
195
-
For example, if we have a component named`MyComponent`with the following template:
195
+
على سبيل المثال، إذا كان لدينا مكون يسمى`MyComponent`مع القالب التالي:
196
196
197
197
```vue-html
198
-
<!-- child component template -->
199
-
<p class="foo bar">Hi!</p>
198
+
<!-- قالب المكون الابن -->
199
+
<p class="foo bar">مرحبا!</p>
200
200
```
201
201
202
-
Then add some classes when using it:
202
+
ثم اضف بعض الأصناف عند استخدامه:
203
203
204
204
```vue-html
205
-
<!-- when using the component -->
205
+
<!-- عند استخدام المكون -->
206
206
<MyComponent class="baz boo" />
207
207
```
208
208
209
-
The rendered HTML will be:
209
+
الـHTML المصيّر سيكون بالشكل الموالي :
210
210
211
211
```vue-html
212
-
<p class="foo bar baz boo">Hi</p>
212
+
<p class="foo bar baz boo">مرحبا</p>
213
213
```
214
214
215
-
The same is true for class bindings:
215
+
نفس الشيء ينطبق على ربط الصنف:
216
216
217
217
```vue-html
218
218
<MyComponent :class="{ active: isActive }" />
219
219
```
220
220
221
-
When `isActive`is truthy, the rendered HTML will be:
221
+
لما يكون `isActive`صحيحًا، سيكون الـHTML المصيّر بالشكل الموالي :
222
222
223
223
```vue-html
224
-
<p class="foo bar active">Hi</p>
224
+
<p class="foo bar active">مرحبا</p>
225
225
```
226
226
227
-
If your component has multiple root elements, you would need to define which element will receive this class. You can do this using the `$attrs` component property:
227
+
إذا كان لديك مكون يحتوي على عناصر جذرية متعددة، ستحتاج إلى تحديد أي عنصر سيتلقى هذا الصنف. يمكنك القيام بذلك باستخدام خاصية المكون `attrs$`:
228
228
229
229
```vue-html
230
-
<!-- MyComponent template using $attrs -->
231
-
<p :class="$attrs.class">Hi!</p>
232
-
<span>This is a child component</span>
230
+
<!-- قالب MyComponent باستخدام $attrs -->
231
+
<p :class="$attrs.class">مرحبا!</p>
232
+
<span>هذا هو المكون الابن</span>
233
233
```
234
234
235
235
```vue-html
236
236
<MyComponent class="baz" />
237
237
```
238
238
239
-
Will render:
239
+
النتيجة المصيرة ستكون:
240
240
241
241
```html
242
-
<pclass="baz">Hi!</p>
243
-
<span>This is a child component</span>
242
+
<pclass="baz">مرحبا!</p>
243
+
<span>هذا هو المكون الابن</span>
244
244
```
245
245
246
246
You can learn more about component attribute inheritance in [Fallthrough Attributes](/guide/components/attrs.html) section.
247
247
248
-
## Binding Inline Styles {#binding-inline-styles}
248
+
يمكنك معرفة المزيد عن توريث سمات المكون في قسم [Fallthrough Attributes](/guide/components/attrs.html).
249
+
## ربط التنسيقات السطرية {#binding-inline-styles}
249
250
250
-
### Binding to Objects
251
+
### الربط بالكائنات
251
252
252
-
`:style`supports binding to JavaScript object values - it corresponds to an [HTML element's `style`property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style):
Although camelCase keys are recommended, `:style` also supports kebab-cased CSS property keys (corresponds to how they are used in actual CSS) - for example:
281
+
282
+
رغم أن الأسماء المكتوبة باستخدام نمط سنام الجمل camelCase موصى بها، إلا أن `style:` يدعم أيضًا أسماء الخاصيات CSS مكتوبة باستخدام نمط أسياخ الشواء kebab-case (وهي ما يتم استخدامه في CSS الفعلي) - على سبيل المثال:
When you use a CSS property that requires a [vendor prefix](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix)in`:style`, Vue will automatically add the appropriate prefix. Vue does this by checking at runtime to see which style properties are supported in the current browser. If the browser doesn't support a particular property then various prefixed variants will be tested to try to find one that is supported.
333
+
لما تستخدم خاصية CSS والتي تتطلب [بادئة](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix)في`:style`، ستُضِيف Vue البادئة المناسبة تلقائيًا. تقوم Vue بذلك من خلال التحقق في وقت التشغيل لمعرفة أي خاصيات النمط المدعومة في المتصفح الحالي. إذا لم يدعم المتصفح خاصية معينة سيختبر بعدها مختلف أنواع البادئات للحصول على أحد البادئات المدعومة.
331
334
332
-
### Multiple Values {#multiple-values}
335
+
### قيم متعددة {#multiple-values}
333
336
334
-
You can provide an array of multiple (prefixed) values to a style property, for example:
337
+
يمكنك امداد مصفوفة من القيم المتعددة (ذات بادئة) إلى خاصية التنسيق، على سبيل المثال:
هذه الشيفرة ستصير القيمة الأخيرة فقط في المصفوفة التي يدعمها المتصفح. في هذا المثال، ستقوم بتصيير `display: flex` للمتصفحات التي تدعم نسخة بدون بادئة من flexbox.
343
+
339
344
340
-
This will only render the last value in the array which the browser supports. In this example, it will render `display: flex` for browsers that support the unprefixed version of flexbox.
0 commit comments