CODEWITHSUNDEEP
javascriptcssnativescript
user4077377
user4077377

Reputation:

ImageButton in Nativescript

I wanted to know how one could add text to the picture in nativescript and other custom animations etc, and I also wanted to know how one could manipulate a button on each page. For example: I have 2 buttons on one page and I want to manipulate each button so I can have better control.

Thanks!

EDIT: So far I have this:

<Page loaded="pageLoaded">

<StackLayout>

    <Image row="1"/>
        <Button row="1"/>
            <Image src="~/images/1stfloor.jpg" height="200" width="200"/>
                <Button text ="clickone" tap="tapAction" />


<Image row="1" />
<Button row="1" />
<Image src="~/images/2ndfloor.jpg" height="200" width="200"/>
<Button text ="hiya" tap="tapAction"/>


</StackLayout>

Thats essentially my xml code and I want to know how I could do the above.

JS: 

var frameModule = require("ui/frame");

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

    page.css = "Button1 {color : green}";
    page.css = "Button2 {color: red}";
}
 //later items will overlap the earlier items
exports.tapAction = function() {
    frameModule.topmost().navigate("second-page");
}

EDIT: So this is essentially how my app looks like, I essentially need to have 3 pictures that serve as buttons and need to go into different pages. The pictures are to be arranged on top of each other.

Info

Upvotes: 0

Views: 2140

Answers (1)

Nick Iliev
Nick Iliev

Reputation: 9670

Hello to SO and NatieScript! Customising the apperiance of each UI element is achived with CSS styles. You can add class attribute to each of your buttons and specify in CSS how each should look. For example:

main-page.css

.myButtonOne {
  background-color: red;
}

.myButtonTwo {
  background-color: green;
}

main-page.xml

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="onLoaded" navigatedTo="onNavigatedTo">
    <StackLayout>
        <Button text="Button One" tap="tapAction" class="myButtonOne" />
        <Button text="Button Two" tap="anotherTapAction" class="myButtonTwo" />
    </StackLayout>
</Page>

Just like the native CSS you can also set id on your UI elements and get them in your code behind.

<Button text="Button One" tap="" class="myButtonOne" id="btn-one"/>


exports.loaded = function(args) {
    var page = args.object;
    var buttonOne = page.getViewById("btn-one");  
}

Also I must notice that StackLayout do not have rows and cols (look for GridLayout) and for better understanding of layouts and styling you can reffer to the NativeScript documentation NativeScript documentation

Upvotes: 1

Related Questions