Adaptive Cards Fabric
This package "lights-up" the Adaptive Card renderer with Office Fabric UI input controls.

Extended Controls
Install
npm install adaptivecards-fabric
NOTE: you must also install the necessary peer dependencies:
- adaptivecards
- @fluentui/react
- react
- react-dom
Usage
Import the module
import * as AdaptiveCards from "adaptivecards";
import * as ACFabric from "adaptivecards-fabric";
Render a card
let card = {
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "Image",
"url": "https://adaptivecards.io/content/adaptive-card-50.png"
},
{
"type": "TextBlock",
"text": "Hello **Adaptive Cards!**"
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "Learn more",
"url": "https://adaptivecards.io"
},
{
"type": "Action.OpenUrl",
"title": "GitHub",
"url": "https://github.com/Microsoft/AdaptiveCards"
}
]
};
let adaptiveCard = new AdaptiveCards.AdaptiveCard();
ACFabric.useFabricComponents();
adaptiveCard.hostConfig = new AdaptiveCards.HostConfig({
fontFamily: "Segoe UI, Helvetica Neue, sans-serif"
});
adaptiveCard.onExecuteAction = function(action) { alert("Ow!"); }
adaptiveCard.parse(card);
let renderedCard = adaptiveCard.render();
document.body.appendChild(renderedCard);