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

← prev next →