اضافة عناصر للصفحة

في التدونتين السابقتين تعلمنا طريقة انشاء مشروع polymer جديد وايضاً تعلمنا اضافة صفحة جديدة وسنحتاج الان اضافة مكونات وعناصر للصفحة بما يناسب مشروعنا والمقصود بالمكونات والعناصر هي الصور والازرار .. الخ .

يحتوي polymer على العديد من المكونات والعناصر وايضاً هناك عناصر واضافات من المبرمجين يمكنك الحصول عليها من هنا .

تثبيت عنصر جديد :

سنقوم باضافة عنصر جديد للصفحة التي انشأناها سابقاً وسنستخدم bower لاضافة هذا العنصر وذلك بكتابة الامر في ” موجة الاوامر كما تعلمنا سابقاً ” .

سنقوم باضافة <paper-slider> في الصفحة وهو احد مكونات polymer الموجودة في موقع polymer والذي يحتوي على العديد من المكونات والاقسام وسيكون الامر بالشكل التالي :

bower install --save PolymerElements/paper-slider

اضافة العنصر الى الصفحة :

بعد انتهاء عملية التثبيت سنحتاج فقط الى اضافته في صفحتنا الجديدة او اي مكان في تطبيقك .

1. افتح الصفحة التي انشأنها سابقا في هذا المسار src/my-new-view.html :
2. اضافة paper-slider.html الى الصفحة .

   <link rel="import" href="../bower_components/paper-slider/paper-slider.html">

3. اضافة العنصر الى الصفحة :
   كل عنصر او مكون له خصائص فريدة خاصة يجب عليك الاطلاع على طريقة استخدامها في polymer .

   <paper-slider min="-100" max="100" value="50"></paper-slider>

   بعد اضافة السطر السابق سيكون شكل شفرة الصفحة كما في الاسفل :

   <!-- Defines the element's style and local DOM -->
   <template>
     <style>
       :host {
         display: block;
         padding: 16px;
       }
     </style>
     <h1>New view</h1>
     <paper-slider min="-100" max="100" value="50"></paper-slider>
   </template>

   الان عند عرض الصفحة في المتصفح كما تعلمنا سابقاً سيكون بهذا الشكل :
   

الان وبعد هذا الدرس سيكون لديك معرفة كاملة بالتعامل مع polymer وانشاء صفحة جديدة واضافة عناصر ومكونات للصفحة وسنتكلم في التدوينة التالية عن طريقة نشر الصفحة باذن الله .