Card

less than 1 minute read

References

TypeScript

import { Components } from "gd-sprest-bs";

// Create the card
let el = document.querySelector("#card");
let card = Components.Card({
    el: el,
    body: [
        {
            title: "Card Title",
            text: "This is the card contents.",
            actions: [
                {
                    text: "Card Action",
                    buttonType: $REST.Components.ButtonTypes.Primary
                }
            ]
        }
    ]
});

React

import * as React from "react";
import { Card, Components } from "gd-sprest-bsx";

export class IDemo extends React.Component {
    // Render the component
    render() {
        return (
            <Card
                body={[
                    {
                        title: "Card Title",
                        text: "This is the card contents.",
                        actions: [
                            text: "Card Action",
                            buttonType: Components.ButtonTypes.Primary
                        ]
                    }
                ]}
            />
        );
    }
}

VueJS

<template>
    <Card v-bind:body="body" />
</template>

<script>
import { Card } from "gd-sprest-bs-vue";
export default {
    components: { Card },
    data() {
        return {
            body: [
                {
                    title: "Card Title",
                    text: "This is the card contents.",
                    actions: [
                        text: "Card Action",
                        buttonType: Components.ButtonTypes.Primary
                    ]
                }
            ]
        };
    }
}
</script>

Code Playground