3.5.0 • Published 9 months ago

@lemonadejs/color v3.5.0

Weekly downloads
-
License
-
Repository
-
Last release
9 months ago

LemonadeJS Color Picker

Official website and documentation is here

Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.

The LemonadeJS JavaScript Color Picker is a responsive and reactive component that simplifies color selection. It features two sections: a personalized palette and a pre-defined gradient of colors. With a customizable button, this component seamlessly integrates into your application, allowing users to pick colors effortlessly.

Features

  • Lightweight: The JavaScript Color is only about 2 KBytes;
  • Integration: It can be used as a standalone library or integrated with any modern framework;

Getting Started

You can install using NPM or using directly from a CDN.

npm Installation

To install it in your project using npm, run the following command:

$ npm install @lemonadejs/color

CDN

To use color picker via a CDN, include the following script tags in your HTML file:

<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/color/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/tabs/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/color/dist/style.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/tabs/dist/style.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />

Usage

Quick example with Lemonade

import Color from "@lemonadejs/color";
import "@lemonadejs/color/dist/style.css"
import "@lemonadejs/tabs/dist/style.css"
import "@lemonadejs/modal/dist/style.css"

export default function App() {
    const self = this;

    return `<Color type="input"/>`;
}

Exemplo usando react

import React, { useRef } from 'react';
import Color from '@lemonadejs/color/dist/react';
import "@lemonadejs/color/dist/style.css"
import "@lemonadejs/tabs/dist/style.css"
import "@lemonadejs/modal/dist/style.css"

export default function App() {
    const color = useRef();
    return (<div>
        <Color type={'inline'} ref={color} />
    </div>);
}

Exemplo usando vue

<template>
    <Color type="inline"/>
</template>

<script>
import Color from '@lemonadejs/color/dist/vue';
import "@lemonadejs/color/dist/style.css"
import "@lemonadejs/tabs/dist/style.css"
import "@lemonadejs/modal/dist/style.css"

export default {
    name: 'App',
    components: {
        Color
    },
}
</script>

Configuration

You can configure things such as color palette, toggle button type, and event management.

Color Picker Properties

PropertyTypeDescription
palette?string[]A matrix containing hexadecimal color values. There is a default palette.
closed?booleanControls the open and close state of the modal.
type?stringThe type of element that will toggle the color picker modal. Options: 'input', 'inline' or empty.
value?stringThe value of the color that is currently selected.

Color Picker Events

EventTypeDescription
onopen?() => voidCalled when modal opens.
onclose?() => voidCalled when modal closes.
onupdate?(instance.value) => voidCalled when value updates.

License

The LemonadeJS Color is released under the MIT.

Other Tools

3.5.0

9 months ago

3.4.3

1 year ago

3.4.1

1 year ago

3.4.0

1 year ago

3.2.3

2 years ago

3.3.1

2 years ago

3.3.0

2 years ago

3.3.2

2 years ago

3.2.2

2 years ago

3.0.3

2 years ago

3.0.2

2 years ago

3.1.0

2 years ago

3.0.5

2 years ago

3.0.0

2 years ago

2.0.0

3 years ago

1.0.0

3 years ago