Как включить выделенное текстовое поле Material.io в приложение, отличное от Node.js - PullRequest
Новая
       53

Как включить выделенное текстовое поле Material.io в приложение, отличное от Node.js

0 голосов
/ 26 июня 2018

Я использую Material Design с моим приложением, отличным от Node.js. Мне нужно использовать текстовое поле Материал с контуром (с ведущим значком) в моем HTML-проекте. Веб-сайт Material.io показывает код JavaScript для некоторых компонентов, но не показывает его для других. Как я могу добавить выделенный компонент текстового поля в мой HTML-проект?

Ниже мой код: 

<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" />

    </head>
    <body>
        <!--button class="mdc-button mdc-button--raised">Button</button-->
         

        <div class="mdc-text-field mdc-text-field--outlined">
            <input type="text" id="tf-outlined" class="mdc-text-field__input" />

            <label for="tf-outlined" class="mdc-floating-label">Your Name</label>
            <div class="mdc-notched-outline">
                <svg>
                    <path class="mdc-notched-outline__path"></path>
                </svg>
            </div>
            <div class="mdc-notched-outline__idle"></div>
        </div>
        <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    </body>
</html>

Скрипка для этого кода: jsfiddle

Ответы [ 2 ]

0 голосов
/ 29 июня 2018

Поскольку сложно разобраться, как начать работу с компонентами материалов, я помогу вам с самой простой версией выделенного текстового поля с ведущей пиктограммой, которую вы ищете (в этом примере используется плавающая метка, щелкните текстовое поле для эффекта). Вам действительно нужно просмотреть документацию по mdc-textfield . Помимо html-исправлений, которые вы увидите ниже, обязательно обратите внимание на последний тег script, который создает экземпляр javascript MDC для текстового поля (это часто приводит в замешательство людей, когда они пытаются начать работу). Вы также можете использовать mdc.autoInit() с data-mdc-auto-init разметкой для создания экземпляров компонентов MDC (подробности см. В документах Auto Init ). 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Material TextField Quick Start</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">   
  </head>

  <body>
  
    <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
      <i class="material-icons mdc-text-field__icon" tabindex="0" role="button">event</i>
      <input type="text" id="field-id" class="mdc-text-field__input">
      <label for="field-id" class="mdc-floating-label">Label</label>
      <div class="mdc-notched-outline">
        <svg>
          <path class="mdc-notched-outline__path"/>
        </svg>
      </div>
      <div class="mdc-notched-outline__idle"></div>
    </div>
    
    <script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>
    <script>mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));</script>
    
  </body>
</html>
0 голосов
/ 26 июня 2018

В самих документах MDL есть ресурсы о том, как включить компоненты, просто используя стандартные теги <link> и <script>.

Документы: https://material.io/develop/web/docs/getting-started/

...