Media List

Documentation

JavaScript

var $REST = require("gd-sprest-bs");

// Create the media list object
var el = document.querySelector("#media");
var media = $REST.Components.MediaList({
    el: el,
    items: [
        {
            icon: {
                icon: $REST.IconTypes.BootstrapReboot,
                className: "mr-3"
            },
            body: "<h5>Default Item</h5>This is the default media object."
        },
        {
            icon: {
                icon: $REST.IconTypes.Bootstrap,
                className: "mr-3",
                type: $REST.Components.MediaImageTypes.Top
            },
            body: "<h5>Top Aligned Item</h5>This is an example of a media object."
        },
        {
            icon: {
                icon: $REST.IconTypes.BootstrapFill,
                className: "mr-3",
                type: $REST.Components.MediaImageTypes.Center
            },
            body: "<h5>Center Aligned Item</h5>This is an example of a media object."
        },
        {
            icon: {
                icon: $REST.IconTypes.BootstrapReboot,
                className: "mr-3",
                type: $REST.Components.MediaImageTypes.Bottom
            },
            body: "<h5>Bottom Aligned Item</h5>This is an example of a media object."
        },
        {
            icon: {
                icon: $REST.IconTypes.Bootstrap,
                className: "mr-3"
            },
            body: "<h5>Right Aligned Item</h5>This is an example of a media object.",
            order: $REST.Components.MediaOrderTypes.Right
        }
    ]
});

TypeScript

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

// Create the media list object
let el = document.querySelector("#media");
let media = Components.MediaList({
    el,
    items: [
        {
            icon: {
                icon: IconTypes.BootstrapReboot,
                className: "mr-3"
            },
            body: "<h5>Default Item</h5>This is the default media object."
        },
        {
            icon: {
                icon: IconTypes.Bootstrap,
                className: "mr-3",
                type: Components.MediaImageTypes.Top
            },
            body: "<h5>Top Aligned Item</h5>This is an example of a media object."
        },
        {
            icon: {
                icon: IconTypes.BootstrapFill,
                className: "mr-3",
                type: Components.MediaImageTypes.Center
            },
            body: "<h5>Center Aligned Item</h5>This is an example of a media object."
        },
        {
            icon: {
                icon: IconTypes.BootstrapReboot,
                className: "mr-3",
                type: Components.MediaImageTypes.Bottom
            },
            body: "<h5>Bottom Aligned Item</h5>This is an example of a media object."
        },
        {
            icon: {
                icon: IconTypes.Bootstrap,
                className: "mr-3"
            },
            body: "<h5>Right Aligned Item</h5>This is an example of a media object.",
            order: Components.MediaOrderTypes.Right
        }
    ]
});

Web Component

The media object and icons haven’t been incorporated with the web component library. This will be done in future builds.