Toggle ====== ``Toggle`` component creates a Toggle element in the sidebar content. It will emit 'change' event that user can subscribe to using ``INKAPI.addEvent``. 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: "Toggle", id: "mytgl", defaultValue: false, }, ], }); 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 | ``Input`` | This field should be passed ``Toggle`` as value to create a toggle component. This value is case-sensitive. | +---------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | defaultValue? | ``Boolean`` | Default value for the toggle element. | +---------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | styles? | ``Object`` | Custom styles for the element. | +---------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ Shadow Methods ++++++++++++++ +----------------+-----------------------------+---------------------------------------------------------------------------------------------------------------------------------+ | Methods | Arguments | Description | +================+=============================+=================================================================================================================================+ | getValue | ``none`` | This function is used to get the current value of the component. | +----------------+-----------------------------+---------------------------------------------------------------------------------------------------------------------------------+ Events ++++++ +-----------------------+---------------------------------------------------------------------------------------------------------------------------------+ | Event Keyword | Description | +=======================+=================================================================================================================================+ | change | This event is triggered when the toggle value is changed. | +-----------------------+---------------------------------------------------------------------------------------------------------------------------------+ .. note:: To learn more about shadow methods and shadow objects, please refer `here <./custom-ui-intro.html#shadow-ui-objects>`_.