Framework7 Picker With Single Value

by Online Tutorials Library July 14, 2022

Picker With Single Value

It is a powerful component that facilitates you to pick any values from the list.

Example

  <!DOCTYPE html>  <html>     <head>        <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui”>        <meta name=”apple-mobile-web-app-capable” content=”yes”>        <meta name=”apple-mobile-web-app-status-bar-style” content=”black”>        <title>Picker with single value</title>        <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css”>        <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css”>     </head>     <div class=”views”>        <div class=”view view-main”>           <div class=”pages”>              <div data-page=”home” class=”page navbar-fixed”>                 <div class=”navbar”>                    <div class=”navbar-inner”>                       <div class=”left”> </div>                       <div class=”center”>Picker</div>                       <div class=”right”> </div>                    </div>                 </div>                 <div class=”page-content”>                    <div class=”content-block-title”>Picker with single value</div>                    <div class=”list-block”>                       <ul>                          <li>                             <div class=”item-content”>                                <div class=”item-inner”>                                   <div class=”item-input”>                                      <input type=”text” placeholder=”Your iOS device” readonly id=”picker-device”>                                   </div>                                </div>                             </div>                          </li>                       </ul>                    </div>                 </div>              </div>           </div>        </div>     </div>     <script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js”></script>     <style>.swiper-slide{background:#fff;box-sizing:border-box;border:1px solid      #ccc;line-height:120px;text-align:center;}.swiper-slide span{font-size:17px;}.swiper-container{height:120px;margin:0px 0 35px;}</style>     <style>#picker-date-container .picker-item{color:#999;}#picker-date-container      .picker-selected{color:#000;}@media (max-width: 767px) {#picker-date-container      .picker-items{font-size:21px;}#picker-date-container .picker-item{height:36px;line-height:36px;padding:0 6px;}}</style>     <script>        var myApp = new Framework7();          var pickerDevice = myApp.picker({           input: ‘#picker-device’,           cols: [              {                 textAlign: ‘center’,                 values: [‘iPhone 4’, ‘iPhone 4S’, ‘iPhone 5’, ‘iPhone 5S’, ‘iPhone 6’, ‘iPhone 6 Plus’, ‘iPad 2’,      ‘iPad Retina’, ‘iPad Air’, ‘iPad mini’, ‘iPad mini 2’, ‘iPad mini 3’, ‘iPhone 7’, ‘iPhone 7s’, ‘iPhone 8’, ‘iPhone X’]              }           ]        });     </script>       </html>  

Test it Now

Next TopicF7 Two values and 3D Rotate Effect

Framework7 Picker With Single Value

Picker With Single Value

Example

AdMob with Firebase

Godot Tutorial

You may also like