GitHub - ElyaConrad/naive-gradient-picker: Naive UI Gradient picker component (original) (raw)

Naive UI Gradient Picker

$ npm install naive-gradient-picker

Basic usage

The <n-gradient-picker> component models any valid CSS gradient value (e.g. linear-gradient(90deg, #fff, #00f 30%, #f00)).

Template

Size

The size can have the following values: tiny, small, medium or large.

Script

// Import component import NGradientPicker from 'naive-gradient-picker' // Import component's style import 'naive-gradient-picker/style.css'

// Initialize a reactive gradient string const gradient = ref(linear-gradient(to right, blue, red, green));

Naive Angle Thumb

Aside the <n-gradient-picker> component, you can also use the <n-angle-thumb> component if you want to use the angle thumb used within the gradient picker on its own.

Template

Script

// Import component import { NAngleThumb } from 'naive-gradient-picker' // Import component's style import 'naive-gradient-picker/style.css'

// Initialize a reactive angle const angle = ref(90);