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

4 سال پیش

امتیاز دهید post

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

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

Select یک منوی ساده با گزینه های انتخابی برای کاربر انتخاب می کند. از آنجا که سبک دهی آن توسط مرورگر انجام می شود، این منوی انتخاب در سیستم عامل های مختلف متفاوت به نظر می رسد.

استفاده از Select

ابتدا یک لیبل ایجاد می کنیم و کلاس های item-input و item-select را اضافه می کنیم. کلاس دوم یک سبک اضافی را به فرم انتخاب اضافه می کند و سپس ما کلاس input-label را اضافه می کنیم که برای افزودن نام به عنصر انتخابی ما استفاده می شود. همچنین انتخاب با گزینه داخل را اضافه خواهیم کرد. این عنصر معمول HTML5 است. مثال زیر Select را با سه گزینه نشان می دهد.

&lt;label class = "item item-input item-select"&gt;
   &lt;div class = "input-label"&gt;
      Select
   &lt;/div&gt;
    
   &lt;select&gt;
      &lt;option&gt;Option 1&lt;/option&gt;
      &lt;option selected&gt;Option 2&lt;/option&gt;
      &lt;option&gt;Option 3&lt;/option&gt;
   &lt;/select&gt;
&lt;/label&gt;

Select

</div>

<option>Option 1</option>

<option selected>Option 2</option>

<option>Option 3</option>

</select>

</label>

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

Ionic Select

استایل دهی Select

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

&lt;div class = "list"&gt;
   &lt;label class = "item item-input item-select item-light"&gt;
      &lt;div class = "input-label"&gt;
         Select
      &lt;/div&gt;
        
      &lt;select&gt;
         &lt;option&gt;Option 1&lt;/option&gt;
         &lt;option selected&gt;Option 2&lt;/option&gt;
         &lt;option&gt;Option 3&lt;/option&gt;
      &lt;/select&gt;
   &lt;/label&gt;

   &lt;label class = "item item-input item-select item-stable"&gt;
      &lt;div class = "input-label"&gt;
         Select
      &lt;/div&gt;
        
      &lt;select&gt;
         &lt;option&gt;Option 1&lt;/option&gt;
         &lt;option selected&gt;Option 2&lt;/option&gt;
         &lt;option&gt;Option 3&lt;/option&gt;
      &lt;/select&gt;
   &lt;/label&gt;

   &lt;label class = "item item-input item-select item-positive"&gt;
      &lt;div class = "input-label"&gt;
         Select
      &lt;/div&gt;
        
      &lt;select&gt;
         &lt;option&gt;Option 1&lt;/option&gt;
         &lt;option selected&gt;Option 2&lt;/option&gt;
         &lt;option&gt;Option 3&lt;/option&gt;
      &lt;/select&gt;
   &lt;/label&gt;

   &lt;label class = "item item-input item-select item-calm"&gt;
      &lt;div class = "input-label"&gt;
         Select
      &lt;/div&gt;
        
      &lt;select&gt;
         &lt;option&gt;Option 1&lt;/option&gt;
         &lt;option selected&gt;Option 2&lt;/option&gt;
         &lt;option&gt;Option 3&lt;/option&gt;
      &lt;/select&gt;
   &lt;/label&gt;

   &lt;label class = "item item-input item-select item-balanced"&gt;
      &lt;div class = "input-label"&gt;
         Select
      &lt;/div&gt;
        
      &lt;select&gt;
         &lt;option&gt;Option 1&lt;/option&gt;
         &lt;option selected&gt;Option 2&lt;/option&gt;
         &lt;option&gt;Option 3&lt;/option&gt;
      &lt;/select&gt;
   &lt;/label&gt;

   &lt;label class = "item item-input item-select item-energized"&gt;
      &lt;div class = "input-label"&gt;
         Select
      &lt;/div&gt;
        
      &lt;select&gt;
         &lt;option&gt;Option 1&lt;/option&gt;
         &lt;option selected&gt;Option 2&lt;/option&gt;
         &lt;option&gt;Option 3&lt;/option&gt;
      &lt;/select&gt;
   &lt;/label&gt;

   &lt;label class = "item item-input item-select item-assertive"&gt;
      &lt;div class = "input-label"&gt;
         Select
      &lt;/div&gt;
        
      &lt;select&gt;
         &lt;option&gt;Option 1&lt;/option&gt;
         &lt;option selected&gt;Option 2&lt;/option&gt;
         &lt;option&gt;Option 3&lt;/option&gt;
      &lt;/select&gt;
   &lt;/label&gt;

   &lt;label class = "item item-input item-select item-royal"&gt;
      &lt;div class = "input-label"&gt;
         Select
      &lt;/div&gt;
        
      &lt;select&gt;
         &lt;option&gt;Option 1&lt;/option&gt;
         &lt;option selected&gt;Option 2&lt;/option&gt;
         &lt;option&gt;Option 3&lt;/option&gt;
      &lt;/select&gt;
   &lt;/label&gt;

   &lt;label class = "item item-input item-select item-dark"&gt;
      &lt;div class = "input-label"&gt;
         Select
      &lt;/div&gt;
        
      &lt;select&gt;
         &lt;option&gt;Option 1&lt;/option&gt;
         &lt;option selected&gt;Option 2&lt;/option&gt;
         &lt;option&gt;Option 3&lt;/option&gt;
      &lt;/select&gt;
   &lt;/label&gt;
&lt;/div&gt;

100

101

102

103

104

105

106

107

108

109

Select

</div>

<option>Option 1</option>

<option selected>Option 2</option>

<option>Option 3</option>

</select>

</label>

Select

</div>

<option>Option 1</option>

<option selected>Option 2</option>

<option>Option 3</option>

</select>

</label>

Select

</div>

<option>Option 1</option>

<option selected>Option 2</option>

<option>Option 3</option>

</select>

</label>

Select

</div>

<option>Option 1</option>

<option selected>Option 2</option>

<option>Option 3</option>

</select>

</label>

Select

</div>

<option>Option 1</option>

<option selected>Option 2</option>

<option>Option 3</option>

</select>

</label>

Select

</div>

<option>Option 1</option>

<option selected>Option 2</option>

<option>Option 3</option>

</select>

</label>

Select

</div>

<option>Option 1</option>

<option selected>Option 2</option>

<option>Option 3</option>

</select>

</label>

Select

</div>

<option>Option 1</option>

<option selected>Option 2</option>

<option>Option 3</option>

</select>

</label>

Select

</div>

<option>Option 1</option>

<option selected>Option 2</option>

<option>Option 3</option>

</select>

</label>

</div>

Ionic Select Color

منبع.

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

امتیاز دهید post

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

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

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

استفاده از Select

استایل دهی Select

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

دیدگاه شما

بدون دیدگاه

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

استفاده از Select

استایل دهی Select

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

دیدگاه شما

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

بدون دیدگاه