@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>
47 lines (46 loc) • 1.94 kB
JavaScript
import { style } from "../../../style/var.js";
import { createVNode, defineComponent, isVNode, mergeProps } from "vue";
import { Space, TypographyTitle } from "@arco-design/web-vue";
import { propsSlot, useShareBreakpoints } from "@vrx-arco/use";
import IconMenuFold from "@vrx-arco/icons-vue/IconMenuFold";
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 () => {
const { logo } = props;
const logoSlot = slots.logo?.();
const logoContainerSlot = slots.logoContainer?.();
const title = propsSlot(slots, props, "title");
const renderCenterContent = () => {
const content = slots.content?.();
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") }, [slots.default?.()])
]);
};
}
});
export { NavBar };