Skip to content

Commit f2c9ceb

Browse files
Aissaoui-AhmedAissaoui-Ahmed
authored
Merge pull request vuejs#21 from Aissaoui-Ahmed/examples
[DONE] EXAMPLES
2 parents c1601f2 + 4119774 commit f2c9ceb

File tree

13 files changed

+40
-40
lines changed

13 files changed

+40
-40
lines changed

‎src/v2/examples/commits.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: GitHub Commits
2+
title: مساهمات GitHub
33
type: examples
44
order: 1
55
---
66

7-
> This example fetches latest Vue.js commits data from GitHub's API and displays them as a list. You can switch between the master and dev branches.
7+
> هذا المثال يقوم بجلب أحدث بيانات مساهمات Vue.js من GitHub [API](https://github.com/softvenue/i18n/blob/master/i18n.json#L53) وعرضهم في قائمة. يمكنك التنقل بين فروع master و dev.
88
99
<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/c5g8xnar/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

‎src/v2/examples/deepstream.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: Realtime with deepstreamHub
2+
title: الوقت الحقيقي بواسطة deepstreamHub
33
type: examples
44
order: 9
55
---
66

7-
> This example uses [deepstreamHub](https://deepstreamhub.com/) to synchronize realtime data, send events and make remote procedure calls between clients (you can try opening it in multiple browser windows).
7+
> في هذا المثال نستعمل [deepstreamHub](https://deepstreamhub.com/) لمزامنة البيانات في الوقت الحقيقي، إرسال الأحداث وعمل نداءات عن بعد بين العملاء (يمكنك محاولة فتحه في نوافذ متصفح متعددة).
88
99
<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/ff0sp9hw/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

‎src/v2/examples/elastic-header.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Elastic Header
2+
title: الترويس المرن
33
type: examples
44
order: 7
55
---

‎src/v2/examples/firebase.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: Firebase + Validation
2+
title: Firebase + التحقق
33
type: examples
44
order: 10
55
---
66

7-
> This example uses [Firebase](https://firebase.google.com/) as the data persistence backend and syncs between clients in real time (you can try opening it in multiple browser tabs). In addition, it performs instant validation using computed properties and triggers CSS transitions when adding/removing items.
7+
> في هذا المثال نستخدم [Firebase](https://firebase.google.com/) مداوم للبيانات في الخلفية ومزامنة بين العملاء في الوقت الحقيقي (يمكنك محاولة فتحه في علامات تبويب متصفح متعددة). بالإضافة إلى ذلك، فإنه يقوم بالتحقق من البيانات باستعمال الخاصيات المحسوبة وتشغيل إنتقالات CSS عند إضافة/حذف العناصر.
88
99
<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/pyLbpzzx/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

‎src/v2/examples/grid-component.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: Grid Component
2+
title: شبكة المكون
33
type: examples
44
order: 3
55
---
66

7-
> This is an example of creating a reusable grid component and using it with external data.
7+
> هذا مثال لإنشاء شبكة مكون قابلة لإعادة الإستخدام وإستخدامها مع البيانات الخارجية.
88
99
<iframe width="100%" height="500" src="https://jsfiddle.net/Tertia/vbyon64p/6/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

‎src/v2/examples/hackernews.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
2-
title: HackerNews Clone
2+
title: نسخة من HackerNews
33
type: examples
44
order: 12
55
---
66

7-
> This is a HackerNews clone built upon HN's official Firebase API, Vue 2.0 + Vue Router + Vuex, with server-side rendering.
7+
> هذا مثال على نسخة من HackerNews مبني على API الرسمي الخاص بـHackerNews مع Vue 2.0، Vue Router + Vuex، مع تصيير من جهة الخادم.
88
99
{% raw %}
1010
<div style="max-width: 600px;">
@@ -14,22 +14,22 @@ order: 12
1414
</div>
1515
{% endraw %}
1616

17-
> [Live Demo](https://vue-hn.herokuapp.com/)
18-
> Note: the demo may need some spin up time if nobody has accessed it for a certain period.
17+
> [عرض توضيحي حي](https://vue-hn.herokuapp.com/)
18+
> ملاحظة: قد يحتاج العرض التوضيحي لبعض الوقت في الدوران إذا لم يصل إليه أحد لفترة معينة.
1919
>
20-
> [[Source](https://github.com/vuejs/vue-hackernews-2.0)]
20+
> [[المصدر](https://github.com/vuejs/vue-hackernews-2.0)]
2121
22-
## Features
22+
## ميزات
2323

24-
- Server Side Rendering
25-
- Vue + Vue Router + Vuex working together
26-
- Server-side data pre-fetching
27-
- Client-side state & DOM hydration
28-
- Single-file Vue Components
29-
- Hot-reload in development
30-
- CSS extraction for production
31-
- Real-time List Updates with FLIP Animation
24+
- تصيير من جهة الخادم
25+
- Vue + Vue Router + Vuex للعمل معا
26+
- بيانات جهة الخادم قبل جلبها
27+
- حالة جهة المستخدم & إماهة DOM
28+
- مكون Vue للملف الوحيد
29+
- Hot-reload قيد التطوير
30+
- استخلاص CSS للانتاج
31+
- الوقت الحقيقي لتحديث قائمة مع تأثير القلب
3232

33-
## Architecture Overview
33+
## نظرة عامة عن هندسة
3434

3535
<img width="973" alt="Hackernew clone architecture overview" src="../../images/hn-architecture.png">

‎src/v2/examples/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: Markdown Editor
2+
title: محرر Markdown
33
type: examples
44
order: 0
55
---
66

7-
> Dead simple Markdown editor.
7+
> مثال بسيط عن محرر Markdown.
88
99
<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/0dzvcf4d/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

‎src/v2/examples/modal.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: Modal Component
2+
title: نموذج عن مكون
33
type: examples
44
order: 6
55
---
66

7-
> Features used: component, prop passing, content insertion, transitions.
7+
> الميزات المستخدمة: مكون، إرسال خصائص، إدراج محتوى، التحولات.
88
99
<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/mwLbw11k/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

‎src/v2/examples/select2.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: Wrapper Component
2+
title: المكون المغلف
33
type: examples
44
order: 8
55
---
66

7-
> In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component.
7+
> في هذا المثال سندرج إضافة خارجية jQuery (select2) عن طريق تغليفها داخل مكون مخصص.
88
99
<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/d131Lebj/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

‎src/v2/examples/svg.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: SVG Graph
2+
title: الرسم البياني باستخدام SVG
33
type: examples
44
order: 5
55
---
66

7-
> This example showcases a combination of custom component, computed property, two-way binding and SVG support.
7+
> هذا المثال يعرض حالات لمكون مخصص، خاصية المحسوبة، طريقتي الربط و ودعم SVG.
88
99
<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/mhrckqgq/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

‎src/v2/examples/themes.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
2-
title: Themes
2+
title: مظاهر
33
type: examples
44
is_new: true
55
order: 13
66
---
7-
> With the examples below built by our partners from [Creative Tim](https://creative-tim.com?affiliate_id=116187) you can see how a real world application is built, the technology stack behind it and how most of the concepts you've learned so far apply in a real world application.
7+
> من خلال الأمثلة التالية التي صممها شركاؤنا من [Creative Tim](https://creative-tim.com?affiliate_id=116187) يمكنك أن ترى كيف تم بناء تطبيق حقيقي، ومجموعة التكنولوجيا وراء ذلك وكيف أن معظم المفاهيم التي تعلمتها تنطبق حتى الآن في التطبيقات الحقيقية.
88
99
{% raw %}
1010
<div id="themes-example" class="themes-grid">
@@ -20,7 +20,7 @@ order: 13
2020
<div class="see-more-container">
2121
<a :href="`https://www.creative-tim.com/bootstrap-themes/vuejs-themes?affiliate_id=${affiliateId}`"
2222
class="button white see-more-link">
23-
See More Themes
23+
رؤية المزيد من المظاهر
2424
</a>
2525
</div>
2626
</div>

‎src/v2/examples/todomvc.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
---
2-
title: TodoMVC
2+
title: TodoMVC (عمل:نموذج-عرض-مراقب)
33
type: examples
44
order: 11
55
---
66

7-
> This is a fully spec-compliant TodoMVC implementation in under 120 effective lines of JavaScript (excluding comments and blank lines).
7+
> هذا شامل لتوافقية مخصصة لعمل (نموذج-عرض-مراقب) تحت 120 سطر فعال من JavaScript (باستثناء التعليقات وخطوط فارغة).
88
9-
<p class="tip">Note that if your web browser is configured to block 3rd-party data/cookies, the example below will not work, as the `localStorage` data will fail to be saved from JSFiddle. You'll have to click on `Edit in JSFiddle` to see the live result.</p>
9+
<p class="tip">ملاحظة: هذا إذا كان متصفحك مخصص لحظر البيانات/كوكي الخارجية، المثال أدناه لن يعمل، لأن بيانات تخزين المحلية `localStorage` ستفشل في حفظ JSFiddle. يجب عليك النقر فوق `Edit in JSFiddle` لرؤية النتيجة المباشرة.</p>
1010

1111
<iframe width="100%" height="500" src="https://jsfiddle.net/yyx990803/4dr2fLb7/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

‎src/v2/examples/tree-view.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: Tree View
2+
title: شجرة الإظهار
33
type: examples
44
order: 4
55
---
66

7-
> Example of a simple tree view implementation showcasing recursive usage of components.
7+
> مثال على طريقة عرض الشجرة البسيطة التي تعرض الاستخدام التراجعي للمكونات.
88
99
<iframe width="100%" height="500" src="https://jsfiddle.net/chrisvfritz/pnqzspoe/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

0 commit comments

Comments
 (0)