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

4 سال پیش

امتیاز دهید post

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

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

محدوده برای انتخاب و نمایش سطح چیزی استفاده می شود. این مقدار واقعی را در رابطه با مقدار حداکثر و حداقل نشان می دهد. Ionic یک روش ساده برای کار با محدوده ارائه می دهد.

استفاده از محدوده

محدوده به عنوان یک عنصر مورد داخلی استفاده می شود. کلاسی که استفاده می شود محدوده است. ما این کلاس را بعد از کلاس item قرار می دهیم. با این کار ظرفی آماده می شود که محدوده در آن قرار گیرد. پس از ایجاد یک ظرف، باید ورودی را اضافه کرده و نوع دامنه را به آن و ویژگی نام را نیز اختصاص دهیم.

&lt;div class = "item range"&gt;
   &lt;i class = "icon ion-volume-low"&gt;&lt;/i&gt;
   &lt;input type = "range" name = "volume"&gt;
   &lt;i class = "icon ion-volume-high"&gt;&lt;/i&gt;
&lt;/div&gt;

</div>

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

افزودن آیکون ها

محدوده معمولاً برای نمایش واضح داده ها به آیکون نیاز دارد. فقط باید آیکون ها را قبل و بعد از ورودی محدوده اضافه کنیم تا در دو طرف عنصر محدوده قرار بگیرند.

&lt;div class = "range range"&gt;
&lt;i class = "icon ion-volume-low"&gt; &lt;/i&gt;
&lt;input type = "range" name = "volume"&gt;
&lt;i class = "icon ion-volume-high"&gt; &lt;/i&gt;
&lt;/div&gt;

</div>

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

استایل دهی محدوده ها

مثال بعدی ما به شما نشان می دهد که چگونه محدوده را با رنگ های آیونیک استایل دهی کنید. در کلاس های رنگی از پیشوند دامنه استفاده می شود. ما لیستی با نه دامنه ایجاد خواهیم کرد و آن را به گونه ای متفاوت سبک می کنیم.

&lt;div class = "list"&gt;
   &lt;div class = "item range range-light"&gt;
      &lt;input type = "range" name = "volume"&gt;
   &lt;/div&gt;
    
   &lt;div class = "item range range-stable"&gt;
      &lt;input type = "range" name = "volume"&gt;
   &lt;/div&gt;
    
   &lt;div class = "item range range-positive"&gt;
      &lt;input type = "range" name = "volume"&gt;
   &lt;/div&gt;
    
   &lt;div class = "item range range-calm"&gt;
      &lt;input type = "range" name = "volume"&gt;
   &lt;/div&gt;
    
   &lt;div class = "item range range-balanced"&gt;
      &lt;input type = "range" name = "volume"&gt;
   &lt;/div&gt;
    
   &lt;div class = "item range range-energized"&gt;
      &lt;input type = "range" name = "volume"&gt;
   &lt;/div&gt;
    
   &lt;div class = "item range range-assertive"&gt;
      &lt;input type = "range" name = "volume"&gt;
   &lt;/div&gt;
    
   &lt;div class = "item range range-royal"&gt;
      &lt;input type = "range" name = "volume"&gt;
   &lt;/div&gt;
    
   &lt;div class = "item range range-dark"&gt;
      &lt;input type = "range" name = "volume"&gt;
   &lt;/div&gt;
&lt;/div&gt;

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

Ionic Range Color

منبع.

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

امتیاز دهید post

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

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

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

استفاده از محدوده

افزودن آیکون ها

استایل دهی محدوده ها

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

دیدگاه شما

بدون دیدگاه

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

استفاده از محدوده

افزودن آیکون ها

استایل دهی محدوده ها

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

دیدگاه شما

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

بدون دیدگاه