Полимерная бумага-диалог на фоне непрозрачности?

У меня есть бумажный диалог в моем элементе Polymer. Я хочу сделать фон непрозрачным, сейчас он полупрозрачный. Я также хотел бы изменить цвет.

Кто нибудь знает как это сделать. Я уже пробовал этот CSS в моем пользовательском элементе:

<style is="custom-style">
--iron-overlay-backdrop-opacity:1;
</style>

<paper-dialog modal></paper-dialog>

Но это не имело никакого эффекта.

Я тоже пробовал

<style is="custom-style">
:host {
  --iron-overlay-backdrop-opacity:1;
}
</style>

<paper-dialog modal></paper-dialog>
Источник

1 ответ

Решение

iron-overlay-backdrop добавляется непосредственно к телу документа, вне вашего пользовательского элемента, и из-за CSS-инкапсуляции Polymer вы не можете стилизовать фон с помощью <style> изнутри элемента.

Тем не менее, ваш элемент может обязательно стилизовать фон с Polymer.updateStyles(...), который обновляет стили для всех пользовательских элементов, включая iron-overlay-backdrop вне вашей стихии:

Polymer.updateStyles({
  '--iron-overlay-backdrop-background-color': 'red',
  '--iron-overlay-backdrop-opacity': '1'
});


<head>
  <base href="https://polygit.org/polymer+1.11.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="paper-dialog/paper-dialog.html">
</head>
<body>

  <div>Click button for dialog</div>
  <x-demo></x-demo>

  <dom-module id="x-demo">
    <template>
      <x-dialog id="blue" backdrop-color="blue" backdrop-opacity="1"></x-dialog>
      <x-dialog id="red" backdrop-color="red" backdrop-opacity="0.2"></x-dialog>
      <x-dialog id="green" backdrop-color="green" backdrop-opacity="0.5"></x-dialog>
      <paper-button on-tap="_openDialog" data-dialog="blue">Blue (opacity 100%)</paper-button>
      <paper-button on-tap="_openDialog" data-dialog="red">Red (opacity 20%)</paper-button>
      <paper-button on-tap="_openDialog" data-dialog="green">Green (opacity 50%)</paper-button>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-demo',
          _openDialog: function(e) {
            var dialog = e.target.dataset.dialog;
            this.$[dialog].opened = true;
          }
        })
      });
    </script>
  </dom-module>

  <dom-module id="x-dialog">
    <template>
      <paper-dialog modal with-backdrop opened="{{opened}}">
        <div class="buttons">
          <paper-button dialog-dismiss>Close</paper-button>
        </div>
      </paper-dialog>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-dialog',
          properties: {
            backdropColor: {
              type: String,
              value: 'green'
            },
            backdropOpacity: {
              type: String,
              value: '0.6'
            },
            opened: {
              type: Boolean,
              value: false
            }
          },

          observers: ['_updateBackdrop(opened, backdropColor, backdropOpacity)'],

          _updateBackdrop: function(opened, color, opacity) {
            if (opened && color && opacity) {
              Polymer.RenderStatus.afterNextRender(this, function() {
               this._setBackdropStyles(color, opacity);
              });
            }
          },
          _setBackdropStyles: function(color, opacity) {
            Polymer.updateStyles({
              '--iron-overlay-backdrop-background-color': color,
              '--iron-overlay-backdrop-opacity': opacity
            });
          }
        });
      });
    </script>
  </dom-module>
</body>

codepen

Или, чтобы установить фиксированный статический стиль для всех фонов, используйте <style is="custom-style"> из тела:

<body>
  <style is="custom-style">
    iron-overlay-backdrop {
      --iron-overlay-backdrop-opacity: 1;
      --iron-overlay-backdrop-background-color: green;
    }
  </style>
  <x-dialog></x-dialog>
</body>


<head>
  <base href="https://polygit.org/polymer+1.11.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="paper-dialog/paper-dialog.html">
</head>
<body>
  <style is="custom-style">
    iron-overlay-backdrop {
      --iron-overlay-backdrop-opacity: 1;
      --iron-overlay-backdrop-background-color: green;
    }
  </style>
  <div>Hello world</div>
  <x-dialog></x-dialog>

  <dom-module id="x-dialog">
    <template>
      <paper-dialog modal with-backdrop opened>
        <div class="buttons">
          <paper-button dialog-dismiss>Close</paper-button>
        </div>
      </paper-dialog>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({ is: 'x-dialog' });
      });
    </script>
  </dom-module>
</body>

codepen

Источник
Другие вопросы по тегам