@vrx-arco/pro-layout
Version:
<p align="center"> <img src="https://vrx-arco.github.io/arco-design-pro/favicon.svg" width="200" height="250"> </p>
74 lines (73 loc) • 2.4 kB
JavaScript
import { defineComponent, createVNode, mergeProps, isVNode } from "vue";
import { Space, TypographyTitle } from "@arco-design/web-vue";
import { useShareBreakpoints, propsSlot } from "@vrx-arco/use";
import IconMenuFold from "@vrx-arco/icons-vue/IconMenuFold";
import { style } from "../../../style/var.mjs";
function _isSlot(s) {
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
const NavBar = /* @__PURE__ */ defineComponent({
name: "vrx-arco-navBar",
props: {
logo: String,
title: String
},
emits: ["menuClick"],
setup: (props, {
slots,
emit
}) => {
const {
bemClass
} = style("pro-layout-navbar");
const breakpoints = useShareBreakpoints();
const isSmallerLg = breakpoints.smaller("lg");
return () => {
var _a, _b, _c;
const {
logo
} = props;
const logoSlot = (_a = slots.logo) == null ? void 0 : _a.call(slots);
const logoContainerSlot = (_b = slots.logoContainer) == null ? void 0 : _b.call(slots);
const title = propsSlot(slots, props, "title");
const renderCenterContent = () => {
var _a2;
const content = (_a2 = slots.content) == null ? void 0 : _a2.call(slots);
if (content) {
return createVNode("div", {
"class": bemClass("__center-content")
}, [content]);
}
};
return createVNode("div", {
"class": bemClass()
}, [createVNode("div", {
"class": bemClass("__left-side")
}, [logoContainerSlot || createVNode(Space, {
"direction": "horizontal"
}, {
default: () => [logoSlot || createVNode("img", {
"alt": "logo",
"src": logo
}, null), isSmallerLg.value || createVNode(TypographyTitle, {
"style": {
margin: 0,
fontSize: "18px"
},
"heading": 5
}, _isSlot(title) ? title : {
default: () => [title]
})]
}), isSmallerLg.value && createVNode(IconMenuFold, mergeProps({
"class": ["arco-icon", bemClass("__left-side--smaller")]
}, {
onClick: () => emit("menuClick")
}), null)]), renderCenterContent(), createVNode("div", {
"class": bemClass("__right-side")
}, [(_c = slots.default) == null ? void 0 : _c.call(slots)])]);
};
}
});
export {
NavBar
};