[docs] updated bg-color property in tabs (ToolJet#3765)

* updated bg color in tabs * update description
yellowflash2041 · Aug 8, 2022 · 9b17fd2 · 9b17fd2
1 parent 6ea6215
commit 9b17fd2
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git a/docs/docs/tutorial/keyboard-shortcuts.md b/docs/docs/tutorial/keyboard-shortcuts.md
@@ -35,9 +35,9 @@ Now you can create multiple clones of any widget without having to drag and drop
 
 Now you can delete a selected widget by using the following shortcut keys:
 
-**On Mac:** `backspace`
+**On Mac:** `delete`
 
-**On Linux/Windows:** `delete`
+**On Linux/Windows:** `backspace`
 
 ## Unselect the selected widget
 

diff --git a/docs/docs/widgets/tabs.md b/docs/docs/widgets/tabs.md
@@ -5,7 +5,7 @@ title: Tabs
 
 # Tabs
 
-A Tabs widget contains a number of defined containers that can be navigated through the tabs. Each tab acts as a <a href="https://docs.tooljet.com/docs/widgets/tabs/" target="_blank">container</a> that can have different widgets placed inside it.
+A Tabs widget contains a number of defined containers that can be navigated through the tabs. Each tab acts as a [container](/docs/widgets/container/) that can have different widgets placed inside it.
 
 ## How To Use Tabs Widget
 
@@ -17,7 +17,31 @@ A Tabs widget contains a number of defined containers that can be navigated thro
 
 This property lets you add and remove containers from the tabs widget. Each container in the tab has its unique `id` , `title` and `disabled` for disabling individual tabs . This field expects an array of objects.
 
-`{{[ { title: 'Home', id: '0' }, { title: 'Profile', id: '1',disabled:'true' }, { title: 'Settings', id: '2' } ]}}`
+```js
+{{[
+    { title: 'Home', id: '0' },
+    { title: 'Profile', id: '1',disabled:'true' },
+    { title: 'Settings', id: '2' }
+]}}
+```
+
+#### Adding background color to Tabs
+
+You can specify the different color for each tab using the `backgroundColor` property and use hex color code or color name as the value.
+
+```js
+{{[ 
+		{ title: 'Home', id: '0', backgroundColor: '#81D4FA' }, 
+		{ title: 'Profile', id: '1', backgroundColor: 'blue' }, 
+		{ title: 'Settings', id: '2', backgroundColor: '#ecf0f1'} 
+ ]}}
+```
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Tabs Widget](/img/widgets/tabs/tabsbg.png)
+
+</div>
 
 ### Default tab
 

diff --git a/docs/static/img/widgets/tabs/tabsbg.png b/docs/static/img/widgets/tabs/tabsbg.png