Skip to content
Scott Cummings edited this page Oct 31, 2013 · 3 revisions

Page Element Text Area

Properties

  • type [String] - value is always "TextArea" for a Text Area Element
  • x [Number/String] - x coordinate of the top-left hand corner of the text area. This can be either a number (e.g. 10) which will be considered a percentage, a string with percentage (e.g. 10%), or a string with pixels (e.g. 75px)
  • y [Number/String] - y coordinate of the top-left hand corner of the text area. This can be either a number (e.g. 10) which will be considered a percentage, a string with percentage (e.g. 10%), or a string with pixels (e.g. 75px)
  • width [Number/String] - width the text area. This can be either a number (e.g. 10) which will be considered a percentage, a string with percentage (e.g. 10%), or a string with pixels (e.g. 500px)
  • align [String] - available values are "center", "left" or "right"
  • color [CSS Color String] - text color
  • size [CSS Color String] - font size
  • font [String] - font family
  • text [String/Array] - the text can be specified as a string or an array of strings. If the value is an array, each string in the array will be inserted into a paragraph element inside the text area.
  • paragraphSpacing [String] - the distance between paragraphs.

###Example JSON Config Definition

  • Single Paragraph Example { type: "TextArea", x: 0, y: 25, align: "center", color: "#222222", size: 48, font: "Droid Serif", text: "This is example text." }

  • Multi-Paragraph Example { type: "TextArea", x: 14, y: 40, width: 72, align: "left", color: "#222222", size: 24, paragraphSpacing: "40px", font: "Droid Serif", text: [ "This is the first paragraph.", "This is the second paragraph. It will appear below the first paragraph." ] }

###Examples

Technical

  • Filename - textArea.js
  • JavaScript Object - PBS.KIDS.storybook.textArea
  • Object Parameters -- GLOBAL -- PBS -- options
Clone this wiki locally