The component type.

Returns:
• String ('string', 'number', 'text', 'boolean', 'checkbox', 'list', 'button', 'slider', 'range', 'color', 'font', 'ruler', 'menu-entry', 'menu-separator')

The value of the component.

Returns:
• Object

The first value that was set.

Sample code:

var values = {
	number: 30
};
var components = { 
	number: {
		type: 'number'
	}
}; 
var palette = new Palette('Text', components, values);
values.number = 60;
print(components.number.value) // 60
print(components.number.defaultValue) // 30

Returns:
• Object

The name of the component as it is referenced in palette.components.

Returns:
• String

Text label that appears on the left hand side of the component in the palette.

Returns:
• String

Specifies whether the component is visible.

Sample code:

var values = {
	number: 10
};
var components = {
	showNumber: {
		type: 'checkbox', label: 'Show',
		onChange: function(value) {
			components.number.visible = value;
		}
	},
	number: {
		type: 'number', label: 'Number',
		visible: false
	}
};
var palette = new Palette('Show / Hide', components, values);

Returns:
• Boolean — true if the component is visible, false otherwise

Specifies whether the component is enabled. When set to false, the component is grayed out and does not allow user interaction.

Sample code:

var values = {
	canEdit: false,
	text: 'Can you edit me?'
}
var components = { 
	canEdit: {
		type: 'checkbox', label: 'Allow Editing',
		onChange: function(value) {
			components.text.enabled = value;
		}
	},
	text: { 
		type: 'string',
		enabled: false
	}
}; 
var palette = new Palette('Text', components, values);

Returns:
• Boolean — true if the component is enabled, false otherwise

When set to true, the component is stretched over the width of the palette. When no label is set, it also eliminates the margin on the left hand side.

Returns:
• Boolean

The width of the input field in pixels.

Returns:
• Number

The height of the input field in pixels.

Returns:
• Number

The range for the numeric value as an array in the form: [min, max]. The first element in the array defines the allowed minimum amount, the second the maximum amount, both are included in the range.

Sample code:

var values = {
	percentage: 50,
	angle: 180
};
var components = { 
	percentage: { 
		type: 'slider', label: 'Percentage', 
		range: [0, 100]
	}, 
	angle: { 
		type: 'number', label: 'Angle', 
		range: [0, 360]
	}, 
};
var palette = new Palette('Range Examples', components, values);

Returns:
• Array of Number

The minimum amount allowed.

Sample code:

var values = {
	size: 5
};
var components = {
	size: {
		type: 'number', label: 'Size',
		min: 0, steppers: true
	}
};
var palette = new Palette('Minimum Value', components, values);

Returns:
• Number

The maximum amount allowed.

Sample code:

var values = {
	size: 5
};
var components = {
	size: {
		type: 'number', label: 'Size',
		max: 10, steppers: true
	}
};
var palette = new Palette('Maximum Value', components, values);

Returns:
• Number

The amount the steppers increase / decrease the value. Even when steppers are not activated, the user can still use the up/down arrow keys to step by the amount defined by increment.

Sample code:

var values = {
	percentage: 50
};
var components = {
	percentage: {
		type: 'number',
		range: [0, 100],
		steppers: true, increment: 10
	}
};
var palette = new Palette('Increment', components, values);

Returns:
• Number

The amount of digits after the decimal point. If finer grained values are entered, they are rounded to the next allowed number. The default is 3.

Returns:
• Number

The units to be displayed behind the value.

Sample code:

var values = {
	width: 10,
	percentage: 50,
	angle: 180
}
var components = {
	width: {
		type: 'number', label: 'Width',
		units: 'point'
	},
	percentage: {
		type: 'number', label: 'Percentage',
		units: 'percent'
	},
	angle: {
		type: 'number', label: 'Angle',
		units: 'degree'
	}
}
var palette = new Palette('Units Examples', components, values);

Returns:
• String ('none', 'point', 'inch', 'millimeter', 'centimeter', 'pica', 'percent', 'degree', 'pixel')

Activates little stepping arrows on the side of the input field when set to true.

Returns:
• Boolean

The options that the user can choose from in the list component.

Sample code:

var values = {
	fruit: 'Orange'
};
var components = { 
	fruit: { 
		type: 'list', label: 'Fruit',
		options: ['Orange', 'Apple', 'Banana', 'Kiwi']
	} 
};
var palette = new Palette('List Example', components, values);

Returns:
• Array of Object

The index of the selected value in the options array.

Sample code:

var values = {
	fruit: 'Apple'
};
var components = { 
	fruit: { 
		type: 'list', label: 'Fruit',
		options: ['Orange', 'Apple', 'Banana', 'Kiwi']
	} 
};
var palette = new Palette('List Example', components, values);
print(components.fruit.selectedIndex) // 1

Returns:
• Number

The width of the text field in average amount of characters.

Returns:
• Number

The maximum amount of characters that the text field may contain.

Sample code:

var values = {
	name: ''
};
var components = { 
	name: { 
		type: 'string', label: 'Name',
		editable: true, maxLength: 3
	} 
};
var palette = new Palette('Max Length', components, values);
values.name = '123456';
print(values.name) // '123'

Returns:
• Number

Specifies whether the field shows multiple lines of text.

Sample code:

var components = { 
 text: { 
 type: 'text', label: 'Text', 
 value: 'This is a text\nwith multiple lines', 
 multiline: true
 } 
}; 
var palette = new Palette('Text', components);

Returns:
• Boolean

The average amount of characters per line visible in the text area.

Sample code:

var components = { 
 text: { 
 type: 'string',
 value: 'This is a string component\nwith 6 rows and 30 columns', 
 rows: 6, columns: 32
 } 
}; 
var palette = new Palette('Text', components);

Returns:
• Number

The amount of visible lines of text in the text area. Due to a bug in Illustrator's GUI, values below 6 cause problems with scrollbars on Macintosh. The default is 6.

Sample code:

var components = { 
 text: { 
 type: 'string',
 value: 'This is a string component\nwith 6 rows and 30 columns', 
 rows: 6, columns: 30
 } 
}; 
var palette = new Palette('Text', components);

Returns:
• Number

The function that is called whenever the value of the component changes. The function receives the new value as an argument.

Sample code:

var components = { 
	threshold: { 
		type: 'number', label: 'Distance Threshold', 
		units: 'point', 
		onChange: function(value) { 
			print('Threshold was changed to', value);
			tool.distanceThreshold = value;
		} 
	} 
};
var palette = new Palette('title', components);

Returns:
• Function

The function that is called when a button component is clicked.

Sample code:

var components = {
	button: { 
		type: 'button',
		value:'Click Me', label: 'Button',
		onClick: function() {
			print('You clicked me!');
		}
	}
};
var palette = new Palette('Button Component', components);

Returns:
• Function

The function that is called when a popup menu entry is selected.

Sample code:

var components = {
	menuEntry: { 
		type: 'menu-entry',
		value:'Select Me',
		onSelect: function() {
			print('You selected me!');
		}
	}
};
var values = new Palette('Menu Entry', components);

Returns:
• Function

Resets the value of the component to defaultValue.