@ohu-mobile/core/lib/Badge/Badge.stories.js

Mobile UI Toolkit

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Position = exports.Basic = void 0;
var _HomeOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/HomeOutlined"));
var _UserOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/UserOutlined"));
var _vue = _interopRequireDefault(require("vue"));
var _index = _interopRequireDefault(require("./index"));
require("./style");
var _Card = _interopRequireDefault(require("../Card"));
require("../Card/style");
var _Icon = _interopRequireDefault(require("../Icon"));
require("../Icon/style");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = {
  title: 'Components/Basic/Badge',
  parameters: {
    component: _index.default,
    options: {
      showPanel: true
    }
  }
};
var Position = exports.Position = function Position() {
  return _vue.default.extend({
    render: function render() {
      var h = arguments[0];
      var container = h("div", {
        "style": "width: 200px;height: 80px;border: 1px solid #eee;"
      });
      return h("div", [h(_index.default, {
        "attrs": {
          "type": "corner",
          "color": "gold",
          "text": "推荐"
        },
        "style": "border-radius: 6px;"
      }, [container]), h(_index.default, {
        "attrs": {
          "type": "corner",
          "color": "blue",
          "position": "up-left",
          "text": "听诊"
        }
      }, [container]), h(_index.default, {
        "attrs": {
          "type": "corner",
          "color": "red",
          "position": "down-left",
          "text": "已满"
        }
      }, [container]), h(_index.default, {
        "attrs": {
          "type": "corner",
          "position": "down-right",
          "text": "已满",
          "fontColor": "yellow",
          "color": "red"
        }
      }, [container])]);
    }
  });
};
var Basic = exports.Basic = function Basic() {
  return _vue.default.extend({
    render: function render() {
      var h = arguments[0];
      return h("div", {
        "style": "padding: 10px;"
      }, [h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_index.default, {
        "attrs": {
          "type": "tag",
          "text": "New"
        }
      })]), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["Tag"]), h(_index.default, {
        "attrs": {
          "type": "tag",
          "color": "orange",
          "text": "1"
        },
        "style": "margin-right: 30px;"
      }, [h("div", {
        "style": "width: 40px; height: 40px; background: #eee;"
      })]), h(_index.default, {
        "attrs": {
          "type": "tag",
          "text": 999
        },
        "style": "font-size: 24px; margin-right: 30px;"
      }, [h(_Icon.default, {
        "attrs": {
          "type": _UserOutlined2.default
        }
      })]), h(_index.default, {
        "attrs": {
          "type": "tag",
          "color": "blue",
          "text": 999
        },
        "style": "font-size: 24px;"
      }, [h(_Icon.default, {
        "attrs": {
          "type": _HomeOutlined2.default
        }
      })])]), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["Dot"]), h(_index.default, {
        "attrs": {
          "type": "dot",
          "color": "red"
        }
      }, [h("div", {
        "style": "width: 40px; height: 40px; background: #eee;"
      })])]), h(_Card.default, {
        "attrs": {
          "shadow": true
        }
      }, [h(_Card.default.Header, ["Corner"]), h(_index.default, {
        "attrs": {
          "type": "corner",
          "color": "primary",
          "text": "New"
        }
      }, [h("div", {
        "style": "width: 100px; height: 80px; background: #eee;"
      })]), h("br"), h(_index.default, {
        "attrs": {
          "type": "corner",
          "color": "red",
          "text": "New"
        }
      }, [h("div", {
        "style": "width: 100px; height: 80px; background: #eee;"
      })]), h("br"), h(_index.default, {
        "attrs": {
          "type": "corner",
          "color": "gold",
          "text": "New"
        }
      }, [h("div", {
        "style": "width: 100px; height: 80px; background: #eee;"
      })]), h("br"), h(_index.default, {
        "attrs": {
          "type": "corner",
          "color": "grey",
          "text": "New"
        }
      }, [h("div", {
        "style": "width: 100px; height: 80px; background: #eee;"
      })]), h("br"), h(_index.default, {
        "attrs": {
          "type": "corner",
          "color": "orange",
          "text": "New"
        }
      }, [h("div", {
        "style": "width: 100px; height: 80px; background: #eee;"
      })])])]);
    }
  });
};