NativeScript-Vue button with linear gradient background and image

Question

In NativeScript with vue.js, I'm trying to figure out if it is possible to have a button which has a linear gradient background and shows an image above the button text. When I set up the CSS to do that, it doesn't seem to work.

I set up a playground to demonstrate: https://play.nativescript.org/?template=play-vue&id=kICEBa&v=1.

Am I doing something wrong, or is this simply not supported by NativeScript-Vue?

If it's not supported by CSS, is there some other way to achieve this result?

Have you tried that outside of a nativescript application? – Jonas Nov 10 '18 at 20:56 — Jonas, Nov 10 '18 at 20:56
Jonas, I only tried this inside NativeScript. – ppritcha Nov 12 '18 at 22:25 — ppritcha, Nov 12 '18 at 22:25

score 2 · Accepted Answer · answered Nov 10 '18 at 17:00

2

I don't think having both on same element is yet supported. You may raise a feature request to support both.

Meanwhile wrap your button with a layout / content view and apply the gradient on it.

answered Nov 10 '18 at 17:00

Manoj

21,753
3
20
41

2

Wrapping the button in a content view works. I updated the playground with the solution: [link](https://play.nativescript.org/?template=play-vue&id=kICEBa&v=2) – ppritcha Nov 10 '18 at 17:13

NativeScript-Vue button with linear gradient background and image

1 Answers1