X-Git-Url: http://review.tizen.org/git/?a=blobdiff_plain;f=docs%2Fcontent%2Fshared-javascript-and-cpp-documentation%2Ftext-label.md;h=98734b2d71f139d3faaf6c046a345cda5cd5eb1f;hb=805ae527fca54726f894fb9936c288c7c0f7dbe7;hp=1b63a42d6859fca6fdb14ade688e7effe30fdcbd;hpb=5c07fde9dd6a022e2080c871994499e56eff89aa;p=platform%2Fcore%2Fuifw%2Fdali-toolkit.git diff --git a/docs/content/shared-javascript-and-cpp-documentation/text-label.md b/docs/content/shared-javascript-and-cpp-documentation/text-label.md index 1b63a42..98734b2 100644 --- a/docs/content/shared-javascript-and-cpp-documentation/text-label.md +++ b/docs/content/shared-javascript-and-cpp-documentation/text-label.md @@ -12,6 +12,8 @@ Text labels are lightweight, non-editable and do not respond to user input. To display a TextLabel the TEXT property must be set using a UTF-8 string. +Note *CR+LF* new line characters are replaced by a *LF* one. + ~~~{.cpp} // C++ @@ -33,7 +35,7 @@ dali.stage.add( label ); ~~~ The label must also be added to the stage, or to an actor which is on the stage. -The position of the label on-screen is dependent on the parent-origin and anchor-point properties. +The position of the label on-screen is dependent on the parentOrigin and anchorPoint properties. | | | |--|--| @@ -43,6 +45,10 @@ The position of the label on-screen is dependent on the parent-origin and anchor By default TextLabel will automatically select a suitable font from the platform. However, a different font could be selected. See the [Font Selection](@ref font-selection) section for more details. +### Mark-up Style + +Mark-up tags can be used to change the style of the text. See the [Mark-up Style](@ref markup-style) section for more details. + ### Text Alignment Wrapping can be enabled using the MULTI_LINE property: @@ -201,8 +207,7 @@ label.textColor = dali.COLOR_RED; #### Drop Shadow -To add a drop-shadow to the text, simply set the SHADOW_OFFSET property with non-zero values. -The color can also be selected using the SHADOW_COLOR property. +To add a drop-shadow to the text, simply set the SHADOW property. Shadow parameters can be set through a json string, see the examples below. ~~~{.cpp} // C++ @@ -212,16 +217,13 @@ stage.SetBackgroundColor( Color::BLUE ); label1.SetProperty( TextLabel::Property::TEXT, "Plain Text" ); label2.SetProperty( TextLabel::Property::TEXT, "Text with Shadow" ); -label2.SetProperty( TextLabel::Property::SHADOW_OFFSET, Vector2( 1.0f, 1.0f ) ); -label2.SetProperty( TextLabel::Property::SHADOW_COLOR, Color::BLACK ); +label2.SetProperty( TextLabel::Property::SHADOW, "{\"offset\":\"1 1\",\"color\":\"black\"}" ); label3.SetProperty( TextLabel::Property::TEXT, "Text with Bigger Shadow" ); -label3.SetProperty( TextLabel::Property::SHADOW_OFFSET, Vector2( 2.0f, 2.0f ) ); -label3.SetProperty( TextLabel::Property::SHADOW_COLOR, Color::BLACK ); +label3.SetProperty( TextLabel::Property::SHADOW, "{\"offset\":\"2 2\",\"color\":\"black\"}" ); label4.SetProperty( TextLabel::Property::TEXT, "Text with Color Shadow" ); -label4.SetProperty( TextLabel::Property::SHADOW_OFFSET, Vector2( 1.0f, 1.0f ) ); -label4.SetProperty( TextLabel::Property::SHADOW_COLOR, Color::RED ); +label4.SetProperty( TextLabel::Property::SHADOW, "{\"offset\":\"1 1\",\"color\":\"red\"}" ); ~~~ ~~~{.js} @@ -233,16 +235,13 @@ label1.text = "Plain Text"; label2.text = "Text with Shadow"; -label2.shadowOffset = [1, 1]; -label2.shadowColor = dali.COLOR_BLACK; +label2.shadow = "{\"offset\":\"1 1\",\"color\":\"black\"}"; label3.text = "Text with Bigger Shadow"; -label3.shadowOffset = [2, 2]; -label3.shadowColor = dali.COLOR_BLACK; +label3.shadow = "{\"offset\":\"2 2\",\"color\":\"black\"}"; label4.SetProperty( TextLabel::Property::TEXT, "Text with Color Shadow" ); -label3.shadowOffset = [1, 1]; -label3.shadowColor = dali.COLOR_RED; +label3.shadow = "{\"offset\":\"1 1\",\"color\":\"red\"}"; ~~~ @@ -310,26 +309,16 @@ label1.underlineHeight = 1; ![ ](../assets/img/text-controls/TextWith1pxUnderline.png) ![ ](TextWith1pxUnderline.png) -### Text Label Properties +### Auto Scrolling + +![ ](../assets/img/text-controls/AutoScroll.gif) +![ ](AutoScroll.gif) - Name (JavaScript) | Name (C++) | Type | Writable | Animatable ----------------------|---------------------|--------------|--------------|----------- - renderingBackend | RENDERING_BACKEND | INTEGER | O | X - text | TEXT | STRING | O | X - fontFamily | FONT_FAMILY | STRING | O | X - fontStyle | FONT_STYLE | STRING | O | X - pointSize | POINT_SIZE | FLOAT | O | X - multiLine | MULTI_LINE | BOOLEAN | O | X - horizontalAlignment | HORIZONTAL_ALIGNMENT| STRING | O | X - verticalAlignment | VERTICAL_ALIGNMENT | STRING | O | X - textColor | TEXT_COLOR | VECTOR4 | O | X - shadowOffset | SHADOW_OFFSET | VECTOR2 | O | X - shadowColor | SHADOW_COLOR | VECTOR4 | O | X - underlineEnabled | UNDERLINE_ENABLED | BOOLEAN | O | X - underlineColor | UNDERLINE_COLOR | VECTOR4 | O | X - underlineHeight | UNDERLINE_HEIGHT | FLOAT | O | X +The \link text-auto-scrolling Auto text scrolling \endlink section details how to scroll text automatically. +### Text Label Properties +The properties used by TextLabel are listed [here](@ref TextLabelProperties) @class TextLabel