آموزش کارت ها در برنامه نویسی آیونیک

4 سال پیش

امتیاز دهید post

آموزش کارت ها در برنامه نویسی آیونیک

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش کارت ها در برنامه نویسی آیونیک خواهیم پرداخت.

از آنجا که دستگاه های تلفن همراه اندازه صفحه نمایش کمتری دارند ، کارت ها یکی از بهترین عناصر برای نمایش اطلاعاتی هستند که کاربر پسند هستند. در درس قبل ، ما در مورد چگونگی قرار دادن لیست ها بحث کردیم. کارت ها بسیار شبیه به لیست های داخلی هستند، اما برخی از سایه های اضافی را ارائه می دهند که می تواند بر عملکرد لیست های بزرگتر تأثیر بگذارد.

افزودن کارت

با افزودن کلاس card به عنصر شما، یک کارت پیش فرض ایجاد می شود. کارت ها معمولاً به صورت لیست هایی با کلاس کالا تشکیل می شوند. یکی از کلاسهای بسیار مفید، item-text-wrap مورد است. وقتی متن بیش از اندازه داشته باشید به این ترتیب کمک می کند ، بنابراین می خواهید آن را درون کارت خود بپیچید. کارت اول در مثال زیر کلاس item-text-wrap اختصاص داده نشده است، اما کارت دوم از آن استفاده می کند.

&lt;div class = "card"&gt;
   &lt;div class = "item"&gt;
      This is a Ionic card without item-text-wrap class.
   &lt;/div&gt;
   
   &lt;div class = "item item-text-wrap"&gt;
      This is a Ionic card with item-text-wrap class.
   &lt;/div&gt;
&lt;/div&gt;

This is a Ionic card without item-text-wrap class.

</div>

This is a Ionic card with item-text-wrap class.

</div>

کد فوق صفحه زیر را تولید می کند –

کارت هدر و فوتر

در درس قبل، ما در مورد چگونگی استفاده از کلاس تقسیم مورد برای گروه بندی لیست ها بحث کردیم. این کلاس می تواند هنگام کار با کارت برای ایجاد هدر کارت بسیار مفید باشد. همان طبقه ای که در کد زیر نشان داده شده است ، می تواند برای فوتر ها استفاده شود –

&lt;div class = "card list"&gt;
   &lt;div class = "item item-divider"&gt;
      Card header
   &lt;/div&gt;
   
   &lt;div class = "item item-text-wrap"&gt;
      Card text...
   &lt;/div&gt;
   
   &lt;div class = "item item-divider"&gt;
      Card Footer
   &lt;/div&gt;
&lt;/div&gt;

Card header

</div>

Card text...

</div>

Card Footer

</div>

کد فوق صفحه زیر را تولید می کند –

کارت کامل

می توانید هر عنصری را بالای کارت خود اضافه کنید. در مثال زیر ، ما به شما نشان خواهیم داد که چگونه از کلاس full-image همراه با item-body برای به دست آوردن یک تصویر پنجره ای زیبا در کارت خود استفاده کنید.

&lt;div class = "card"&gt;
   &lt;div class = "item item-avatar"&gt;
      &lt;img src = "my-image.png"&gt;
      &lt;h2&gt;Card Name&lt;/h2&gt;
   &lt;/div&gt;

   &lt;div class = "item item-body"&gt;
      &lt;img class = "full-image" src = "my-image.png"&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget 
      pharetra tortor. Proin quis eros imperdiet, facilisis nisi in, tincidunt orci. 
      Nam tristique elit massa, quis faucibus augue finibus ac.
   &lt;/div&gt;
&lt;/div&gt;

</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget

pharetra tortor. Proin quis eros imperdiet, facilisis nisi in, tincidunt orci.

Nam tristique elit massa, quis faucibus augue finibus ac.

</div>

کد فوق صفحه زیر را تولید می کند –

Ionic Complete Card

منبع.

لیست جلسات قبل آموزش برنامه نویسی آیونیک

امتیاز دهید post

برچسب ها : آموزش آیونیک آموزش برنامه نویسی موبایل

نویسنده مطلب saber

آموزش کارت ها در برنامه نویسی آیونیک

آموزش کارت ها در برنامه نویسی آیونیک

افزودن کارت

کارت هدر و فوتر

کارت کامل

لیست جلسات قبل آموزش برنامه نویسی آیونیک

دیدگاه شما

بدون دیدگاه

آموزش کارت ها در برنامه نویسی آیونیک

افزودن کارت

کارت هدر و فوتر

کارت کامل

لیست جلسات قبل آموزش برنامه نویسی آیونیک

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه