zmp-ui
Version:
Zalo Mini App framework
86 lines • 3.33 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from "react";
import Sheet from ".";
import Box from "../box";
import Text from "../text";
import Button from "../button";
var meta = {
title: "Overlay/Sheet",
component: Sheet,
tags: ["autodocs"],
argTypes: {}
};
export default meta;
var Base = {
args: {
visible: true,
children: /*#__PURE__*/React.createElement(Box, {
p: 4,
className: "custom-bottom-sheet",
flex: true,
flexDirection: "column"
}, /*#__PURE__*/React.createElement(Box, {
className: "bottom-sheet-cover"
}, /*#__PURE__*/React.createElement("img", {
alt: "H\xECnh \u1EA3nh minh h\u1ECDa",
src: "https://stc-zmp.zadn.vn/zmp-zaui/images/0e05d63a7a93a6cdff826.jpg",
style: {
width: "100%",
borderRadius: "8px"
}
})), /*#__PURE__*/React.createElement(Box, {
my: 4
}, /*#__PURE__*/React.createElement(Text.Title, null, "Cho ph\xE9p \u1EE9ng d\u1EE5ng truy c\u1EADp v\u1ECB tr\xED c\u1EE7a b\u1EA1n")), /*#__PURE__*/React.createElement(Box, {
className: "bottom-sheet-body",
style: {
overflowY: "auto"
}
}, /*#__PURE__*/React.createElement(Text, null, "\u1EE8ng d\u1EE5ng s\u1EBD s\u1EED d\u1EE5ng v\u1ECB tr\xED c\u1EE7a b\u1EA1n \u0111\u1EC3 cung c\u1EA5p c\xE1c d\u1ECBch v\u1EE5 nh\u01B0 giao h\xE0ng, t\xECm ki\u1EBFm c\u1EEDa h\xE0ng g\u1EA7n nh\u1EA5t, v\xE0 c\xE1c t\xEDnh n\u0103ng li\xEAn quan kh\xE1c.")), /*#__PURE__*/React.createElement(Box, {
flex: true,
flexDirection: "row",
mt: 1,
pt: 6
}, /*#__PURE__*/React.createElement(Box, {
style: {
flex: 1
},
pr: 1
}, /*#__PURE__*/React.createElement(Button, {
fullWidth: true,
variant: "secondary"
}, "T\u1EEB ch\u1ED1i")), /*#__PURE__*/React.createElement(Box, {
style: {
flex: 1
},
pl: 1
}, /*#__PURE__*/React.createElement(Button, {
fullWidth: true
}, "\u0110\u1ED3ng \xFD"))))
}
};
export var Default = {
name: "Mặc định",
args: _objectSpread({}, Base.args)
};
export var WithTitle = {
name: "Có tiêu đề",
args: _objectSpread(_objectSpread({}, Base.args), {}, {
title: "Xác nhận quyền truy cập"
})
};
export var NoHandler = {
name: "Không có sheet handler",
args: _objectSpread(_objectSpread({}, Base.args), {}, {
handler: false,
title: "Không có sheet handler"
})
};
export var NoMask = {
name: "Không có mask",
args: _objectSpread(_objectSpread({}, Base.args), {}, {
mask: false,
title: "Không có mask"
})
};