2015-07-25 22 views
6

Ich lerne NativeScript. Als Teil dieser Bemühungen versuche ich eine Seite zu erstellen, die dem Benutzer einen Dialog anzeigt. Wenn der Benutzer auf eine Schaltfläche klickt, muss ich ihnen einen Dialog zeigen, in dem sie zwei Werte eingeben können (Vorname und Nachname).Benutzerdefinierter Dialog in NativeScript

Die dialogs module in NativeScript bietet mehrere integrierte Optionen. Nach allem, was ich sagen kann, ermöglicht keine dieser Optionen, einen Dialog zu erstellen, der zwei Felder anzeigt. Wie erstelle ich einen Dialog in NativeScript, mit dem ich einen Benutzer auffordern kann, einen Vornamen und einen Nachnamen einzugeben? Derzeit sieht meine Seite wie folgt aus:

page.xml

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded"> 
    <GridLayout rows="auto, *"> 
     <Border borderWidth="1" borderColor="#000" width="28" height="28" cornerRadius="14" tap="addPersonButton_Tap"> 
     <Label text="add person" /> 
     </Border>  
    </GridLayout> 
</Page> 

page.js

var viewModel = new MyPageViewModel(); 
function pageLoaded(args) { 
    var page = args.object; 
    page.bindingContext = viewModel;   
} 
exports.pageLoaded = pageLoaded; 

function addPersonButton_Tap(args) { 
    console.log('new person'); 
    /* 
    * Dialog open code goes here. Yet, the following definitaly is not correct. 
    dialogs.prompt({ 
     title: "Add New Person", 
     message: "First Name", 
     okButtonText: "Save", 
     cancelButtonText: "Cancel", 
     inputType: dialogs.inputType.text 
    }). 
    then(function (r) { 
     if (r.result) { 
      console.log('User clicked "Save"!'); 
     } 
    }); 
    */ 
} 
exports.addPersonButton_Tap = addPersonButton_Tap; 

Antwort

6

Modale Seiten werden bereits unterstützt. Hier sehen Sie eine Demo mit: https://github.com/NativeScript/NativeScript/blob/7c13db6bc241c48d5897d556f2973944b8b750d6/apps/app/ui-tests-app/modal-view/modal-view.ts.

Darüber hinaus können Sie auch die Informationen finden Sie in der Dokumentation benötigt:

Ich wollte nur noch eine Sache nennen. Ich habe gesehen, dass Sie das Border Tag verwenden. Jetzt können Sie stattdessen das CSS-Styling verwenden.

+0

Hey @Neli Chakarova GitHub Link ist tot. würdest du das bitte aktualisieren? –

+1

Hey @HardikVaghani - Ich glaube [das] (https://github.com/NativeScript/NativeScript/blob/7c13db6bc241c48d5897d556f2973944b8b750d6/apps/app/ui-tests-app/modal-view/modal-view.ts) ist der Link welches das in der Antwort ersetzt. Bitte lassen Sie mich wissen, wenn dies das ist, was Sie suchen. –

0

ich nie NativeScript vor, aber nur blätterte in der Dokumentation die ich gesehen habe glaube nicht, dass du dich dem richtig nährst. In den Dokumenten heißt es: "Mit NativeScript können Sie in Ihrer App ähnlich wie im Webbrowser Dialoge erstellen. Sie können Warnmeldungen, Bestätigungen, Aufforderungen, Logins und Dialoge erstellen, die eine Aktion erfordern." und in einem Webbrowser gibt es keine Möglichkeit, das zu tun, was Sie fragen (ziehen Sie eine Dialogaufforderung mit zwei kleinen Textfeldern hoch). In einem Webbrowser würden Sie dies erreichen, indem Sie ein Formular mit HTML erstellen. Es sieht wie Beispiel 2 hier aus: http://developer.telerik.com/featured/getting-started-nativescript/ ist mehr nach dem, wonach Sie suchen.

4

Alle, die bei der Suche nach benutzerdefinierten Anzeigedialogfeldern hier landen. Siehe this

Es ist hier richtig dokumentiert, wie man einen benutzerdefinierten Dialog in nativescript anzeigt. Suchen Sie am unteren Rand der Seite nach der showModal-Funktion. In dieser Funktion kann der Benutzer modulName (Start von Anwendungsstamm), Kontext, closeCallBack-Funktion und boolesche übergeben, um Modal im Vollbildmodus anzuzeigen.