1
This commit is contained in:
1
package/component/es/skeleton/index.css
Normal file
1
package/component/es/skeleton/index.css
Normal file
@@ -0,0 +1 @@
|
||||
.lay-skeleton .lay-skeleton-item,.lay-skeleton .lay-skeleton-type--p{height:16px;border-radius:5px;margin-bottom:16px;background:#eeeeee}.lay-skeleton .lay-skeleton-type--image{width:240px;height:240px;background:#eeeeee;display:flex;justify-content:center;align-items:center}.lay-skeleton .lay-skeleton-type--image i{font-size:40px}.lay-skeleton-animated .lay-skeleton-type--image{width:240px;height:240px!important;display:flex;justify-content:center;align-items:center}.lay-skeleton-animated .lay-skeleton-type--image i{font-size:40px}.lay-skeleton-animated .lay-skeleton-item{height:16px;border-radius:5px;margin-bottom:16px;background:#eeeeee;background:linear-gradient(90deg,#f2f2f2 25%,#ececec 37%,#f2f2f2 63%);background-size:400% 100%;animation:lay-skeleton-loading 1.2s ease infinite}.lay-skeleton-first{width:30%}.lay-skeleton-last{width:62.8%}@keyframes lay-skeleton-loading{0%{background-position:100% 50%}to{background-position:0 50%}}
|
||||
38
package/component/es/skeleton/index.js
Normal file
38
package/component/es/skeleton/index.js
Normal file
@@ -0,0 +1,38 @@
|
||||
import { w as withInstall } from "../badge/index2.js";
|
||||
import { defineComponent, openBlock, createElementBlock, mergeProps, renderSlot, Fragment, renderList, createBlock, normalizeClass } from "vue";
|
||||
import { _ as _sfc_main$1 } from "../skeletonItem/index2.js";
|
||||
import "../checkbox/index2.js";
|
||||
var index = /* @__PURE__ */ (() => ".lay-skeleton .lay-skeleton-item,.lay-skeleton .lay-skeleton-type--p{height:16px;border-radius:5px;margin-bottom:16px;background:#eeeeee}.lay-skeleton .lay-skeleton-type--image{width:240px;height:240px;background:#eeeeee;display:flex;justify-content:center;align-items:center}.lay-skeleton .lay-skeleton-type--image i{font-size:40px}.lay-skeleton-animated .lay-skeleton-type--image{width:240px;height:240px!important;display:flex;justify-content:center;align-items:center}.lay-skeleton-animated .lay-skeleton-type--image i{font-size:40px}.lay-skeleton-animated .lay-skeleton-item{height:16px;border-radius:5px;margin-bottom:16px;background:#eeeeee;background:linear-gradient(90deg,#f2f2f2 25%,#ececec 37%,#f2f2f2 63%);background-size:400% 100%;animation:lay-skeleton-loading 1.2s ease infinite}.lay-skeleton-first{width:30%}.lay-skeleton-last{width:62.8%}@keyframes lay-skeleton-loading{0%{background-position:100% 50%}to{background-position:0 50%}}\n")();
|
||||
const __default__ = {
|
||||
name: "LaySkeleton"
|
||||
};
|
||||
const _sfc_main = defineComponent({
|
||||
...__default__,
|
||||
props: {
|
||||
rows: { default: 4 },
|
||||
loading: { type: Boolean, default: false },
|
||||
animated: { type: Boolean, default: false }
|
||||
},
|
||||
setup(__props) {
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("div", mergeProps({
|
||||
class: ["lay-skeleton", __props.animated ? "lay-skeleton-animated" : ""]
|
||||
}, _ctx.$attrs), [
|
||||
__props.loading ? renderSlot(_ctx.$slots, "skeleton", { key: 0 }, () => [
|
||||
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.rows, (item) => {
|
||||
return openBlock(), createBlock(_sfc_main$1, {
|
||||
key: item,
|
||||
class: normalizeClass([
|
||||
item === 1 ? "lay-skeleton-first" : "",
|
||||
item === __props.rows ? "lay-skeleton-last" : ""
|
||||
]),
|
||||
type: "p"
|
||||
}, null, 8, ["class"]);
|
||||
}), 128))
|
||||
]) : renderSlot(_ctx.$slots, "default", { key: 1 })
|
||||
], 16);
|
||||
};
|
||||
}
|
||||
});
|
||||
const component = withInstall(_sfc_main);
|
||||
export { component as default };
|
||||
Reference in New Issue
Block a user