vue导航栏项目_适用于Vue项目的简单美观的导航栏

vue导航栏项目

导航栏 (vue-navigation-bar)

A simple, pretty navbar for your Vue projects. (A work in progress for a few more days maybe) .

适用于Vue项目的简单，漂亮的导航栏。 (也许正在进行几天的工作)。

View demo 查看演示 Download Source 下载源

安装 (Install)

# npm
npm i vue-navigation-bar

#yarn
yarn add vue-navigation-bar

Or you can include it through the browser at the bottom of your page along with the css:

或者，您可以通过页面底部的浏览器将其与CSS一起包括在内：

<!-- Please note if you're using the browser method you're going to want to adjust the version number as needed. The number given there is just the initial version. -->

<script src="https://unpkg.com/[email protected]/dist/vue-navigation-bar.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/vue-navigation-bar.css">

关于 (About)

Often when starting a new project I like to get together the main foundation pieces first. A main part of that process is working on the main navbar.

通常，在开始一个新项目时，我喜欢先将主要的基础部件放在一起。 该过程的主要部分是在主导航栏上进行工作。

This component is meant to help with that process - it gives you a standard looking navigation bar for for your app that can be easily defined using JSON or a just an array of objects.

该组件旨在帮助您完成该过程-它为您的应用程序提供了标准外观的导航栏，可以使用JSON或仅由对象数组轻松定义。

vue-navigation-bar is meant to be used for the 80% of cases that exist when you need a standard navbar for your app/website. The layout has the brand-image anchored on the left side, and two slots for menu-options that push and pull based on designation.

当您的应用程序/网站需要标准导航栏时， vue-navigation-bar用于80％的情况。 布局的左侧有brand-image ，两个插槽用于menu-options ，可根据指定进行推拉。

I know there are lots of other styles that navbar's can be, for instance the brand-image could be in the middle - but this component won't be allowing you to do that - so if that's your thing then I would probably look to roll out something on your own, or fork this to apply to your needs if possible. That being said, the actual css here is very easy to override - I'm using BEM with SASS (.scss) and have the style skeleton posted below - so you should be able to style it quite nicely without issue. I've put a lot of time in placing sensible defaults that should work well against any style.

我知道导航栏可以有很多其他样式，例如brand-image可能在中间-但是此组件将不允许您这样做-因此，如果这是您的事，那么我可能会想您可以自己解决一些问题，或者在可能的情况下将其应用于您的需求。 话虽这么说，这里的实际css很容易被覆盖-我正在将BEM与SASS ( .scss )一起使用，并在下面贴上样式框架-因此，您应该可以对它进行漂亮的样式设置而不会出现问题。 我花了很多时间来放置明智的默认值，该默认值应该适合任何样式。

The trade-off is that the initialization and