[TAU] modify description of button icon option
authorhagun.kim <hagun.kim@samsung.com>
Fri, 4 Mar 2016 07:30:00 +0000 (16:30 +0900)
committerhagun.kim <hagun.kim@samsung.com>
Fri, 4 Mar 2016 08:17:34 +0000 (17:17 +0900)
The description of button icon option is modified.
SPIN JIRA : DOC-252

Change-Id: Iddf64217a66cc053a01a44e5b2750c6200ee5559
Signed-off-by: hagun.kim <hagun.kim@samsung.com>
org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm

index 2bcaed4..84664a1 100644 (file)
@@ -97,7 +97,16 @@ In addition, all elements with the <code>class=&quot;ui-btn&quot;</code> and <co
                                <td class="option"><span style="font-family: Courier New,Courier,monospace">data-icon</span></td>
                                <td class="option">string | null</td>
                                <td class="option">null</td>
-                               <td class="option">Icon type.</td>
+                               <td class="option">
+                                       If you use this option, a class "ui-icon-" is added.
+                                       <br>For example, data-icon="delete" adds a class "ui-icon-delete".
+                                       <br><b>NOTE: The image resources for icon are not provided by TAU.</b>
+                                       <br>To insert an image resource, you should use <i>-webkit-mask-image</i> css property to the <i>::after</i> pseudo element of the button.
+                                       <br><br><b>CSS example :</b>
+                                       <br>.ui-icon-delete::after {
+                                       <br>&nbsp;&nbsp;&nbsp;-webkit-mask-image: url(<i>'image file path'</i>);
+                                       <br>}
+                               </td>
                        </tr>
                
                        <tr>
@@ -115,12 +124,12 @@ In addition, all elements with the <code>class=&quot;ui-btn&quot;</code> and <co
                                <td class="option">If the value is <code>true</code>, the button has the <code>display = &quot;inline&quot;</code> CSS property.</td>
                        </tr>
 
-            <tr>
-                <td class="option"><span style="font-family: Courier New,Courier,monospace">data-disabled</span></td>
-                <td class="option">boolean</td>
-                <td class="option">false</td>
-                <td class="option">If the value is <code>true</code>, the button has disabled status.</td>
-            </tr>
+                       <tr>
+                               <td class="option"><span style="font-family: Courier New,Courier,monospace">data-disabled</span></td>
+                               <td class="option">boolean</td>
+                               <td class="option">false</td>
+                               <td class="option">If the value is <code>true</code>, the button has disabled status.</td>
+                       </tr>
 
                        <tr>
                                <td class="option"><span style="font-family: Courier New,Courier,monospace">data-style</span></td>