object gui

Readme in: Indonesian Readme in: Deutsch Readme in: Hebräisch Readme in: Spanisch Readme in: Portugiesisch

Objekt -GUI - JavaScript -Objekt -Editor

Die Objekt -GUI ist Ihr vollständig anpassbarer JavaScript -Objekt -GUI -Editor

Verwendung

Sie können hier ein funktionierendes Beispiel sehen

Installation

HTML / Vanille JS

Sie müssen diese Dateien einfügen:

CSS

https://cdn.jsdelivr.net/npm/object-gui@2/dist/css/object-gui.css

JavaScript

https://cdn.jsdelivr.net/npm/object-gui@2/dist/js/object-gui.min.js

ES 6 Importe

 import { Editor } from "object-gui" ; 

CommonJS / Node.js

 const Editor = require ( "object-gui" ) ;

Verwendung

 const code = document . getElementById ( "code" ) ;

const data = {
  prop1 : "pluto" ,
  prop2 : 3 ,
  group1 : {
    prop1 : "paperino" ,
    prop2 : 0.3 ,
  } ,
  color1 : "#ff0000" ,
  select1 : "Item 2" ,
  alert : function ( ) {
    alert ( JSON . stringify ( data , null , 4 ) ) ;
  } ,
} ;

const editor = new Editor ( "sample" , "Sample" , ( ) => data ) ;

editor . top ( ) . right ( ) ;
editor . theme ( "light" ) ;

const group1 = editor . root . addGroup ( "group1" , "Group 1" , true ) ;

group1 . addProperty ( "prop1" , "Property 1" , "string" ) . change ( ( ) => {
  console . log ( data ) ;
} ) ;

group1
  . addProperty ( "prop2" , "Property 2" , "number" )
  . min ( 0 )
  . max ( 1 )
  . step ( 0.01 )
  . change ( ( ) => {
    console . log ( data ) ;
  } ) ;

editor . root . addProperty ( "prop1" , "Property 1" , "string" ) . change ( ( ) => {
  console . log ( data ) ;
} ) ;

editor . root
  . addProperty ( "prop2" , "Property 2" , "number" )
  . min ( 0 )
  . max ( 10 )
  . step ( 0.5 )
  . change ( ( ) => {
    console . log ( data ) ;
  } ) ;

editor . root . addProperty ( "color1" , "Color 1" , "color" ) . change ( ( ) => {
  console . log ( data ) ;
} ) ;

const select1Input = editor . root . addProperty ( "select1" , "Select 1" , "select" ) . change ( ( ) => {
  code . innerText = JSON . stringify ( data , null , 4 ) ;

  console . log ( data ) ;
} ) ;

select1Input . addItem ( "Item 1" ) ;
select1Input . addItem ( "Item 2" ) ;
select1Input . addItem ( "Item 3" ) ;

editor . root . addButton ( "alert" , "Alert" ) ;

code . innerText = JSON . stringify ( data , null , 4 ) ;