# adaptivecards-fabric

> Adaptive Cards Office Fabric based extension

Latest version **1.1.2** (published 2021-03-03) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install adaptivecards-fabric
pnpm add adaptivecards-fabric
yarn add adaptivecards-fabric
bun add adaptivecards-fabric
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2021-03-03 |
| First published | 2019-07-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 326.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1967 |
| Author | AdaptiveCards |
| Maintainers | adaptivecards |
| Keywords | adaptivecards, adaptive, cards, microsoft, bot |

## Links

- npm: https://www.npmjs.com/package/adaptivecards-fabric
- Repository: https://git@github.com/microsoft/AdaptiveCards
- Homepage: https://adaptivecards.io
- Issues: https://github.com/microsoft/AdaptiveCards/issues
- npm.io page: https://npm.io/package/adaptivecards-fabric

## Recent versions

- 1.1.2 (latest) — 2021-03-03
- 1.1.1 — 2020-10-01
- 1.1.0 — 2020-08-05
- 1.0.5 — 2020-07-07
- 1.0.4 — 2020-01-13
- 1.0.3 — 2019-07-09
- 1.0.2 — 2019-07-02
- 1.0.1 — 2019-07-02
- 1.0.0 — 2019-07-02

## README

# Adaptive Cards Fabric

This package "lights-up" the Adaptive Card renderer with [Office Fabric UI](https://developer.microsoft.com/en-us/fabric#/controls/web) input controls.

![Adaptive cards fabric animation](https://raw.githubusercontent.com/microsoft/AdaptiveCards/main/source/nodejs/adaptivecards-fabric/adaptivecards-fabric.gif)


## Extended Controls

| AdaptiveCard Element | Office Fabric UI Control |
|------------------------|--------------------------|
| Input.Date             |[DatePicker](https://developer.microsoft.com/en-us/fabric#/controls/web/datepicker)|
| Input.Number, Input.Text, Input.Time|[TextField](https://developer.microsoft.com/en-us/fabric#/controls/web/textfield)|
| Input.Toggle           |[Toggle](https://developer.microsoft.com/en-us/fabric#/controls/web/toggle)|
| Input.ChoiceSet (style:compact)|[Dropdown](https://developer.microsoft.com/en-us/fabric#/controls/web/dropdown)|
| Input.ChoiceSet (style:expanded, isMultiSelect:false)|[ChoiceGroup](https://developer.microsoft.com/en-us/fabric#/controls/web/choicegroup)|
| Input.ChoiceSet (style:expanded, isMultiSelect:true)|[Checkbox](https://developer.microsoft.com/en-us/fabric#/controls/web/checkbox)|
| Actions                |[Button](https://developer.microsoft.com/en-us/fabric#/controls/web/button)|

## Install

```console
npm install adaptivecards-fabric
```

**NOTE**: you must also install the necessary peer dependencies:

* adaptivecards
* @fluentui/react
* react
* react-dom

## Usage

### Import the module

```js
// Import modules:
import * as AdaptiveCards from "adaptivecards";
import * as ACFabric from "adaptivecards-fabric";
```

### Render a card

```js
// Author a card
// In practice you'll probably get this from a service
// see http://adaptivecards.io/samples/ for inspiration
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"
        }
    ]
};

// Create an AdaptiveCard instance
let adaptiveCard = new AdaptiveCards.AdaptiveCard();

// Use Fabric controls when rendering Adaptive Cards
ACFabric.useFabricComponents();

// Set its hostConfig property unless you want to use the default Host Config
// Host Config defines the style and behavior of a card
adaptiveCard.hostConfig = new AdaptiveCards.HostConfig({
    fontFamily: "Segoe UI, Helvetica Neue, sans-serif"
    // More host config options
});

// Set the adaptive card's event handlers. onExecuteAction is invoked
// whenever an action is clicked in the card
adaptiveCard.onExecuteAction = function(action) { alert("Ow!"); }

// Parse the card payload
adaptiveCard.parse(card);

// Render the card to an HTML element:
let renderedCard = adaptiveCard.render();

// And finally insert it somewhere in your page:
document.body.appendChild(renderedCard);
```

---
_Source: https://npm.io/package/adaptivecards-fabric · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._