Wrapper css: Как стилизовать wrapper в CSS

Leave a Comment / Css / By alexxlab / 05.04.2023

Содержание

Wrapper — Tailwind CSS

Usage

Объект wrapper задает max-width элемента в соответствии с предопределенной шириной, заданной в конфигурации темы.

Обычно это достигается в Tailwind путем применения следующих классов:

Однако это часто сразу передается компоненту, так как это постоянно повторяется в проекте.

Объект Wrapper в Captain предоставляет стандартизированный способ определить ширину и отступы обертки, а затем использовать его. легко.

 <дел>

Класс-оболочка применяет максимальную ширину и отступы, как определено в конфигурации Tailwind.

Заполнение может быть установлено для каждой точки останова и будет применяться, когда экран достигнет этой точки останова.

Наконец, когда ширина экрана больше ширины оболочки, она будет автоматически центрирована в своем контейнере.

См. параметры настройки для получения дополнительной информации о настройке оболочки.

Модификаторы

Класс обертки также включает два модификатора из коробки для оберток разного размера:

 
<дел>

<дел>

Имена модификаторов и размеры ширины могут быть переопределены или расширены в вашей конфигурации попутного ветра. См. параметры настройки ниже.

Элементы

Класс оболочки имеет два элемента, которые можно применить к любому дочернему элементу внутри оболочки.

Эти элементы предназначены для того, чтобы позволить содержимому легко «вырваться» из оболочки, например, для полноэкранного кровотечения. например, изображения в постах с контентом.

 
<дел>
    <изображение>

<дел> <изображение>

Настройка

Max Width

Чтобы изменить максимальную ширину, доступную для класса оболочки , укажите имя и ширину, используя параметр maxWidth в разделе theme.wrapper вашего файла конфигурации:

 // tailwind.config .js
модуль.экспорт = {
  тема: {
    обертка: {
+ максимальная ширина: {
+ ПО УМОЛЧАНИЮ: «80rem»,
+ см: '70рем',
+ },
    },
  },
}

Если у вас есть только одна ширина оболочки, вы можете указать одну ширину в качестве сокращения:

 // tailwind.config.js
модуль.экспорт = {
  тема: {
    обертка: {
+ maxWidth: '80rem',
    },
  },
}

Горизонтальное заполнение

Чтобы изменить горизонтальное заполнение, добавленное в класс -оболочки , укажите имя точки останова и требуемое количество отступов, используя опцию

padding в разделе theme.wrapper вашего конфигурационного файла:

 // tailwind. config.js
модуль.экспорт = {
  тема: {
    обертка: {
+ дополнение: {
+ ПО УМОЛЧАНИЮ: «1 бэр»,
+ мд: '2рем',
+ lg: '3,5 бэр',
+ },
    },
  },
}

Любые не определенные точки останова будут наследовать от значения предыдущей точки останова в порядке возрастания или по умолчанию, если не указано ничего ниже.

Если вам не нужны разные отступы для каждой точки останова, вы можете вместо этого указать одно значение заполнения для всех точек останова:

 // tailwind.config.js
модуль.экспорт = {
  тема: {
    обертка: {
+ прокладка: '1rem',
    },
  },
}

Вы также можете использовать значения из остальной части конфигурации темы, либо с помощью помощника темы, либо путем импорта конфигурации по умолчанию:


  // tailwind.config.js
модуль.экспорт = {
  тема: {
    обертка: {
+ дополнение: (тема) => ({
+ ПО УМОЛЧАНИЮ: тема('spacing.4'),
+ 'md': тема('spacing.6'),
+ }),
    },
  },
};

Узнайте больше об этом в документации Tailwind для ссылок на другие значения.

Варианты

По умолчанию для утилит-оболочек создаются только адаптивные варианты.

Вы можете контролировать, какие варианты генерируются для утилит-оболочек, изменяя wrapper в разделе вариантов файла tailwind.config.js .

Например, этот конфиг отключит все варианты:

 // tailwind.config.js
  модуль.экспорт = {
    варианты: {
      // ...
+ обертка: [],
    }
  }

Если вы не планируете использовать утилиты-оболочки в своем проекте, вы можете полностью отключить их, установив для свойства wrapper значение

