update <image-list> to <m-image-list>
This commit is contained in:
ZainChen
parent
adbc8e9487
commit
5a6a66efba
File diff suppressed because one or more lines are too long
|
|
@ -24,7 +24,7 @@ const css = `
|
|||
|
||||
render(
|
||||
<div>
|
||||
<image-list css={css} list={[
|
||||
<m-image-list css={css} list={[
|
||||
{ src: 'https://material-components.github.io/material-components-web-catalog/static/media/photos/3x2/1.jpg', label: 'Text label' },
|
||||
{ src: 'https://material-components.github.io/material-components-web-catalog/static/media/photos/3x2/2.jpg', label: 'Text label' },
|
||||
{ src: 'https://material-components.github.io/material-components-web-catalog/static/media/photos/3x2/3.jpg', label: 'Text label' },
|
||||
|
|
@ -41,14 +41,14 @@ render(
|
|||
{ src: 'https://material-components.github.io/material-components-web-catalog/static/media/photos/3x2/14.jpg', label: 'Text label' },
|
||||
{ src: 'https://material-components.github.io/material-components-web-catalog/static/media/photos/3x2/15.jpg', label: 'Text label' }
|
||||
]}>
|
||||
</image-list>
|
||||
</m-image-list>
|
||||
|
||||
<br></br>
|
||||
|
||||
<br></br>
|
||||
|
||||
<br></br>
|
||||
<image-list css={`
|
||||
<m-image-list css={`
|
||||
.mdc-image-list {
|
||||
column-count: 5;
|
||||
}`}
|
||||
|
|
@ -117,7 +117,7 @@ render(
|
|||
label: 'Text label'
|
||||
}
|
||||
]}>
|
||||
</image-list>
|
||||
</m-image-list>
|
||||
</div>
|
||||
, 'body')
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
|
||||
<div>
|
||||
<image-list css=".mdc-image-list__item {
|
||||
<m-image-list css=".mdc-image-list__item {
|
||||
width:calc(100% / 4 - 4.3333333px)!important;
|
||||
margin:2px;
|
||||
}
|
||||
|
|
@ -48,14 +48,14 @@
|
|||
{ src: 'https://material-components.github.io/material-components-web-catalog/static/media/photos/3x2/14.jpg', label: 'Text label' },
|
||||
{ src: 'https://material-components.github.io/material-components-web-catalog/static/media/photos/3x2/15.jpg', label: 'Text label' }
|
||||
]">
|
||||
</image-list>
|
||||
</m-image-list>
|
||||
|
||||
<br></br>
|
||||
|
||||
<br></br>
|
||||
|
||||
<br></br>
|
||||
<image-list css="
|
||||
<m-image-list css="
|
||||
.mdc-image-list {
|
||||
column-count: 5;
|
||||
}" masonry list="[
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
label: 'Text label'
|
||||
}
|
||||
]">
|
||||
</image-list>
|
||||
</m-image-list>
|
||||
</div>
|
||||
|
||||
<a href="https://github.com/Tencent/omi" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
|
||||
|
|
|
|||
|
|
@ -96,10 +96,10 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
/************************************************************************/
|
||||
/******/ ({
|
||||
|
||||
/***/ "./node_modules/css-loader/index.js!./node_modules/sass-loader/lib/loader.js?!./src/image-list/index.scss":
|
||||
/*!****************************************************************************************************************!*\
|
||||
!*** ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js??ref--4-2!./src/image-list/index.scss ***!
|
||||
\****************************************************************************************************************/
|
||||
/***/ "./node_modules/css-loader/index.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/lib/loader.js?!./src/image-list/index.scss":
|
||||
/*!**************************************************************************************************************************************************!*\
|
||||
!*** ./node_modules/css-loader!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js??ref--4-3!./src/image-list/index.scss ***!
|
||||
\**************************************************************************************************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
|
|
@ -108,7 +108,7 @@ exports = module.exports = __webpack_require__(/*! ../../node_modules/css-loader
|
|||
|
||||
|
||||
// module
|
||||
exports.push([module.i, ".mdc-image-list {\n display: flex;\n flex-wrap: wrap;\n margin: 0 auto;\n padding: 0; }\n\n.mdc-image-list__item,\n.mdc-image-list__image-aspect-container {\n position: relative;\n box-sizing: border-box; }\n\n.mdc-image-list__item {\n list-style-type: none; }\n\n.mdc-image-list__image {\n width: 100%; }\n\n.mdc-image-list__image-aspect-container .mdc-image-list__image {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n height: 100%;\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover; }\n\n.mdc-image-list__image-aspect-container {\n padding-bottom: calc(100% / 1); }\n\n.mdc-image-list__image {\n border-radius: 0; }\n\n.mdc-image-list--with-text-protection .mdc-image-list__supporting {\n border-radius: 0 0 0 0; }\n\n.mdc-image-list__supporting {\n color: rgba(0, 0, 0, 0.87);\n /* @alternate */\n color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n padding: 8px 0;\n line-height: 24px; }\n\n.mdc-image-list__label {\n font-family: Roboto, sans-serif;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-size: 1rem;\n line-height: 1.75rem;\n font-weight: 400;\n letter-spacing: 0.00937em;\n text-decoration: inherit;\n text-transform: inherit;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; }\n\n.mdc-image-list--with-text-protection .mdc-image-list__supporting {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 48px;\n padding: 0 16px;\n background: rgba(0, 0, 0, 0.6);\n color: #fff; }\n\n.mdc-image-list--masonry {\n display: block; }\n .mdc-image-list--masonry .mdc-image-list__item {\n break-inside: avoid-column; }\n .mdc-image-list--masonry .mdc-image-list__image {\n display: block;\n height: auto; }\n", ""]);
|
||||
exports.push([module.i, ".mdc-image-list {\n display: flex;\n flex-wrap: wrap;\n margin: 0 auto;\n padding: 0; }\n\n.mdc-image-list__item,\n.mdc-image-list__image-aspect-container {\n position: relative;\n box-sizing: border-box; }\n\n.mdc-image-list__item {\n list-style-type: none; }\n\n.mdc-image-list__image {\n width: 100%; }\n\n.mdc-image-list__image-aspect-container .mdc-image-list__image {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n height: 100%;\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover; }\n\n.mdc-image-list__image-aspect-container {\n padding-bottom: calc(100% / 1); }\n\n.mdc-image-list__image {\n border-radius: 0; }\n\n.mdc-image-list--with-text-protection .mdc-image-list__supporting {\n border-radius: 0 0 0 0; }\n\n.mdc-image-list__supporting {\n color: rgba(0, 0, 0, 0.87);\n /* @alternate */\n color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n padding: 8px 0;\n line-height: 24px; }\n\n.mdc-image-list__label {\n font-family: Roboto, sans-serif;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-size: 1rem;\n line-height: 1.75rem;\n font-weight: 400;\n letter-spacing: 0.00937em;\n text-decoration: inherit;\n text-transform: inherit;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; }\n\n.mdc-image-list--with-text-protection .mdc-image-list__supporting {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 48px;\n padding: 0 16px;\n background: rgba(0, 0, 0, 0.6);\n color: #fff; }\n\n.mdc-image-list--masonry {\n display: block; }\n .mdc-image-list--masonry .mdc-image-list__item {\n break-inside: avoid-column; }\n .mdc-image-list--masonry .mdc-image-list__image {\n display: block;\n height: auto; }\n\n:host {\n display: block; }\n", ""]);
|
||||
|
||||
// exports
|
||||
|
||||
|
|
@ -210,7 +210,7 @@ function toComment(sourceMap) {
|
|||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
|
||||
var result = __webpack_require__(/*! !../../node_modules/css-loader!../../node_modules/sass-loader/lib/loader.js??ref--4-2!./index.scss */ "./node_modules/css-loader/index.js!./node_modules/sass-loader/lib/loader.js?!./src/image-list/index.scss");
|
||||
var result = __webpack_require__(/*! !../../node_modules/css-loader!../../node_modules/resolve-url-loader!../../node_modules/sass-loader/lib/loader.js??ref--4-3!./index.scss */ "./node_modules/css-loader/index.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/lib/loader.js?!./src/image-list/index.scss");
|
||||
|
||||
if (typeof result === "string") {
|
||||
module.exports = result;
|
||||
|
|
@ -263,6 +263,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var omi_1 = __webpack_require__(/*! omi */ "omi");
|
||||
var css = __webpack_require__(/*! ./index.scss */ "./src/image-list/index.scss");
|
||||
//@ts-ignore
|
||||
__webpack_require__(/*! ../theme.ts */ "./src/theme.ts");
|
||||
var ImageList = /** @class */ (function (_super) {
|
||||
__extends(ImageList, _super);
|
||||
function ImageList() {
|
||||
|
|
@ -286,13 +288,45 @@ var ImageList = /** @class */ (function (_super) {
|
|||
list: Object
|
||||
};
|
||||
ImageList = __decorate([
|
||||
omi_1.tag('image-list')
|
||||
omi_1.tag('m-image-list')
|
||||
], ImageList);
|
||||
return ImageList;
|
||||
}(omi_1.WeElement));
|
||||
exports.default = ImageList;
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/theme.ts":
|
||||
/*!**********************!*\
|
||||
!*** ./src/theme.ts ***!
|
||||
\**********************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
theme();
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
theme();
|
||||
});
|
||||
function theme() {
|
||||
if (document.body && !document.body.style.getPropertyValue('--mdc-theme-primary')) {
|
||||
document.body.style.setProperty('--mdc-theme-primary', '#0072d9');
|
||||
document.body.style.setProperty('--mdc-theme-secondary', '#2170b8');
|
||||
document.body.style.setProperty('--mdc-theme-error', '#f5222d');
|
||||
document.body.style.setProperty('--mdc-theme-surface', '#ffffff');
|
||||
document.body.style.setProperty('--mdc-theme-on-primary', '#ffffff');
|
||||
document.body.style.setProperty('--mdc-theme-on-secondary', '#ffffff');
|
||||
document.body.style.setProperty('--mdc-theme-on-error', '#ffffff');
|
||||
document.body.style.setProperty('--mdc-theme-on-surface', '#000000');
|
||||
document.body.style.setProperty('--mdc-theme-background', '#ffffff');
|
||||
document.body.style.setProperty('--mdc-shape-small-component-radius', '4px');
|
||||
document.body.style.setProperty('--mdc-shape-medium-component-radius', '4px');
|
||||
document.body.style.setProperty('--mdc-shape-large-component-radius', '0px');
|
||||
document.body.style.setProperty('--mdc-typography--font-family', 'Roboto, sans-serif');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "omi":
|
||||
|
|
@ -306,6 +340,6 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_omi__;
|
|||
|
||||
/***/ })
|
||||
|
||||
/******/ });
|
||||
/******/ })["default"];
|
||||
});
|
||||
//# sourceMappingURL=index.js.map
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
<div class="playground">
|
||||
<div class="editor">
|
||||
<textarea id="editor">
|
||||
<image-list
|
||||
<m-image-list
|
||||
css="
|
||||
.mdc-image-list__item {
|
||||
width:calc(100% / 4 - 4.3333333px)!important;
|
||||
|
|
@ -116,11 +116,11 @@
|
|||
{ src: './image-list/3x2-14.jpg', label: 'Text label' },
|
||||
{ src: './image-list/3x2-15.jpg', label: 'Text label' }
|
||||
]"
|
||||
></image-list>
|
||||
></m-image-list>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<image-list
|
||||
<m-image-list
|
||||
css="
|
||||
.mdc-image-list {
|
||||
column-count: 5;
|
||||
|
|
@ -189,7 +189,7 @@
|
|||
label: 'Text label'
|
||||
}
|
||||
]"
|
||||
></image-list></textarea>
|
||||
></m-image-list></textarea>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<iframe class="frame" id="frame"></iframe>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ Image List provides a RTL-aware Material Design image list component. An Image L
|
|||
## Usage
|
||||
|
||||
```html
|
||||
<image-list
|
||||
<m-image-list
|
||||
list="[
|
||||
{ src: './image-list/3x2-1.jpg', label: 'Text label' },
|
||||
{ src: './image-list/3x2-2.jpg', label: 'Text label' },
|
||||
|
|
@ -23,7 +23,7 @@ Image List provides a RTL-aware Material Design image list component. An Image L
|
|||
{ src: './image-list/3x2-14.jpg', label: 'Text label' },
|
||||
{ src: './image-list/3x2-15.jpg', label: 'Text label' }
|
||||
]"
|
||||
></image-list>
|
||||
></m-image-list>
|
||||
```
|
||||
|
||||
## Usage in Omi
|
||||
|
|
@ -31,7 +31,7 @@ Image List provides a RTL-aware Material Design image list component. An Image L
|
|||
JSX:
|
||||
|
||||
```jsx
|
||||
<image-list
|
||||
<m-image-list
|
||||
list={[
|
||||
{ src: './image-list/3x2-1.jpg', label: 'Text label' },
|
||||
{ src: './image-list/3x2-2.jpg', label: 'Text label' },
|
||||
|
|
@ -49,7 +49,7 @@ JSX:
|
|||
{ src: './image-list/3x2-14.jpg', label: 'Text label' },
|
||||
{ src: './image-list/3x2-15.jpg', label: 'Text label' }
|
||||
]}
|
||||
></image-list>
|
||||
></m-image-list>
|
||||
```
|
||||
|
||||
## API
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
## 使用
|
||||
|
||||
```html
|
||||
<image-list
|
||||
<m-image-list
|
||||
list="[
|
||||
{ src: './image-list/3x2-1.jpg', label: 'Text label' },
|
||||
{ src: './image-list/3x2-2.jpg', label: 'Text label' },
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
{ src: './image-list/3x2-14.jpg', label: 'Text label' },
|
||||
{ src: './image-list/3x2-15.jpg', label: 'Text label' }
|
||||
]"
|
||||
></image-list>
|
||||
></m-image-list>
|
||||
```
|
||||
|
||||
## Omi 中使用
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
JSX:
|
||||
|
||||
```jsx
|
||||
<image-list
|
||||
<m-image-list
|
||||
list={[
|
||||
{ src: './image-list/3x2-1.jpg', label: 'Text label' },
|
||||
{ src: './image-list/3x2-2.jpg', label: 'Text label' },
|
||||
|
|
@ -49,7 +49,7 @@ JSX:
|
|||
{ src: './image-list/3x2-14.jpg', label: 'Text label' },
|
||||
{ src: './image-list/3x2-15.jpg', label: 'Text label' }
|
||||
]}
|
||||
></image-list>
|
||||
></m-image-list>
|
||||
```
|
||||
|
||||
## API
|
||||
|
|
|
|||
|
|
@ -4,15 +4,11 @@ interface Props {
|
|||
}
|
||||
interface Data {
|
||||
}
|
||||
export default class Breadcrumb extends WeElement<Props, Data> {
|
||||
export default class BottomNav extends WeElement<Props, Data> {
|
||||
static css: any;
|
||||
static defaultProps: {
|
||||
split: string;
|
||||
};
|
||||
static propTypes: {
|
||||
items: ObjectConstructor;
|
||||
split: StringConstructor;
|
||||
};
|
||||
static defaultProps: {};
|
||||
static propTypes: {};
|
||||
installed(): void;
|
||||
render(props: any): JSX.Element;
|
||||
}
|
||||
export {};
|
||||
|
|
|
|||
|
|
@ -96,14 +96,14 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
/************************************************************************/
|
||||
/******/ ({
|
||||
|
||||
/***/ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./node_modules/_resolve-url-loader@3.1.0@resolve-url-loader/index.js!./node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js?!./src/image-list/index.scss":
|
||||
/*!*****************************************************************************************************************************************************************************************************************!*\
|
||||
!*** ./node_modules/_css-loader@1.0.1@css-loader!./node_modules/_resolve-url-loader@3.1.0@resolve-url-loader!./node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js??ref--4-3!./src/image-list/index.scss ***!
|
||||
\*****************************************************************************************************************************************************************************************************************/
|
||||
/***/ "./node_modules/css-loader/index.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/lib/loader.js?!./src/image-list/index.scss":
|
||||
/*!**************************************************************************************************************************************************!*\
|
||||
!*** ./node_modules/css-loader!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js??ref--4-3!./src/image-list/index.scss ***!
|
||||
\**************************************************************************************************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
exports = module.exports = __webpack_require__(/*! ../../node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js */ "./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js")(false);
|
||||
exports = module.exports = __webpack_require__(/*! ../../node_modules/css-loader/lib/css-base.js */ "./node_modules/css-loader/lib/css-base.js")(false);
|
||||
// imports
|
||||
|
||||
|
||||
|
|
@ -115,10 +115,10 @@ exports.push([module.i, ".mdc-image-list {\n display: flex;\n flex-wrap: wrap;
|
|||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js":
|
||||
/*!*******************************************************************!*\
|
||||
!*** ./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js ***!
|
||||
\*******************************************************************/
|
||||
/***/ "./node_modules/css-loader/lib/css-base.js":
|
||||
/*!*************************************************!*\
|
||||
!*** ./node_modules/css-loader/lib/css-base.js ***!
|
||||
\*************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
|
|
@ -210,7 +210,7 @@ function toComment(sourceMap) {
|
|||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
|
||||
var result = __webpack_require__(/*! !../../node_modules/_css-loader@1.0.1@css-loader!../../node_modules/_resolve-url-loader@3.1.0@resolve-url-loader!../../node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js??ref--4-3!./index.scss */ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./node_modules/_resolve-url-loader@3.1.0@resolve-url-loader/index.js!./node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js?!./src/image-list/index.scss");
|
||||
var result = __webpack_require__(/*! !../../node_modules/css-loader!../../node_modules/resolve-url-loader!../../node_modules/sass-loader/lib/loader.js??ref--4-3!./index.scss */ "./node_modules/css-loader/index.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/lib/loader.js?!./src/image-list/index.scss");
|
||||
|
||||
if (typeof result === "string") {
|
||||
module.exports = result;
|
||||
|
|
@ -288,7 +288,7 @@ var ImageList = /** @class */ (function (_super) {
|
|||
list: Object
|
||||
};
|
||||
ImageList = __decorate([
|
||||
omi_1.tag('image-list')
|
||||
omi_1.tag('m-image-list')
|
||||
], ImageList);
|
||||
return ImageList;
|
||||
}(omi_1.WeElement));
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -14,7 +14,7 @@ interface Data {
|
|||
}
|
||||
|
||||
|
||||
@tag('image-list')
|
||||
@tag('m-image-list')
|
||||
export default class ImageList extends WeElement<Props, Data>{
|
||||
static css = css
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue