Property Sheet UI Widget

PropertySheet is an editable and configurable list of properties. This component can be used in visual editors that allow users to change the look and behavior of the components and instantly see the results.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Samples of PHP, Node.js, .NET integration
  • Cross-browser Support (IE8+)
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

Overview

You can manipulate the elements of Property Sheet in the same way as you do it with Form or HTMLForm elements. Besides, this widget is able to display complex values.

Editing Data

According to the nature of a property that you're going to change, Property Sheet provides you with the possibility to use different editing modes. If you want to change a simple numeric value, a simple text editor should be used. If your goal is to change the color value, Property Sheet will allow you to pick a particular color from a pop-up Colorboard.

Click on any value to edit it. Then click the 'Submit' button

Adding New Editor Types

If the default editing modes aren't enough for your needs, you can register custom editors. For example, instead of text or select editors you can create a toggle button that changes its value by clicking on it.