SPFx - Using UI Fabric Core Controls without React Framework

Question

Just wanted to check If I am not missing something. I wanted to use Office UI Fabric core controls on SPFx webpart without React component. So basically I have option to use SP Fabric Core.

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/office-ui-fabric-integration#office-ui-fabric-core-package

To Use Fabric core, we need to add below package in SPFx project.

npm install @microsoft/sp-office-ui-fabric-core --save

Then i can import

@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';

Once I have required scss file and say suppose I want to create grid I can use below

<div class="ms-Grid" dir="ltr">
  <div class="ms-Grid-row">
    <div class="ms-Grid-col ms-sm6 ms-md4 ms-lg2">A</div>
    <div class="ms-Grid-col ms-sm6 ms-md8 ms-lg10">B</div>
  </div>
</div>

Now What If i wanted to use Fabric controls like button, textbox and others in my SPFx Webpart in render method. When we go to highlighted link in below screenshot it takes us to React component example. But all the examples on this link only provide information on how to use with React framework. I wanted to use this controls on No javascript framework on SPFx webpart.

Basically I was looking to use controls only by Using Fabric UI Core.

Can someone please advise ?

Answer 1

In Fabric core, you will not get the Fabric controls. For that you have to use Fabric React