Linear-Gradient

[byronferguson]

I successfully registered this plugin for vue-nativescript; however, the button which I am trying to wrap will not render the linear-gradient background inside of the CardView that it does outside of it. Solid colors work just fine.

Is there something else I need to do, or is this currently not supported?

[bradmartin]

Post your layout please, maybe some workaround can be found 😄

[byronferguson]

<template>
  <CardView
    class="card"
    :radius=radius
    :elevation=elevation
    :shadowOffsetWidth=shadowOffsetWidth
    :shadowOffsetHeight=shadowOffsetHeight
    :shadowOpacity=shadowOpacity
    :shadowRadius=shadowRadius
  >
    <StackLayout>
      <Button
        :text="text"
        :isEnabled="isEnabled"
        class="button"
        @tap="$emit('tap')"
      />
    </StackLayout>
  </CardView>
</template>

The intent is to create a drop-shadow effect for a button. Previously the button rendered with a linear-gradient, but not only appears with the background

[JuanDeLeon]

Hey there. Was there any resolution/workaround for this? Adding css linear-gradient to CardView style doesn't seem to work. It renders the Card but it's all white, and it won't show any text or elements on it.

<CardView v-for="(reservacion, index) in proxReservaciones" :key="reservacion.id" 
                elevation="40"
                radius="10"
                ios:shadowRadius="3"
                style="background: linear-gradient(45deg, #304B99, #758dd3);"
                @tap="verDetalleReservacion(index)">

[JuanDeLeon]

As a workaround I just wrapped all of my CardView's content into a StackLayout and set the linear-gradient on that layout (I had to set the border-radius on the StackLayout as well). Works great.

[byronferguson]

We switched to Dart/Flutter, and this is trivial in that framework. Glad you found something that would work for you.