Nebulous Pumpkin Moons

    naive-gradient-picker

    0.0.5 • Public • Published

    Naive UI Gradient Picker

    Preview

    $ 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

    <n-gradient-picker v-model:value="gradient" size="medium" />

    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

    <n-angle-thumb v-model:value="angle" :min="0" :max="360" :step="1" :grid="[0, 90, 180, 270, 360]" />

    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);

    Install

    npm i naive-gradient-picker

    DownloadsWeekly Downloads

    20

    Version

    0.0.5

    License

    ISC

    Unpacked Size

    1.08 MB

    Total Files

    10

    Last publish

    Collaborators

    • mauriceconrad