Breakpoints.yml dosyasının temel kullanımı nedir?

Breakpoints.yml içinde tanımlanan kesme noktalarının amacı nedir?

Medya sorguları neden CSS dosyalarında değil, breakpoints.yml dosyasında tanımlanıyor?

8 theming

— Prakhyat
kaynak

Kesme noktaları, duyarlı bir tasarımın farklı cihazlarda doğru görüntülenmesi için ayarlandığı yerdir. Kesme Noktaları modülü kesme noktalarının kullanımını standartlaştırır ve modüllerin ve temaların birbirlerinin kesme noktalarını açığa çıkarmasını veya kullanmasını sağlar. Kesme noktası modülü yükseklik, genişlik ve çözünürlük kesme noktalarını izler.

— Clive

Vakıf tabanlı özel temayı kullandığım için bunu uygulamayı düşünüyorum ama bana şu anda bunun hiçbir anlamı olmadığını düşünüyorum. Evet, duyarlı görüntü modülü var ama temelde hepsi için iyi. Daha çok gelecekteki iyi bir özellik gibi görüyorum, ancak hiç kullanılıp kullanılamayacağını bilmiyorum.

drupal.org/documentation/modules/breakpoint

— kmdhrm

Bir breakpoints.yml dosyasında tanımlanan kesme noktalarını, CSS'de ön işlem veya son işlem yapmadan kullanmanın bir yolu yoktur. Çekirdeği şekillendirmek için işlemciler kullanmadığımız için kesme noktaları hala CSS dosyalarında sabit olarak kodlanmıştır. Bununla birlikte, özel bir temada Gulp veya Grunt gibi araçları kullanmakta özgürsünüz ve teorik olarak CSS jenerasyonunuz için breakpoints.yml girdisini kullanmak mümkün olacaktır.

Şu anda breakpoints.yml çoğunlukla JavaScript (JS) için ilginçtir. Örneğin, temel Araç Çubuğu modülüne bir göz atın. Kesme noktası bilgisi 'src / Element / Toolbar.php' içindeki 'drupalSettings' JS nesnesine şu şekilde eklenir:

$breakpoints = static::breakpointManager()->getBreakpointsByGroup('toolbar');
if (!empty($breakpoints)) {
  $media_queries =  array();
  foreach ($breakpoints as $id => $breakpoint) {
    $media_queries[$id] = $breakpoint->getMediaQuery();
  }

  $element['#attached']['drupalSettings']['toolbar']['breakpoints'] = $media_queries;
}

Daha sonra JS'de yukarıda tanımlanan çalışma zamanı ayarları okunur.

var options = $.extend(
  {
    breakpoints: {
      'toolbar.narrow': '',
      'toolbar.standard': '',
      'toolbar.wide': ''
    }
  },
  drupalSettings.toolbar
);

Daha sonra kesme noktası başına bir olay dinleyicisi eklenir, böylece ekran boyutu değiştiğinde 'bir şeyler' yapılabilir.

for (var label in options.breakpoints) {
  if (options.breakpoints.hasOwnProperty(label)) {
    var mq = options.breakpoints[label];
    var mql = Drupal.toolbar.mql[label] = window.matchMedia(mq);
    mql.addListener(Drupal.toolbar.mediaQueryChangeHandler.bind(null, model, label));
  }
}

Bir değişiklik olması durumunda, kesme noktası başına farklı eylemler gerçekleştirilebilir.

Drupal.toolbar = {
  mediaQueryChangeHandler: function (model, label, mql) {
    switch (label) {
      case 'toolbar.narrow':
        model.set({
          isOriented: mql.matches,
          isTrayToggleVisible: false
        });
        break;

      case 'toolbar.standard':
        // Logic
        break;

      case 'toolbar.wide':
        // Logic
        break;

      default:
        break;
    }
  }
};

Not : kod örnekleri Drupal Araç Çubuğu modülünden alınır ve sıyrılır. Fonksiyonel kod olarak değil ilham olarak kullanın.

Genel olarak JS mediaQueries kullanımı hakkında iyi bir açıklama burada bulunabilir: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries

— dmsmidt
kaynak