Text
====

``Text`` component can be used to add some text content in your sidebar.

Example
+++++++

.. code-block:: javascript
    :linenos:

    import INKAPI from './inkapi.js'

    INKAPI.ready(async () => {

      const UI = INKAPI.ui;

      const sidebarObj = await UI.create({
        type: "Sidebar",
        sidebarTitle: "Personal Sidebar",
        icon: "./sample.svg",
        children: [``
          {
            type: "Text",
            id: "myTxt",
            text: "This is a special message.",
            styles: {
              "color": "#777",
            }
          },
        ],
      });

      console.log(sidebarObj);

    });


Options
+++++++

+--------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| Name         | Type                                   | Description                                                                                                                                                                                                                                                                                         |
+==============+========================================+=====================================================================================================================================================================================================================================================================================================+
| id?          | ``String | Number``                    | You can assign a unique id to the component. It will be helpful for listening to events and removing component in future. If ``id`` is not given by user (or if given ``id`` is already associated with a UI component) then an automatically generated id is assigned to the component.            |
+--------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| type         | ``Text``                               | This field should be passed ``Text`` as value to create a Text component. This value is case-sensitive.                                                                                                                                                                                             |
+--------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| text         | ``String``                             | Text content for the component.                                                                                                                                                                                                                                                                     |
+--------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| styles?      | ``Object``                             | Custom styles for the element.                                                                                                                                                                                                                                                                      |
+--------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+

Shadow Methods
++++++++++++++

+----------------+-----------------------------+---------------------------------------------------------------------------------------------------------------------------------+
| Methods        | Arguments                   | Description                                                                                                                     |
+================+=============================+=================================================================================================================================+
| changeText     | newText: ``String``         | This function is used to update text content of the Text component.                                                             |
+----------------+-----------------------------+---------------------------------------------------------------------------------------------------------------------------------+
| setStyles      | styles: ``Object``          | Update your Text component styles using this function.                                                                          |
+----------------+-----------------------------+---------------------------------------------------------------------------------------------------------------------------------+


.. note::
  To learn more about shadow methods and shadow objects, please refer `here <./custom-ui-intro.html#shadow-ui-objects>`_.