-
Notifications
You must be signed in to change notification settings - Fork 25
Text area
Scott Cummings edited this page Oct 31, 2013
·
3 revisions
- 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
- See Example Storybook Page 2-4
- Example Screenshot (Example Storybook Page 3 and 4)
-
Filename -
textArea.js
-
JavaScript Object -
PBS.KIDS.storybook.textArea
-
Object Parameters
--
GLOBAL
--PBS
--options