Как добавить панель поиска в панель навигации и справиться с отзывчивостью в другом сценарии с Buefy? - PullRequest
Новая
       32

Как добавить панель поиска в панель навигации и справиться с отзывчивостью в другом сценарии с Buefy?

0 голосов
/ 04 февраля 2020

Я новичок, и я изо всех сил стараюсь изучать Buefy с vuejs, кажется, что не так много ресурсов (учебные и внешние материалы для сайта, чтобы помочь).

Вот что мне нужно в my navbar:

Ссылка на домашнюю страницу

  • -Ссылка на страницу исполнителя

  • -Ссылка на отключение

  • Ссылка на пользователей

  • - поле поиска

ПЕРВАЯ ПРОБЛЕМА Итак, моя проблема я чувствую, что добавил поле поиска неправильно (когда я проверяю скорость отклика, оно падает на мою страницу, ссылку на исполнителя и альбом). Это заставляет меня думать, что я неправильно добавил это в своей навигационной панели.

ВТОРАЯ ОТВЕТСТВЕННОСТЬ ПРОБЛЕМЫ Как вы справляетесь с индивидуальной реакцией? Вот вещи, которые я должен уважать для другого дисплея:

  • -Mobile: меню можно скрыть / показать с помощью JS EST скрыто по умолчанию

  • -Tablet: меню меньше и дает больше мест для исполнителя и страниц альбома.

  • -Standard: меню отображается по умолчанию и больше.

Большое спасибо, если вы можете помочь в любом случае! 

<template>
  <b-navbar>
    <template slot="start">
      <b-navbar-item class="link" tag="router-link" to="/Home"
        >Home</b-navbar-item
      >
      <b-navbar-item class="link" tag="router-link" to="/Album"
        >Album</b-navbar-item
      >
      <b-navbar-item class="link" tag="router-link" to="/Artist"
        >Artist</b-navbar-item
      >
      <div class="searchbox">
        <b-field>
          <b-input
            placeholder="Search..."
            type="search"
            icon="magnify"
          ></b-input>
          <p class="control">
            <button class="button is-primary">Search</button>
          </p>
        </b-field>
      </div>
      <div class="buttons">
        <a class="button is-primary"><strong>Dany Pepin</strong></a>
        <a class="button is-primary"><strong>Parameters</strong></a>
        <a class="button is-primary"><strong>Logout</strong></a>
      </div>
    </template>
  </b-navbar>
</template>

<style>
.searchbox {
  position: absolute;
  right: 30%;
}

.buttons {
  position: absolute;
  right: 0%;
}

.link {
  position: absolute;
  margin-left: 50%;
  margin-right: 50%;
}
</style>
...