SharePoint Framework (SPFx) Tab Control (react)

Hi Friends,

This time I have worked upon a tab control which is still missing from Microsoft sample collection. I personally felt this tab control webpart can be of use in many scenarios.


I have used the Rich Text editor for the implementation, where whenever a new tab is added , the text editor automatically gets associated with the tab. Since it is the rich text editor so you can do almost everything you want to display with all the custom formatting options available.

Source Code on GitHub

Features !

  • No configuration for the webpart to use
  • Safe and fast as there is no external saving of data
  • Rich Text editor increases lot of possibilities how you use it
  • Light weight control

Installation

$ npm install
$ gulp clean
$ gulp bundle --ship
$ gulp package-solution --ship

Below are some of the images that demonstrates the webpart.


View Mode

SharePoint Framework (SPFx) Tab Control (react)

Edit Mode

SharePoint Framework (SPFx) Tab Control (react)

Please provide your comments , if you need any more feature or how you like the control.

Happy Coding
Sumit Kanchan
#SharePointWidgets #SharePointFramework



Comments

  1. Hi, is it possible to change the control to use React Boostrap Tab?

    ReplyDelete
    Replies
    1. Yes of course you can do, but there might be change in some code for it to be fully functional

      Delete
    2. i tried to change the rich text to use pnp spfx controls rich text instead of react-rte, but it seems like its not working at all. can you specify which part of the code that require to be change? Thanks :)

      Delete
    3. I will get on this to you in couple of day as I need to look into the code again

      Delete
    4. Hi Shah,

      Please replace the RichTextEditor control with the one you want to use and pass on the corresponding parameters as per your control. in tab.tsx file

      Delete
  2. hi, your web part is working really well. however, i realized that the web part wont work in IE. Is there any configurations need to be done?

    And is it possible to use pnp spfx controls rich text editor?

    ReplyDelete
    Replies
    1. Hi Luke, SPFx has issues while using the IE, I have not checked with IE, i'll have a look and then will let you know if something can be done

      Delete
    2. Hi Sumit,

      Web part is working really well, but I need nested tabs, can I change the code?

      Delete
  3. Hello, any progress with the IE issue?

    ReplyDelete

Post a Comment

Popular posts from this blog

Rename Folder using Microsoft Flow / Power Automate in a Document Library in SharePoint Online

Power Automate: How to Add "New Line" to the text in SharePoint multiline text field

Power Automate: Rename file in SharePoint Online