کامپوننت‌های آیونیک (Ionic Component)

Introducing Ionic 4: Ionic for Everyone - Ionic Blog

از مثال قبلی در مورد برخی از اصلی‌ترین کامپوننت‌های آیونیک (Ionic Component) یاد گرفتید. تنوع بسیار زیادی از کامپوننت‌های آیونیک (Ionic Component) وجود دارد که می‌توانید برای ساخت برنامه خود از آنها استفاده کنید، این کامپوننت‌ها بسیار عالی هستند، اجازه دهید در مورد ۲ خصوصیت از آنها صحبت کنیم:

۱. دارا بودن کامپوننت‌های استاندارد مرتبط با وب : در مورد آنها در فصل استایل دهی (styling) صحبت خواهم کرد اما نکته قابل توجه این است که شما می‌توانید هر کدام از این کامپوننت‌های آیونیک (Ionic Component) را به سلیقه خود سفارشی سازی کرده و از آن لذت ببرید (این کامپوننت‌ها آنقدر عالی طراحی شده اند که در بسیاری از موارد نیازی به سفارشی سازی ندارند.)

۲. کامپوننت‌های آیونیک (Ionic Component) بصورت اتوماتیک در سیستم عامل های IOS و Android تغییر شکل می‌دهند : با استفاده از دستور lab که در فصل‌های آینده در مورد آن صحبت خواهم کرد به راحتی می‌توانید پیش نمایش برنامه خود را در هر دو سیستم عامل IOS و Android به سادگی مشاهده کنید. این امکان توسط مرورگر برای شما فراهم خواهد شد.

درک کامپوننت‌های آیونیک (Ionic Component) و نحوه استفاده از آنها بخشی از منحنی یادگیری این فریمورک می‌باشد و به شما قول می‌دهم که بزودی با آنها آشنا شده و راحت کار خواهید کرد. برای اینکه درک بهتری از تگ‌های مقاله گذشته داشته باشید این موارد را مورد بررسی قرار خواهم داد :

  • ion-header: هدر یک جزء والد برای ناحیه نوار ابزار (toolbar) برنامه شما است و یکی از 3 عنصر اصلی در کنار عنصر محتوا (content) و فوتر (footer) می‌باشد.
  • ion-toolbar: نوار ابزار را می توان در داخل یک هدر یا فوتر قرار داد (در container آن قرار داده شود).
  • ion-content: قسمت محتوای اصلی صفحه شما که بیشتر مواقع scroll می‌شود.
  • ion-button: یک کامپوننت مرتبط با دکمه‌ها که قابل سفارشی سازی می‌باشد

در ابتدا توصیه می‌کنم به تمام کامپوننت‌های آیونیک (Ionic Component) که در سایت وجود دارد نگاهی بیندازید. بعداً که روی برنامه خود کار می‌کنید، می‌توانید به این صفحه بازگردید و عناصر مد نظر خود را در آن بیابید با گذشت زمان مهارت شما در استفاده از این کامپوننت‌ها افزایش خواهد یافت.

من می‌توانم تک تک این کامپوننت‌ها را برای شما تشریح کنم ولی این موارد اینقدر ساده هستند که با نگاهی به آنها به راحتی می‌توانید ازشون سر دربیارید پس من به موضوعات اصلی تر می‌پردازم. این موضوعات مشکلات زیادی را برای شما توسعه دهندگان Ionic و Angular حل خواهد کرد.

در مقاله بعدی به بررسی Routing و Navigation می‌پردازم

برای مطالعه مقاله پیشین اینجا کلیک کنید.

نوشته‌های مشابه

  • چارچوب MVC را عمیق بفهمیم

    در توسعه وب اغلب می‌شنوید که افرادی در مورد چارچوب MVC صحبت می کنند. این چارچوب دقیقاً چیست؟ چگونه آنها در توسعه وب مفید هستند؟ در دنیای مهندسی نرم افزار، اغلب می شنوید که مردم در مورد الگوهای طراحی صحبت می کنند. منظور این الگوها دقیقاً این است که هر باره از اختراع مجدد چرخ…

  • Ionic چیست و نحوه نصب آن چگونه است

    Ionic فریمورکی است که به ما امکان می‌دهد برنامه‌های تلفن همراه را با استفاده از فناوری‌های وب شامل HTML، CSS و جاوا اسکریپت توسعه دهیم. برنامه داخل یک مرورگر اجرا می‌شود، اما بعد از تکمیل پروژه نوار آدرس مرورگر را در داخل آن برنامه نمی‌بینید! بصورت خلاصه Ionic یک مجموعه ابزار UI منبع باز است…

  • ایجاد اولین پروژه ionic

    ionic cli : ما اکنون آماده شروع اولین پروژه خود هستیم –  کمی هیجان زده هستید نه؟ نکته جالب این است که ما می‌توانیم اولین پروژه خود را با استفاده از خط فرمان Ionic ایجاد، اصلاح و بسازیم. (command‐line interface (CLI)) این تمام چیزی است که ما برای توسعه برنامه های Ionic نیاز داریم! اکنون…

  • ساختار پروژه ionic

    اگر این اولین برخورد شما با ساختار پروژه Ionic یا Angular باشد، ممکن است فایل‌های داخل فولدر برای شما بسیار ترسناک و طاقت‌فرسا به نظر برسند. اما یک خبر خوش برایتان دارم شما بیشتر اوقات فقط در پوشه src کار می کنید و می‌توانید بقیه موارد را تا حد زیادی فراموش کنید! ساختار پروژه ionic…

  • کار با Angular (قسمت اول)

    در این مقاله به موضوعات اصلی برای کار با Angular می‌پردازیم پوشه app تا به حال کدهای اصلی مربوط به برنامه را (قرار گرفته در پوشه app) ندیده‌ایم – پس بیایید کار با Angular را شروع کنیم! همانطور که قبلاً گفته شد، عمده فعالیت‌های ما در هنگام کار با Angular در پوشه app و پوشه…

  • کلاس (کار با Angular)

    کلاس‌ ها: در داخل کلاس‌ خود می‌توانیم متغیرهایی را مانند سایر زبان‌ها تعریف کنیم، بنابراین کلاس‌ خود را به صورت زیر تغییر می‌دهیم:

    حال چگونه این مقدار را در view نشان دهیم؟ با استفاده از دو براکت {{ و }} در داخل فایل html و به کمک Angular data binding می‌توانیم به این متغیری…