Изменение разметки расширяемого текстового поля MDL и поиск существующих имен разметки

Я новичок в MDL и пытаюсь понять, как его использовать на самом деле, помимо полностью готовых примеров.

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

<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.cyan-indigo.min.css" />
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title">Title</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="#">Home</a> 
        <a class="mdl-navigation__link" href="#">About</a>
        <a class="mdl-navigation__link" href="#">Contact</a>
      </nav>
      <!-- start search form -->
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
        <label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable">
          <i class="material-icons">search</i>
        </label>
        <div class="mdl-textfield__expandable-holder">
          <input class="mdl-textfield__input" type="text" id="search-expandable" />
          <label class="mdl-textfield__label" for="search-expandable">Search text</label>
        </div>
      </div>
      <!-- end search form -->
    </div>
  </header>
</div>

Я попытался заменить

<input class="mdl-textfield__input" type="text" id="search-expandable" />

с

<input class="mdl-textfield__input--white" type="text" id="search-expandable" />

but that made the textbox white even when it wasn't expanded, which looks funny.

Мои вопросы:

  1. Как я могу добиться изменения только цвета окна поиска при его расширении?

  2. Используя схему именования БЭМ, я просто догадался, что mdl-textfield__input--white был где-то определен, и, видимо, так оно и есть, потому что поле стало белым. Схема именования дает мне возможность начать строить догадки, но какой простой способ узнать, что на самом деле уже определено, а что мне нужно определить самому?

    Я понял, как использовать инструменты разработчика браузера, чтобы перейти к css данного класса и деминифицировать его, но, оказавшись там, все еще трудно найти доступные варианты. Затем я попробовал mdl-textfield__input -- зеленый (гадость), но он остался белым. И я не смог найти с помощью инструментов разработчика определения стиля --white или --green, так что, возможно, их не существует.

  3. Является ли mdl-textfield__input--white хорошим выбором/стилем/именем? Название понятное, но что, если я изменю цветовую схему на веб-сайте, где белый не будет хорошим контрастом?


material-design-lite
person kvarkel    schedule 17.11.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

1) Используйте пользовательский CSS для изменения цвета. Вам нужно будет проверить активные состояния и все такое, но это будет сложно понять с помощью Chrome DevTools. Просто разверните его, осмотрите узел и посмотрите, как нацелить его, поскольку он только развернут.

2а) mdl-textfield--white конечно не определено. Я понятия не имею, что там происходит, но это не должно работать (если только вы не не определяете также mdl-textfield, тогда я могу понять, почему оно становится белым).

2b) Чтобы узнать, что определено для каждого компонента, просто посетите страницу документации компонентов. Или вы всегда можете просто открыть Chrome Devtools, перейти на панель «Источники», открыть material.css (или .min.css), а затем просто выполнить быстрый поиск кода с помощью ctrl +f. Если вы не видите, что его там находят, он никогда не определяется.

3) Пожалуйста, не создавайте пользовательские классы, использующие пространство имен mdl. Это может столкнуться с будущими дополнениями. Создавайте свои собственные классы, за которые вы отвечаете. Что касается их именования, это полностью зависит от вас, какой метод именования вы предпочитаете. Мы выбрали BEM для MDL, поскольку он обеспечивает четкую структуру для компонентов, предоставленных третьей стороной.

person Garbee    schedule 19.11.2015
comment
Спасибо за ваш ответ. Сначала я не осознавал, что страницы документации компонентов включают все доступные классы — я думал, что это больше похоже на образец. Одна из причин, по которой я смотрю на MDL, заключается в том, что мои навыки css не являются звездными, но, надеюсь, использование MDL и BEM уменьшит сложность до такой степени, что я смогу использовать их, чтобы помочь себе, а не забивать себе голову. - person kvarkel; 20.11.2015
comment
Он включает в себя все классы, о которых вы должны знать прямо сейчас. Некоторых второстепенных не хватает, но они также, вероятно, будут удалены со следующим основным. Сейчас я работаю над обновлением документации, чтобы сделать ее более полной и легкой для понимания. - person Garbee; 21.11.2015