false в

 Captain.plugins 9Раздел 0006 вашего файла конфигурации:
 // tailwind.config.js
  модуль.экспорт = {
    капитан: {
      плагины: {
        // ...
+ обертка: ложь,
      }
    }
  } 
 Примечание о позиции CSS: Sticky и Wrappers 
 Давайте рассмотрим пример 
 Давайте рассмотрим небольшой пример того, что делает CSS-трюк.
 Еще один краткий обзор примера того, как работает прилипание, можно найти здесь.
 Код CSS очень прост и удобен в использовании. Тем не менее, есть несколько вещей, которые мы должны принять во внимание. Прежде всего, обратите внимание, что sticky всегда будет оставаться липким внутри своего родительского контейнера. В предыдущем примере (вы можете проверить HTML-код, если хотите) я задал контейнеру высоту 500 пикселей, а затем абзац будет прокручиваться вокруг контейнера, пока не закончится. Это означает, что контейнер всегда обтекает фон, но абзац, который был оформлен как липкий, кажется плавающим, когда прокрутка перемещается вниз , в своего рода фиксированном положении, пока не закончится.
 Это относится к двум частям, которые составляют свойство sticky в CSS. Одно дело — липкий элемент/предмет, который будет прилипать. Sticky элемент будет прикрепляться к липкому контейнеру. Контейнер  Sticky  – это контейнер, в котором будет храниться предмет.
 Это быстро и просто, но что происходит, когда дело доходит до создания липких элементов внутри контейнеров, оберток и тому подобного?  ¿Что произойдет, если мы сможем добавить липкий класс только к дочернему контейнеру, обернутому вокруг чертовой обертки?    Для создания этого блога я использую Joomla и Balbooa Gridbox. Не поймите меня неправильно, это фантастическая команда российских разработчиков, которая делает разработку Joomla намного проще и совершеннее. Однако в этом компоновщике, а также во многих компоновщиках WordPress, таких как  divi  или  elementor  , вы обнаружите, что со многими из этих липких атрибутов гораздо сложнее возиться из-за всех добавленных элементов-оболочек, которые окружают любой пользовательский HTML. что вы можете сделать липким.
 Давайте рассмотрим пример.
 В приведенном выше примере мы хотели бы, чтобы наш липкий текст перемещался по основному контейнеру, однако, поскольку он содержится внутри другого контейнера-оболочки меньшего размера, сам элемент не будет сильно задерживаться.
 Моим первым обходным решением было использование родительского селектора. У нас уже есть дочерний > селектор для выбора .class > .childs, и они существуют уже некоторое время. Итак, я подумал ... хорошо, если мы инвертируем оператор, родительский селектор должен существовать одинаково, таким образом, мы могли бы выбрать .wrapper < .sticky, а затем применить свойство sticky css к родительской оболочке ... легко, верно?
  Нет...   по-видимому, как я обнаружил позже, родительских селекторов не существует. Я был почти возмущен мгновенно ... поэтому мне пришлось копаться в поисках небольшого объяснения того, почему такая тривиальная вещь, как это, не работала, пока я сначала не нашел этот пост, а затем этот пост, объясняющий, почему. (  TL; DR. По-видимому,  существует много проблем с производительностью, связанных с тем, как браузер будет отображать html и css).
 Итак, какие обходные пути мы можем использовать для решения этой проблемы? Первое, что пришло мне в голову, это javascript. Javascript разрешает родительский селектор
 Мы могли бы использовать простые сценарии javascript, которые загружают выбор родителя (или родителя родителя) с помощью jquery или собственного javascript. Это не так элегантно, как использование простого CSS, но помогает.
 Для этой цели в CSS также был создан псевдоселектор с именем has(). что-то вроде .cointainer:has(sticky) будет получать только контейнеры или обертки, которые содержат элемент с липким классом внутри них. Это также было бы отличной реализацией, однако, несмотря на то, что это было указано, ни один из браузеров на самом деле еще не поддерживает это (на дату создания этой статьи. Вы можете проверить этот веб-сайт, если к моменту чтения какой-либо браузер уже реализован этот класс.)
 ВЫБОР ДАТЧИКА ПРОСТО НЕ ДОСТАТОЧЕН 
 Если, как и я, вы думаете о выборе класса с помощью .container > .sticky , этого будет недостаточно. Нам нужно применить свойство sticky к классу контейнера, а не к самому классу sticky.