Импорт JS

Импорт JS компонента

Большинство компонентов поставляются с классами Component / Foundation, которые используются для предоставления полноценного компонента Material Design. В зависимости от используемой вами технологии, есть несколько способов импорта JavaScript.

ES Modules

import {MDCFoo, MDCFooFoundation} from '@material/foo';

Обратите внимание, что пакеты MDC Web указывают main на предварительно скомпилированные UMD модули под dist, чтобы максимизировать совместимость. Инструменты сборки часто предполагают, что зависимости под node_modules уже написаны на ES5, и поэтому пропускают транспиляцию.

Однако, если вы хотите воспользоваться преимуществами tree-shaking и разделения зависимостей внутри кода MDC Web для уменьшения размера ваших собранных активов, вы должны явно ссылаться на index.js пакета:

import {MDCFoo, MDCFooFoundation} from '@material/foo/index';

Некоторые инструменты сборки обнаруживают свойство module в package.json, которое указывает на ES Module, содержащий только синтаксис ES5. Если вы используете Webpack или Rollup, вам не нужно ссылаться на /index напрямую, и вы можете продолжать использовать более короткий синтаксис импорта @material/foo.Обратите внимание, что в этом случае вы должны убедиться, что ваша цепочка сборки настроена для обработки модулей MDC Web, а также ваших собственных.

Дополнительные сведения о настройке среды см. в руководстве по началу работы.

TypeScript

Если вы используете TypeScript, пакеты MDC Web также включают файлы .d.ts для вашего использования. В большинстве случаев вам не нужно явно ссылаться на эти файлы, так как компилятор TypeScript должен автоматически находить их через свойство types в package.json. В папке dist находится объединённый файл .d.ts, который соответствует соответствующему UMD модулю. Для каждого фундамента/компонента/адаптера и т.д. в пакете есть соответствующие файлы .d.ts.

ВАЖНО: Мы намеренно исключаем файлы исходного кода .ts из наших пакетов, так как файлы .d.ts и транспирированные .js (в формате UMD или ES Module) являются универсально принятыми.

CommonJS

const mdcFoo = require('@material/foo');
const MDCFoo = mdcFoo.MDCFoo;
const MDCFooFoundation = mdcFoo.MDCFooFoundation;

AMD

require(['path/to/@material/foo'], mdcFoo => {
  const MDCFoo = mdcFoo.MDCFoo;
  const MDCFooFoundation = mdcFoo.MDCFooFoundation;
});

Global / CDN

const MDCFoo = mdc.foo.MDCFoo;
const MDCFooFoundation = mdc.foo.MDCFooFoundation;

Создание экземпляров компонентов с помощью запросов CSS-селекторов

Многие примеры в документации MDC Web демонстрируют, как создать экземпляр компонента для одного элемента на странице:```js const foo = new MDCFoo(document.querySelector('.mdc-foo'));

Это предполагает, что на всей странице есть только один элемент интереса, поскольку `document.querySelector` всегда возвращает не более одного элемента (первое найденное совпадение).

Чтобы создать экземпляры компонентов для **нескольких** элементов одновременно, используйте `querySelectorAll`:

```js
const foos = [].map.call(document.querySelectorAll('.mdc-foo'), function(el) {
  return new MDCFoo(el);
});