linear gradient - xkli/WXSample GitHub Wiki

Summary

W3C description of the gradient: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients

Weex only supports linear-gradient

Supported components

All components in Weex support gradients

Style

background-image background-image:linear-gradient(to top,#a80077,#66ff00);

Detail

Weex currently supports two color gradients。
The direction of the gradient is as follows:

to right
From left to right
to left
From right to left
to bottom
From top to bottom
to top
From bottom to top
to bottom right
From the upper left corner to the lower right corner
to top left
From the lower right corner to the upper left corner

Note

background-image and background-color are set at the same time, background-image precedes background-color.

Example

<template>
    <scroller style="background-color: #3a3a3a">
        <div class="container1" style="background-image:linear-gradient(to right,#a80077,#66ff00);">
            <text class="direction">to right</text>
        </div>
        <div class="container1" style="background-image:linear-gradient(to left,#a80077,#66ff00);">
            <text class="direction">to left</text>
        </div>
        <div class="container1" style="background-image:linear-gradient(to bottom,#a80077,#66ff00);">
            <text class="direction">to bottom</text>
        </div>
        <div class="container1" style="background-image:linear-gradient(to top,#a80077,#66ff00);">
            <text class="direction">to top</text>
        </div>
        <div style="flex-direction: row;align-items: center;justify-content: center">
            <div class="container2" style="background-image:linear-gradient(to bottom right,#a80077,#66ff00);">
                <text class="direction">to bottom right</text>
            </div>
            <div class="container2" style="background-image:linear-gradient(to top left,#a80077,#66ff00);">
                <text class="direction">to top left</text>
            </div>
        </div>
    </scroller>
</template>
<style>
    .container1 {
        margin: 10px;
        width: 730px;
        height: 200px;
        align-items: center;
        justify-content: center;
        border: solid;
        border-radius: 10px;
    }

    .container2 {
        margin: 10px;
        width: 300px;
        height: 300px;
        align-items: center;
        justify-content: center;
        border: solid;
        border-radius: 10px;
    }

    .direction {
        font-size: 40px;
        color: white;
    }
</style>