Используйте Polymer3 с Django - PullRequest
Новая
       4

Используйте Polymer3 с Django

0 голосов
/ 20 февраля 2019

Как импортировать базовые компоненты полимера 3, такие как бумажные элементы и железные элементы, в django.

Компоненты Polymer1 (html-страницы) можно импортировать с использованием материала django, но он не поддерживает полимер3.см. документацию: - документация по материалу django

ошибка при попытке импортировать бумажный элемент кнопки 

Uncaught TypeError: Failed to resolve module specifier "@polymer/iron-flex-layout/iron-flex-layout.js". Relative references must start with either "/", "./", or "../".

base.html 

<!-- templates/base.html -->
{% load static %}
{% load polymerdep %}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>{% block title %}Django {% endblock %}</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>

  <script src="{% static "node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js" %}"></script>
  <script type="module" src="{% static "src/components-app/components-app.js" %}"></script>
  <script type="module" src="{% static "src/components-app/header-element.js" %}"></script>
  <script type="module" src="{% static "src/components-app/button-element.js" %}"></script>
  <script type="module" src="{% static "src/components-app/dropdown-element.js" %}"></script>
  <script type="module">
    import '../static/node_modules/@polymer/paper-button/paper-button.js';
  </script>
  {% block link %} {% endblock %}
</head>
<body>
  <main>
    {% block content %}
    {% endblock %}
  </main>
</body>
</html>

Здесь«ссылка» на самом деле бумажная кнопка, определенная в 

{% extends 'base.html' %}

{% block title %}Welcome
{% endblock %}

{% block content %}
<h1>Testtt</h1>

<a href="{% url 'login' %}">login</a>
<a href="{% url 'signup' %}">signup</a>
<button-element title='test'></button-element>
<dropdown-element></dropdown-element>
<paper-button class="pink" >link</paper-button>
{% endblock %}
...