липкая навигационная панель, показывающая во всех видах - PullRequest
Новая
       13

липкая навигационная панель, показывающая во всех видах

0 голосов
/ 02 апреля 2019

как заставить отзывчивый липкий navbar работать на рабочем столе, используя uikit
вот что я попробовал 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #transparent-sticky-navbar" style="background-color: rgba(0,0,0,.4)">
  <nav class="uk-navbar-container uk-navbar-transparent uk-height-match" uk-navbar style="position: relative; z-index: 980;height: 77px;">
    <div class="uk-navbar-center">
      <ul class="uk-navbar-nav">
        <li class="uk-active"><a href="#">Active</a></li>
        <li>
          <a href="#">Parent</a>
          <div class="uk-navbar-dropdown">
            <ul class="uk-nav uk-navbar-dropdown-nav">
              <li class="uk-active"><a href="#">Active</a></li>
              <li><a href="#">Item</a></li>
              <li><a href="#">Item</a></li>
            </ul>
          </div>
        </li>
        <li><a href="#">Item</a></li>
      </ul>
    </div>
  </nav>
</div>

навигационная панель работает на всех видах экрана, но я не хочу, чтобы она работала на планшетах и ​​мобильных устройствах
Как я могу этого достичь?

1 Ответ

0 голосов
/ 02 апреля 2019

Вы можете сделать прослушиватель для изменения размера окна, а когда ширина окна соответствует мобильному размеру, скрыть панель навигации. Я сделал это один раз так в родительском компоненте: 

data: function() {
  return {
    windowWidth: 0,
  }
},
mounted() {
  this.$nextTick(function() {
    window.addEventListener('resize', this.getWindowWidth);
    //Init
    this.getWindowWidth()
  })
},
methods: {
  getWindowWidth(event) {
    this.windowWidth = document.documentElement.clientWidth;
  },
},
beforeDestroy() {
  window.removeEventListener('resize', this.getWindowWidth);
}

И в вашем шаблоненапример (псевдокод): 

<template>
  <navbar v-if="windowWidth > 800px"></navbar>
</template>

Надеюсь, это поможет

...