Apa penggunaan dasar file breakpoints.yml?

Apa tujuan breakpoint didefinisikan dalam `breakpoints.yml?

Mengapa kueri media didefinisikan dalam breakpoints.yml, dan tidak dalam file CSS?

8 theming

— Prakhyat
sumber

Breakpoint adalah di mana desain responsif menyesuaikan untuk ditampilkan dengan benar pada perangkat yang berbeda. Modul Breakpoint menstandarisasi penggunaan breakpoint, dan memungkinkan modul dan tema untuk mengekspos atau menggunakan breakpoint masing-masing. Modul Breakpoint melacak ketinggian, lebar, dan resolusi breakpoint.

— Clive

Saya hanya berpikir untuk mengimplementasikan ini karena saya menggunakan tema khusus berbasis Yayasan tetapi bagi saya tampaknya saat ini tidak ada artinya sama sekali. Ya, ada modul gambar responsif tetapi pada dasarnya itu semua bagus untuk itu. Saya melihatnya lebih seperti fitur masa depan yang baik untuk dimiliki tetapi tidak tahu apakah itu akan pernah digunakan.

drupal.org/documentation/modules/breakpoint

— kmdhrm

Tidak ada cara untuk menggunakan breakpoint yang didefinisikan dalam file breakpoints.yml di CSS tanpa pra atau pasca pemrosesan. Karena kami tidak menggunakan prosesor untuk penataan gaya inti, breakpoints masih dikodekan dalam file CSS. Namun, dalam tema khusus Anda bebas menggunakan alat-alat seperti Gulp atau Grunt dan secara teori dimungkinkan untuk menggunakan input breakpoints.yml untuk pembuatan CSS Anda.

Saat ini breakpoints.yml terutama menarik untuk JavaScript (JS). Misalnya, lihatlah modul Toolbar pada intinya. Info breakpoint ditambahkan ke objek JS 'drupalSettings' di 'src / Element / Toolbar.php' seperti:

$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;
}

Kemudian di JS pengaturan run-time seperti yang didefinisikan di atas dibaca.

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

Kemudian pendengar acara ditambahkan per breakpoint sehingga 'sesuatu' dapat dilakukan ketika ukuran layar berubah.

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));
  }
}

Jika terjadi perubahan, berbagai tindakan dapat dilakukan per breakpoint.

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;
    }
  }
};

Catatan : contoh kode diambil dari modul Drupal Toolbar dan dilucuti. Gunakan sebagai inspirasi, bukan sebagai kode fungsional.

Penjelasan yang baik tentang penggunaan JS mediaQueries secara umum dapat ditemukan di sini: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries

— dmsmidt
sumber