Строительные блоки не работают через панини в стеке Foundation 6 Zurb - PullRequest
Новая
       15

Строительные блоки не работают через панини в стеке Foundation 6 Zurb

0 голосов
/ 30 декабря 2018

В новой установке стека Foundation 6 Zurb, установка строительного блока sticky-shrinknav и вставка его в шаблон index.html с помощью {{> sticky-shrinknav}} показывает компонент на странице, но прокрутка страницы не приводит к ожидаемомурезультат.

Попытка установки стека Zurb несколько раз в разных местах.Получаются те же результаты.

Это шаблон index.html: 

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Veridata</title>
    <link rel="stylesheet" href="{{root}}assets/css/app.css">
  </head>
  <body>
    {{> sticky-shrinknav}}
    {{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
    {{> body}}

    <script src="{{root}}assets/js/app.js"></script>
  </body>
</html>

Мой файл app.scss содержит: 

@import 'components/building-blocks/sticky-shrinknav';

, а мой config.yml содержит: 

# Paths to JavaScript entry points for webpack to bundle modules
entries:
    - "src/assets/js/building-blocks/sticky-shrinknav.js"
    - "src/assets/js/app.js"

Ожидается то же, что показано на этой странице: https://foundation.zurb.com/building-blocks/blocks/sticky-shrinknav.html

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

РЕДАКТИРОВАТЬ: это содержимое файла app.js: 

import $ from 'jquery';
import 'what-input';

// Foundation JS relies on a global varaible. In ES6, all imports are hoisted
// to the top of the file so if we used`import` to import Foundation,
// it would execute earlier than we have assigned the global variable.
// This is why we have to use CommonJS require() here since it doesn't
// have the hoisting behavior.
window.jQuery = $;
require('foundation-sites');

// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
//import './lib/foundation-explicit-pieces';


$(document).foundation();

1 Ответ

0 голосов
/ 31 декабря 2018

Вы должны импортировать компонент sticky-shrinknav в ваш app.js (если вы хотите связать его там).В противном случае вы также должны включить сгенерированный пакет в ваш html-файл.

Но в общем случае вам нужно const $ = require('jquery') или import $ from 'jquery' в качестве первой строки в файле sticky-shrinknav, чтобы загрузить для него jQuery.

...