office-ui-fabric-react/lib-amd/components/Image/ImagePage.js

Reusable React components for building experiences for Office 365.

define(["require", "exports", "tslib", "react", "@uifabric/example-app-base", "./examples/Image.Default.Example", "./examples/Image.Center.Example", "./examples/Image.Contain.Example", "./examples/Image.Cover.Example", "./examples/Image.None.Example", "./examples/Image.MaximizeFrame.Example", "../../demo/ComponentStatus/ComponentStatus", "./Image.checklist", "./ImagePage.scss"], function (require, exports, tslib_1, React, example_app_base_1, Image_Default_Example_1, Image_Center_Example_1, Image_Contain_Example_1, Image_Cover_Example_1, Image_None_Example_1, Image_MaximizeFrame_Example_1, ComponentStatus_1, Image_checklist_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var ImageDefaultExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.Default.Example.tsx');
    var ImageCenterExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.Center.Example.tsx');
    var ImageContainExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.Contain.Example.tsx');
    var ImageCoverExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.Cover.Example.tsx');
    var ImageNoneExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.None.Example.tsx');
    var ImageMaximizeFrameExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.MaximizeFrame.Example.tsx');
    var ImagePage = /** @class */ (function (_super) {
        tslib_1.__extends(ImagePage, _super);
        function ImagePage() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        ImagePage.prototype.render = function () {
            return (React.createElement(example_app_base_1.ComponentPage, { title: 'Image', componentName: 'ImageExample', exampleCards: React.createElement("div", null,
                    React.createElement(example_app_base_1.ExampleCard, { title: 'ImageFit: Not specified', code: ImageDefaultExampleCode },
                        React.createElement(Image_Default_Example_1.ImageDefaultExample, null)),
                    React.createElement(example_app_base_1.ExampleCard, { title: 'ImageFit: None', code: ImageNoneExampleCode },
                        React.createElement(Image_None_Example_1.ImageNoneExample, null)),
                    React.createElement(example_app_base_1.ExampleCard, { title: 'ImageFit: Center', code: ImageCenterExampleCode },
                        React.createElement(Image_Center_Example_1.ImageCenterExample, null)),
                    React.createElement(example_app_base_1.ExampleCard, { title: 'ImageFit: Contain', code: ImageContainExampleCode },
                        React.createElement(Image_Contain_Example_1.ImageContainExample, null)),
                    React.createElement(example_app_base_1.ExampleCard, { title: 'ImageFit: Cover', code: ImageCoverExampleCode },
                        React.createElement(Image_Cover_Example_1.ImageCoverExample, null)),
                    React.createElement(example_app_base_1.ExampleCard, { title: 'Maximizing the image frame', code: ImageMaximizeFrameExampleCode },
                        React.createElement(Image_MaximizeFrame_Example_1.ImageMaximizeFrameExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
                        require('!raw-loader!office-ui-fabric-react/src/components/Image/Image.types.ts')
                    ] }), overview: React.createElement("div", null, "Images render an image. The borders have been added to these examples in order to help visualize empty space in the image frame."), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
                    React.createElement("ul", null,
                        React.createElement("li", null,
                            "Provide descriptive values for the alt text attribute for all images. If alt text isn't provided for images, the image information is inaccessible, for example, to people who cannot see and use a screen reader that reads aloud the information on a page.",
                            React.createElement("ul", null,
                                React.createElement("li", null, "Consider context. If the image represents a function, be sure to indicate that. If it is to be consumed with other objects on the page, consider that as well."),
                                React.createElement("li", null, "Make the description brief but accurate. Use one sentence, two at the most."))))), donts: React.createElement("div", null,
                    React.createElement("ul", null,
                        React.createElement("li", null, "Repeat information in your alt text that is already on the page. Don't use \"image of\" or \"graphic of\" to describe it, as that is already apparent to the reader."))), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus_1.ComponentStatus, tslib_1.__assign({}, Image_checklist_1.ImageStatus)) }));
        };
        return ImagePage;
    }(React.Component));
    exports.ImagePage = ImagePage;
});
//# sourceMappingURL=ImagePage.js.map