Используйте панель вкладок html / css / js из Material Design - PullRequest
Новая
       22

Используйте панель вкладок html / css / js из Material Design

0 голосов
/ 15 марта 2019

Я пытаюсь использовать эту панель вкладок из Материальных компонентов: https://material.io/develop/web/components/tabs/tab-bar/

У меня проблемы с выполнением шагов установки.Вот что у меня есть:

tab.html: 

<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="tab.css">

  </head>
  <body>
    <div class="mdc-tab-bar" role="tablist">
      <div class="mdc-tab-scroller">
        <div class="mdc-tab-scroller__scroll-area">
          <div class="mdc-tab-scroller__scroll-content">
            <button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
              <span class="mdc-tab__content">
                <span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
                <span class="mdc-tab__text-label">Favorites</span>
                <span class="mdc-tab__text-label">Favorites2</span>
                <span class="mdc-tab__text-label">Favorites3</span>
              </span>
              <span class="mdc-tab-indicator mdc-tab-indicator--active">
                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
              </span>
              <span class="mdc-tab__ripple"></span>
            </button>
          </div>
        </div>
      </div>
    </div>

  </body>
</html>

tab.css: 

<style lang="scss"> 

@import "@material/tab-bar/mdc-tab-bar";
@import "@material/tab-scroller/mdc-tab-scroller";
@import "@material/tab-indicator/mdc-tab-indicator";
@import "@material/tab/mdc-tab";
body{ 
  background-color: blue; 
}
#app 
{ 
main 
{ 
margin-top:65px; 
} 
div.mdc-layout-app--main-container{ display: block !important;} 
div.mdc-layout-app 
{ 
max-width: 1000px; 
background-color: white !important; 
margin: 0 auto; 
} 
header.mdc-top-app-bar 
{ 
max-width: 1000px; 
} 
} 
</style>

import {MDCTabBar} from '@material/tab-bar';

const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));

Я хочу, чтобы это выглядело как демо, но сейчас это выглядит как нечто совершенно другое.Мне было интересно, если кто-то может сломать эти шаги больше для меня, потому что я очень запутался.Благодарю.Вся помощь приветствуется.

Вот как это выглядит: введите описание изображения здесь

Я хотел, чтобы оно выглядело так: введите описание изображения здесь

Ответы [ 2 ]

0 голосов
/ 19 марта 2019

Добавить Симрану свой ответ:

Я не вижу <script src="app.js"></script> в вашем HTML.

Вам необходимо скомпилировать приведенный ниже код, используя babel, и включить выходной файл в ваш HTML. 

import {MDCTabBar} from '@material/tab-bar';

const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));

Если неясно, как вы это делаете, перечитайте Начало работы

Шаг 3. Веб-пакет с ES2015 посвящен компиляции JavaScript с использованием Babel

0 голосов
/ 15 марта 2019

Вы пытаетесь запустить SCSS в браузере? Если так, то это проблема. Часть «CSS» вашего кода на самом деле представляет собой SCSS, вложенный синтаксис, который должен быть скомпилирован до обычного CSS, чтобы браузер мог его прочитать. Например:

SCSS (браузер не может прочитать) 

#app { 
  main { 
    margin-top: 65px; 
  }
}

CSS (Работает нормально) 

#app main { 
  margin-top: 65px; 
}

Материал должен предоставить вам простую версию CSS, в противном случае вам потребуется использовать компилятор.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...