@trionesdev/antd-taro-react 0.0.2-beta.19 → 0.0.2-beta.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/dist/ActionSheet/style.scss +52 -52
- package/dist/Button/style.scss +246 -246
- package/dist/Calendar/style.scss +88 -88
- package/dist/Calendar/touchable-calendar-grid.js +9 -9
- package/dist/CalendarDatetimePicker/style.scss +62 -62
- package/dist/CalendarPicker/style.scss +32 -32
- package/dist/CascaderPicker/style.scss +45 -45
- package/dist/DatePicker/style.scss +41 -41
- package/dist/FetchPicker/FetchPicker.d.ts +3 -38
- package/dist/FetchPicker/FetchPicker.js +23 -35
- package/dist/FetchPicker/styles.scss +130 -118
- package/dist/FloatButton/style.scss +126 -126
- package/dist/Form/style.scss +100 -100
- package/dist/ImagesPreview/style.scss +34 -34
- package/dist/ImagesWall/style.scss +70 -70
- package/dist/Input/index.scss +282 -282
- package/dist/Overlay/style.scss +20 -20
- package/dist/Picker/style.scss +41 -41
- package/dist/PickerView/style.scss +13 -13
- package/dist/Popup/style.scss +126 -126
- package/dist/SideBar/side-bar.js +6 -6
- package/dist/SideBar/style.scss +85 -85
- package/dist/Toast/style.scss +63 -63
- package/dist/VerificationCodeInput/style.scss +20 -20
- package/dist/style/variable.scss +34 -34
- package/package.json +4 -4
- package/readme.md +23 -23
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
var _excluded = ["open", "fullScreen", "height", "showSearch", "searchPlaceholder", "value", "multiple", "labelInValue", "title", "cancelText", "okText", "onCancel", "onOk", "fetch", "fieldNames", "empty", "pageable", "pageSize", "optionRender", "round"];
|
|
3
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
4
|
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; }
|
|
3
5
|
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; }
|
|
4
6
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
@@ -14,11 +16,12 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
14
16
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
15
17
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
16
18
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
19
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
20
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
17
21
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
18
22
|
import Popup from "../Popup";
|
|
19
23
|
import { Button, DotLoading, SafeArea, SpinLoading } from "../index";
|
|
20
|
-
import { CheckOutline,
|
|
21
|
-
import Space from "../Space";
|
|
24
|
+
import { CheckOutline, SearchOutline } from "@trionesdev/antd-mobile-icons-react";
|
|
22
25
|
import { ScrollView } from "@tarojs/components";
|
|
23
26
|
import Input from "../Input";
|
|
24
27
|
import { debounce, get, isEmpty, isEqual, some } from "lodash-es";
|
|
@@ -35,12 +38,6 @@ export var FetchPicker = function FetchPicker(_ref) {
|
|
|
35
38
|
_ref$searchPlaceholde = _ref.searchPlaceholder,
|
|
36
39
|
searchPlaceholder = _ref$searchPlaceholde === void 0 ? '搜索' : _ref$searchPlaceholde,
|
|
37
40
|
value = _ref.value,
|
|
38
|
-
_ref$backable = _ref.backable,
|
|
39
|
-
backable = _ref$backable === void 0 ? true : _ref$backable,
|
|
40
|
-
backIcon = _ref.backIcon,
|
|
41
|
-
_ref$closable = _ref.closable,
|
|
42
|
-
closable = _ref$closable === void 0 ? true : _ref$closable,
|
|
43
|
-
closeIcon = _ref.closeIcon,
|
|
44
41
|
_ref$multiple = _ref.multiple,
|
|
45
42
|
multiple = _ref$multiple === void 0 ? false : _ref$multiple,
|
|
46
43
|
_ref$labelInValue = _ref.labelInValue,
|
|
@@ -50,10 +47,7 @@ export var FetchPicker = function FetchPicker(_ref) {
|
|
|
50
47
|
cancelText = _ref$cancelText === void 0 ? '取消' : _ref$cancelText,
|
|
51
48
|
_ref$okText = _ref.okText,
|
|
52
49
|
okText = _ref$okText === void 0 ? '确定' : _ref$okText,
|
|
53
|
-
|
|
54
|
-
round = _ref$round === void 0 ? true : _ref$round,
|
|
55
|
-
onClose = _ref.onClose,
|
|
56
|
-
onBack = _ref.onBack,
|
|
50
|
+
onCancel = _ref.onCancel,
|
|
57
51
|
onOk = _ref.onOk,
|
|
58
52
|
fetch = _ref.fetch,
|
|
59
53
|
fieldNames = _ref.fieldNames,
|
|
@@ -61,7 +55,10 @@ export var FetchPicker = function FetchPicker(_ref) {
|
|
|
61
55
|
pageable = _ref.pageable,
|
|
62
56
|
_ref$pageSize = _ref.pageSize,
|
|
63
57
|
pageSize = _ref$pageSize === void 0 ? 20 : _ref$pageSize,
|
|
64
|
-
optionRender = _ref.optionRender
|
|
58
|
+
optionRender = _ref.optionRender,
|
|
59
|
+
_ref$round = _ref.round,
|
|
60
|
+
round = _ref$round === void 0 ? true : _ref$round,
|
|
61
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
65
62
|
var _ref2 = fieldNames || {},
|
|
66
63
|
_ref2$label = _ref2.label,
|
|
67
64
|
labelFieldName = _ref2$label === void 0 ? 'label' : _ref2$label,
|
|
@@ -153,9 +150,9 @@ export var FetchPicker = function FetchPicker(_ref) {
|
|
|
153
150
|
if (!multiple) {
|
|
154
151
|
var _option = handleGetOptions(newValue);
|
|
155
152
|
onOk === null || onOk === void 0 || onOk(newValue, _option);
|
|
156
|
-
|
|
153
|
+
onCancel === null || onCancel === void 0 || onCancel();
|
|
157
154
|
}
|
|
158
|
-
}, [internalValue, labelFieldName, labelInValue, multiple,
|
|
155
|
+
}, [internalValue, labelFieldName, labelInValue, multiple, onCancel, onOk, valueFieldName, options]);
|
|
159
156
|
var handleSelected = useCallback(function (item) {
|
|
160
157
|
if (!internalValue || isEmpty(internalValue)) {
|
|
161
158
|
return false;
|
|
@@ -201,7 +198,7 @@ export var FetchPicker = function FetchPicker(_ref) {
|
|
|
201
198
|
}, [fetch, pageable]);
|
|
202
199
|
var handleOnOk = function handleOnOk() {
|
|
203
200
|
onOk === null || onOk === void 0 || onOk(internalValue, handleGetOptions(internalValue));
|
|
204
|
-
|
|
201
|
+
onCancel === null || onCancel === void 0 || onCancel();
|
|
205
202
|
};
|
|
206
203
|
useEffect(function () {
|
|
207
204
|
if (!open) {
|
|
@@ -236,30 +233,21 @@ export var FetchPicker = function FetchPicker(_ref) {
|
|
|
236
233
|
return handleSearchChange.cancel();
|
|
237
234
|
};
|
|
238
235
|
}, [handleSearchChange]);
|
|
239
|
-
var header =
|
|
240
|
-
className: "".concat(cls, "-head-
|
|
241
|
-
onClick:
|
|
242
|
-
}, backIcon || /*#__PURE__*/React.createElement(LeftOutline, null)), closable && /*#__PURE__*/React.createElement("div", {
|
|
243
|
-
className: "".concat(cls, "-head-icon"),
|
|
244
|
-
onClick: onClose
|
|
245
|
-
}, closeIcon || /*#__PURE__*/React.createElement(CloseOutline, null))), /*#__PURE__*/React.createElement("div", {
|
|
246
|
-
className: "".concat(cls, "-head-title")
|
|
247
|
-
}, title)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
248
|
-
className: "".concat(cls, "-head-button"),
|
|
249
|
-
onClick: onClose
|
|
236
|
+
var header = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
237
|
+
className: classNames("".concat(cls, "-head-button"), "".concat(cls, "-head-button-cancel")),
|
|
238
|
+
onClick: onCancel
|
|
250
239
|
}, cancelText), /*#__PURE__*/React.createElement("div", {
|
|
251
240
|
className: "".concat(cls, "-head-title")
|
|
252
|
-
}, title), /*#__PURE__*/React.createElement("div", {
|
|
253
|
-
className: "".concat(cls, "-head-button"),
|
|
241
|
+
}, title), multiple && /*#__PURE__*/React.createElement("div", {
|
|
242
|
+
className: classNames("".concat(cls, "-head-button"), "".concat(cls, "-head-button-ok")),
|
|
254
243
|
onClick: handleOnOk
|
|
255
244
|
}, okText));
|
|
256
|
-
return /*#__PURE__*/React.createElement(Popup, {
|
|
245
|
+
return /*#__PURE__*/React.createElement(Popup, _extends({}, rest, {
|
|
257
246
|
open: open,
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
}, /*#__PURE__*/React.createElement(SafeArea, null, /*#__PURE__*/React.createElement("div", {
|
|
247
|
+
height: fullScreen ? "calc(-24px + 100vh)" : height !== null && height !== void 0 ? height : 'auto',
|
|
248
|
+
onClose: onCancel,
|
|
249
|
+
round: round
|
|
250
|
+
}), /*#__PURE__*/React.createElement(SafeArea, null, /*#__PURE__*/React.createElement("div", {
|
|
263
251
|
className: cls
|
|
264
252
|
}, /*#__PURE__*/React.createElement("div", {
|
|
265
253
|
className: "".concat(cls, "-head")
|
|
@@ -1,118 +1,130 @@
|
|
|
1
|
-
@use "../style/variable" as variable;
|
|
2
|
-
|
|
3
|
-
$cls: 'triones-antm-fetch-picker';
|
|
4
|
-
|
|
5
|
-
.#{$cls} {
|
|
6
|
-
height: 100%;
|
|
7
|
-
display: flex;
|
|
8
|
-
flex-direction: column;
|
|
9
|
-
background-color: #f5f5f5;
|
|
10
|
-
|
|
11
|
-
&-head {
|
|
12
|
-
padding: variable.$trionesPaddingXxs;
|
|
13
|
-
background-color: white;
|
|
14
|
-
display: flex;
|
|
15
|
-
flex-direction: row;
|
|
16
|
-
justify-content: space-between;
|
|
17
|
-
border-bottom: 1Px solid variable.$trionesBorderColor;
|
|
18
|
-
|
|
19
|
-
&-icon {
|
|
20
|
-
padding: 8Px;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
&-title {
|
|
24
|
-
flex: 1 auto;
|
|
25
|
-
display: flex;
|
|
26
|
-
justify-content: center;
|
|
27
|
-
align-items: center;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
}
|
|
1
|
+
@use "../style/variable" as variable;
|
|
2
|
+
|
|
3
|
+
$cls: 'triones-antm-fetch-picker';
|
|
4
|
+
|
|
5
|
+
.#{$cls} {
|
|
6
|
+
height: 100%;
|
|
7
|
+
display: flex;
|
|
8
|
+
flex-direction: column;
|
|
9
|
+
background-color: #f5f5f5;
|
|
10
|
+
|
|
11
|
+
&-head {
|
|
12
|
+
padding: variable.$trionesPaddingXxs;
|
|
13
|
+
background-color: white;
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: row;
|
|
16
|
+
justify-content: space-between;
|
|
17
|
+
border-bottom: 1Px solid variable.$trionesBorderColor;
|
|
18
|
+
|
|
19
|
+
&-icon {
|
|
20
|
+
padding: 8Px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&-title {
|
|
24
|
+
flex: 1 auto;
|
|
25
|
+
display: flex;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
align-items: center;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
&-button {
|
|
33
|
+
display: inline-block;
|
|
34
|
+
padding: 8Px;
|
|
35
|
+
&-cancel {
|
|
36
|
+
color: variable.$trionesColorTextSecondary;
|
|
37
|
+
display: inline-block;
|
|
38
|
+
padding: 8Px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&-ok {
|
|
42
|
+
color: variable.$trionesColorPrimaryText;
|
|
43
|
+
display: inline-block;
|
|
44
|
+
padding: 8Px;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&-search-bar {
|
|
51
|
+
padding: variable.$trionesPaddingXxs;
|
|
52
|
+
background-color: white;
|
|
53
|
+
|
|
54
|
+
&-input {
|
|
55
|
+
background-color: #f5f5f5;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&-empty {
|
|
60
|
+
height: 100%;
|
|
61
|
+
display: flex;
|
|
62
|
+
justify-content: center;
|
|
63
|
+
align-items: center;
|
|
64
|
+
min-height: 100Px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&-loading {
|
|
68
|
+
height: 100%;
|
|
69
|
+
display: flex;
|
|
70
|
+
justify-content: center;
|
|
71
|
+
align-items: center;
|
|
72
|
+
|
|
73
|
+
&-content {
|
|
74
|
+
display: flex;
|
|
75
|
+
flex-direction: column;
|
|
76
|
+
justify-content: center;
|
|
77
|
+
align-items: center;
|
|
78
|
+
gap: 8Px;
|
|
79
|
+
font-size: 12Px;
|
|
80
|
+
color: #8c8c8c;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
&-loading-more {
|
|
85
|
+
padding: variable.$trionesPaddingXxs;
|
|
86
|
+
display: flex;
|
|
87
|
+
justify-content: center;
|
|
88
|
+
align-items: center;
|
|
89
|
+
color: #8c8c8c;
|
|
90
|
+
font-size: 12Px;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
&-body {
|
|
94
|
+
flex: 1 auto;
|
|
95
|
+
|
|
96
|
+
.#{$cls} {
|
|
97
|
+
&-item {
|
|
98
|
+
padding-block: variable.$trionesPaddingSm;
|
|
99
|
+
padding-inline: variable.$trionesPadding;
|
|
100
|
+
background-color: white;
|
|
101
|
+
border-bottom: 1Px solid #f0f0f0;
|
|
102
|
+
&-option{
|
|
103
|
+
display: flex;
|
|
104
|
+
&-selected{
|
|
105
|
+
background-color: #e6f4ff;
|
|
106
|
+
}
|
|
107
|
+
&-content{
|
|
108
|
+
flex: auto;
|
|
109
|
+
overflow: hidden;
|
|
110
|
+
white-space: nowrap;
|
|
111
|
+
text-overflow: ellipsis;
|
|
112
|
+
}
|
|
113
|
+
&-state{
|
|
114
|
+
.triones-antm-icon{
|
|
115
|
+
color: variable.$trionesColorPrimaryText;
|
|
116
|
+
font-size: variable.$trionesFontSize;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
&-footer {
|
|
125
|
+
flex-shrink: 0;
|
|
126
|
+
border-top: 1Px solid variable.$trionesBorderColor;
|
|
127
|
+
padding: variable.$trionesPaddingXxs;
|
|
128
|
+
background-color: white;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
@@ -1,126 +1,126 @@
|
|
|
1
|
-
@use "../style/variable" as variable;
|
|
2
|
-
|
|
3
|
-
$floatButtonCls: "triones-antm-float-button";
|
|
4
|
-
$floatButtonGroupCls: "triones-antm-float-button-group";
|
|
5
|
-
|
|
6
|
-
$floatButtonSize: 48Px;
|
|
7
|
-
$floatButtonShadow: 0 6Px 16Px 0 rgba(0, 0, 0, 0.08),
|
|
8
|
-
0 3Px 6Px -4Px rgba(0, 0, 0, 0.12), 0 9Px 28Px 8Px rgba(0, 0, 0, 0.05);
|
|
9
|
-
|
|
10
|
-
.#{$floatButtonCls} {
|
|
11
|
-
position: fixed;
|
|
12
|
-
display: inline-flex;
|
|
13
|
-
flex-shrink: 0;
|
|
14
|
-
box-sizing: border-box;
|
|
15
|
-
|
|
16
|
-
&--embedded {
|
|
17
|
-
position: relative;
|
|
18
|
-
right: auto;
|
|
19
|
-
bottom: auto;
|
|
20
|
-
z-index: auto;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
&-body {
|
|
24
|
-
box-sizing: border-box;
|
|
25
|
-
margin: 0;
|
|
26
|
-
padding: 0;
|
|
27
|
-
display: inline-flex;
|
|
28
|
-
align-items: center;
|
|
29
|
-
justify-content: center;
|
|
30
|
-
gap: 8Px;
|
|
31
|
-
min-width: $floatButtonSize;
|
|
32
|
-
min-height: $floatButtonSize;
|
|
33
|
-
border: none;
|
|
34
|
-
border-radius: 50%;
|
|
35
|
-
cursor: pointer;
|
|
36
|
-
font-size: 20Px;
|
|
37
|
-
line-height: 1;
|
|
38
|
-
color: rgba(0, 0, 0, 0.88);
|
|
39
|
-
background: #fff;
|
|
40
|
-
box-shadow: $floatButtonShadow;
|
|
41
|
-
transition: color 0.2s, background 0.2s, box-shadow 0.2s;
|
|
42
|
-
-webkit-tap-highlight-color: transparent;
|
|
43
|
-
text-decoration: none;
|
|
44
|
-
|
|
45
|
-
&:active {
|
|
46
|
-
filter: brightness(0.95);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
&--shape-square &-body {
|
|
51
|
-
border-radius: variable.$trionesBorderRadius;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
&--has-content &-body {
|
|
55
|
-
min-height: $floatButtonSize;
|
|
56
|
-
display: inline-flex;
|
|
57
|
-
flex-direction: column;
|
|
58
|
-
align-items: center;
|
|
59
|
-
justify-content: center;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
&--type-primary &-body {
|
|
63
|
-
color: #fff;
|
|
64
|
-
background: variable.$trionesColorPrimary;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
&-icon {
|
|
68
|
-
display: inline-flex;
|
|
69
|
-
align-items: center;
|
|
70
|
-
justify-content: center;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
&-content {
|
|
74
|
-
font-size: variable.$trionesFontSizeSm;
|
|
75
|
-
font-weight: 500;
|
|
76
|
-
white-space: nowrap;
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.#{$floatButtonGroupCls} {
|
|
81
|
-
position: fixed;
|
|
82
|
-
display: flex;
|
|
83
|
-
gap: 12Px;
|
|
84
|
-
align-items: flex-end;
|
|
85
|
-
box-sizing: border-box;
|
|
86
|
-
|
|
87
|
-
&--placement {
|
|
88
|
-
&-top {
|
|
89
|
-
flex-direction: column;
|
|
90
|
-
}
|
|
91
|
-
&-bottom {
|
|
92
|
-
flex-direction: column;
|
|
93
|
-
}
|
|
94
|
-
&-left {
|
|
95
|
-
flex-direction: row;
|
|
96
|
-
}
|
|
97
|
-
&-right {
|
|
98
|
-
flex-direction: row;
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
&--menu {
|
|
103
|
-
align-items: center;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
&-list {
|
|
107
|
-
display: flex;
|
|
108
|
-
flex-direction: column;
|
|
109
|
-
gap: 12Px;
|
|
110
|
-
align-items: flex-end;
|
|
111
|
-
|
|
112
|
-
&--hidden {
|
|
113
|
-
display: none;
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
&--placement-left &-list,
|
|
118
|
-
&--placement-right &-list {
|
|
119
|
-
flex-direction: column;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
/** 小程序点击外部关闭:全屏遮罩;极淡背景避免部分机型不响应 tap */
|
|
123
|
-
&-weapp-outside-mask {
|
|
124
|
-
background: rgba(0, 0, 0, 0.001);
|
|
125
|
-
}
|
|
126
|
-
}
|
|
1
|
+
@use "../style/variable" as variable;
|
|
2
|
+
|
|
3
|
+
$floatButtonCls: "triones-antm-float-button";
|
|
4
|
+
$floatButtonGroupCls: "triones-antm-float-button-group";
|
|
5
|
+
|
|
6
|
+
$floatButtonSize: 48Px;
|
|
7
|
+
$floatButtonShadow: 0 6Px 16Px 0 rgba(0, 0, 0, 0.08),
|
|
8
|
+
0 3Px 6Px -4Px rgba(0, 0, 0, 0.12), 0 9Px 28Px 8Px rgba(0, 0, 0, 0.05);
|
|
9
|
+
|
|
10
|
+
.#{$floatButtonCls} {
|
|
11
|
+
position: fixed;
|
|
12
|
+
display: inline-flex;
|
|
13
|
+
flex-shrink: 0;
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
|
|
16
|
+
&--embedded {
|
|
17
|
+
position: relative;
|
|
18
|
+
right: auto;
|
|
19
|
+
bottom: auto;
|
|
20
|
+
z-index: auto;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&-body {
|
|
24
|
+
box-sizing: border-box;
|
|
25
|
+
margin: 0;
|
|
26
|
+
padding: 0;
|
|
27
|
+
display: inline-flex;
|
|
28
|
+
align-items: center;
|
|
29
|
+
justify-content: center;
|
|
30
|
+
gap: 8Px;
|
|
31
|
+
min-width: $floatButtonSize;
|
|
32
|
+
min-height: $floatButtonSize;
|
|
33
|
+
border: none;
|
|
34
|
+
border-radius: 50%;
|
|
35
|
+
cursor: pointer;
|
|
36
|
+
font-size: 20Px;
|
|
37
|
+
line-height: 1;
|
|
38
|
+
color: rgba(0, 0, 0, 0.88);
|
|
39
|
+
background: #fff;
|
|
40
|
+
box-shadow: $floatButtonShadow;
|
|
41
|
+
transition: color 0.2s, background 0.2s, box-shadow 0.2s;
|
|
42
|
+
-webkit-tap-highlight-color: transparent;
|
|
43
|
+
text-decoration: none;
|
|
44
|
+
|
|
45
|
+
&:active {
|
|
46
|
+
filter: brightness(0.95);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&--shape-square &-body {
|
|
51
|
+
border-radius: variable.$trionesBorderRadius;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&--has-content &-body {
|
|
55
|
+
min-height: $floatButtonSize;
|
|
56
|
+
display: inline-flex;
|
|
57
|
+
flex-direction: column;
|
|
58
|
+
align-items: center;
|
|
59
|
+
justify-content: center;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&--type-primary &-body {
|
|
63
|
+
color: #fff;
|
|
64
|
+
background: variable.$trionesColorPrimary;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&-icon {
|
|
68
|
+
display: inline-flex;
|
|
69
|
+
align-items: center;
|
|
70
|
+
justify-content: center;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&-content {
|
|
74
|
+
font-size: variable.$trionesFontSizeSm;
|
|
75
|
+
font-weight: 500;
|
|
76
|
+
white-space: nowrap;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.#{$floatButtonGroupCls} {
|
|
81
|
+
position: fixed;
|
|
82
|
+
display: flex;
|
|
83
|
+
gap: 12Px;
|
|
84
|
+
align-items: flex-end;
|
|
85
|
+
box-sizing: border-box;
|
|
86
|
+
|
|
87
|
+
&--placement {
|
|
88
|
+
&-top {
|
|
89
|
+
flex-direction: column;
|
|
90
|
+
}
|
|
91
|
+
&-bottom {
|
|
92
|
+
flex-direction: column;
|
|
93
|
+
}
|
|
94
|
+
&-left {
|
|
95
|
+
flex-direction: row;
|
|
96
|
+
}
|
|
97
|
+
&-right {
|
|
98
|
+
flex-direction: row;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
&--menu {
|
|
103
|
+
align-items: center;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
&-list {
|
|
107
|
+
display: flex;
|
|
108
|
+
flex-direction: column;
|
|
109
|
+
gap: 12Px;
|
|
110
|
+
align-items: flex-end;
|
|
111
|
+
|
|
112
|
+
&--hidden {
|
|
113
|
+
display: none;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
&--placement-left &-list,
|
|
118
|
+
&--placement-right &-list {
|
|
119
|
+
flex-direction: column;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/** 小程序点击外部关闭:全屏遮罩;极淡背景避免部分机型不响应 tap */
|
|
123
|
+
&-weapp-outside-mask {
|
|
124
|
+
background: rgba(0, 0, 0, 0.001);
|
|
125
|
+
}
|
|
126
|
+
}
|