Skip to content

How to use Color Lib

Jump to bottom
o5faruk edited this page May 2, 2021 · 2 revisions

⚠️⚠️⚠️

This sdk documentation is deprecated and will not be updated. Check out our new docs at https://sdk.buildfire.com/docs/color-lib/

⚠️⚠️⚠️

Description

Color library is used to generate Gradient/Solid Colors.

buildfire.colorLib.showDialog(data, options, onchange, callback);

This builtin dialog helps you, to manage the colors for your plugin. To open color Lib, you need to use buildfire.

arguments

  • data: object

    • colorType: string, Specifies color type ("solid","gradient"), (Default: "gradient")

    • gradient: object

        {
      colors: [{color: "#COLOR_NUMBER",percentage: 0-100, opacity: 0-100}]
      ,gradientType: string, you can choose on of the following: ("to bottom","to right","to top left","to top right","to top","to left","to bottom left","to bottom right")
      ,backgroundCSS: string, "CSS Ready to use as background color"
  }

    • solid: object

        {
      color: "#COLOR_NUMBER"
      ,opacity: 0-100
      ,backgroundCSS : "CSS Ready to use as background color"
      ,colorCSS : "css Ready to use as font color"
  }

  • options: object

    • backdrop: bool, Specifies if you want to show the backdrop for the dialog (Default: true)
    • position string, Specifies the dialog position, you can choose either "left" or "right" (Default: "center")
    • hideGradient: bool, Specifies if you want to hide the Gradient UI (Default: false)
    • hideSolid: bool, Specifies if you want to hide the Solid UI (Default: false)

  • onchange(err,result): function will be invoked on any changes happening on color lib dialog

    • result: object

      • colorType: string, Specifies color type (solid, gradient), (Default: gradient)

      • gradient: object

              {
          colors: [{color: "#COLOR_NUMBER",percentage: 0-100, opacity: 0-100}]
          ,gradientType: string, one of the following:("to bottom","to right","to top left","to top right","to top","to left","to bottom left","to bottom right")
          ,backgroundCSS: string, CSS Ready to use as background color
      }

      • solid: object

              {
          color: string, #COLOR_NUMBER
          ,opacity: integer, 0-100
          ,backgroundCSS : string, CSS Ready to use as background color
          ,colorCSS : string, css Ready to use as font color
      }

  • callback(err,result): function will be invoked after close the dialog, on save the result will be the new value, but on cancel the result will be the old value

    • result: object

      • colorType: string, Specifies color type (solid, gradient), (Default: gradient)

      • gradient: object

          {
      colors: [{color: "#COLOR_NUMBER",percentage: 0-100, opacity: 0-100}]
      ,gradientType: string, one of the following:("to bottom","to right","to top left","to top right","to top","to left","to bottom left","to bottom right")
      ,backgroundCSS: string, CSS Ready to use as background color
  }

      • solid: object

          {
      color: string, #COLOR_NUMBER
      ,opacity: integer, 0-100
      ,backgroundCSS : string, CSS Ready to use as background color
      ,colorCSS : string, css Ready to use as font color
  }

Example:


var options = { backdrop : false, position:"left"};
var data = {};

var callback=function(error,result){
  //save the result
};
var onchange=function(error,result){
  //you can show how it looks like on live
};

buildfire.colorLib.showDialog(data,options,onchange, callback);

portal . twitter . facebook

Clone this wiki locally