How to add dropdown field in nativecsript view


#1

tried using nativescript-drop-down plugin but it adds button which opens up all the items.
Is it possible to have a dropdown just like we get in simple HTML file

Nativescript version - 4.1.2


#2

iOS doesn’t have a control similar to Dropdown like in HTML / Android. The plugin implements the something similar that is generally used in iOS.

Could you please be more clear on which button you are talking about.


#3

dropdown

Attached is the image of dropdown which i am looking for.

Please suggest an appropriate plugin to achieve it


#4

i am using nativescript-drop-down plugin to accomplish the dropdown button …
but i can see the dropdown appears at the bottom of the page …is there any way i can get the dropdown opening in the same column of the Page where i am using its tag

Source code:

<GridLayout row="3" rows="*" columns="*,*" class="form">
            <StackLayout row="1" col="0" class="textboxleft">
                <TextField formControlName="company" (textChange)="textChangeM($event)" autocorrect="false" autocapitalization="true" backgroundcolor="#ffffff"
                    width="99%" height="85%" hint="Company" class="input"></TextField>
            </StackLayout>
            <StackLayout row="1" col="1" class="textboxright">
                <DropDown #dd class="input" width="99%" height="85%" backgroundcolor="#ffffff" hint="U.S.Citizen?" [items]="items" [(ngModel)]="selectedIndex"
                    (selectedIndexChanged)="onchange($event)" (opened)="onopen()" (closed)="onclose()"></DropDown>
            </StackLayout>
        </GridLayout>

#5

As I already said, that’s the traditional design of iOS. If you like something similar to Android, you will have build one.


#6

@kanchan you could use Greensock js a library for animating literarally anything from Html to Native components, Checkout my Playground using the library just npm i greensock then require it like so const tl = require ("greensock");" hit me if you get stuck :slight_smile: My documentation(sort of) Here on Github you want to hide the view then when you tap on something it should animate into view located where you want either using CSS or
independent pixels
EDIT
here is an example of using Greensock to animate the FAB(floating action button)plugin but am using my own implementation of animating(NOT the one from the plugin)
XML

<GridLayout rows="auto,*" >
    <Button text="&#xf3fc;" tap="changePage"  id="btnb" class="speed-button ion grey"  row="1" fontSize="24" />
   <Button text="&#xf2c7;" tap="page"  id="btna" class="speed-button  ion red" fontSize="24" row="1" />
   
   <FAB:fab
        id="fab"
        row="1"
        icon="res://icon"
        tap="fabTap"
        rippleColor="#fff"
        class="fab-button"  />
</GridLayout>

JS

var isFabOpen = false;

function fabTap(args) {
   var page = model.page;
   var fab = args.object;
   var button = page.getViewById('btna');
   var button2 = page.getViewById('btnb');

   if (isFabOpen === true) {
     var tl = new TimelineMax({onComplete:function() {

       isFabOpen = false; //here we hide the view thats behind the main FAB
            }
        });
           tl.to(fab, 0.2, {rotate:0, ease:Elastic.easeIn})./*the main button, 200ms rotate 0* with an elastic bounce*/
           to(button2, 0.2, {translateY:0,opacity:0, ease:Elastic.easeIn})./*Btn2 slide down and  hide */
           to(button, 0.2, {translateY:0,opacity:0, ease:Elastic.easeIn}) //same here
     } else {
     var tl = new TimelineMax({onComplete:function() {
       console.log("Animations finished");
       isFabOpen = true;
            }
        });

         tl.to(fab, 0.2, {rotate: 45, ease:Back.easeOut})./* here we rotate the main FAB by 45* in 200ms with an ease not snap!*/
          to(button, 0.2, {translateY: -54,opacity:1, ease:Elastic.easeOut})./* slide up and show with a bouncing animation
          to(button2, 0.2, {translateY: -100,opacity:1, ease:Elastic.easeOut}) 
     }
  }
exports.fabTap = fabTap;

Let me add this to the Playground


#7

ok thanks for the explanation… i will surely let you know if i get stuck anywhere