>Zina: /* Виджет */

2022-10-16T19:21:46Z

Виджет

Нова сторінка

← [[Tailwind]]

== Hamburger Menu ==

=== SVG ===

<source lang="html5">
<div class="flex items-center">
<button class="outline-none">
<svg
class="w-10 h-10 text-gray-500"
x-show="!showMenu"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</source>

Источник: [https://www.section.io/engineering-education/creating-a-responsive-navigation-bar-using-tailwind-css-and-javascript/ Creating a Responsive Navigation bar Using Tailwind CSS and Javascript]

=== CSS классами Tailwind ===

<source lang="html">
<template>


<button class="hover:border-gray-500 hover:text-gray-500 w-14 h-12 text-gray-500 duration-200 border-2 border-white rounded" click.prevent="toggle">
<span class="block w-8 h-1 mx-auto my-1.5 bg-current rounded transform duration-300" :class="{ 'rotate-45 translate-y-2.5' : isBurgerActive }"></span>
<span class="block w-8 h-1 mx-auto my-1.5 bg-current rounded duration-200" :class="{ 'opacity-0' : isBurgerActive }"></span>
<span class="block w-8 h-1 mx-auto my-1.5 bg-current rounded transform duration-300" :class="{ '-rotate-45 -translate-y-2.5' : isBurgerActive }"></span>
</button>


<button
class="w-12 h-12 text-gray-500 transition-all duration-300 ease-in-out border-4 border-solid"
:class="[ isBurgerActive ? 'transform rotate-45 border-gray-500 rounded-full' : 'rounded border-opacity-0' ]"
@click.prevent="toggle"
>
<span class="block w-8 h-1 mx-auto my-1.5 bg-current rounded transform duration-300 ease-in-out" :class="{ 'w-6 transform translate-y-2.5' : isBurgerActive }"></span>
<span class="block w-8 h-1 mx-auto my-1.5 bg-current rounded duration-300" :class="{ 'w-6 opacity-0' : isBurgerActive }"></span>
<span class="block w-8 h-1 mx-auto my-1.5 bg-current rounded transform duration-300 ease-in-out" :class="{ 'w-6 -translate-y-2.5 rotate-90' : isBurgerActive }"></span>
</button>

</template>
</source>
<source lang="javascript">
<script>
export default {
data() {
return {
isBurgerActive: false,
};
},
methods: {
toggle() {
this.isBurgerActive = ! this.isBurgerActive;
},
},
};
</script>
</source>

Пример анимаций отсюда: https://codepen.io/RRoberts/pen/ZBYaJr

== Breakpoints ==

* https://tailwindcss.com/docs/breakpoints
* https://tailwindcss.com/docs/responsive-design

=== Виджет ===

Блок в левом нижнем углу, который показывает активный breakpoint:

<source lang="html">

<div class="sm:bg-red-700 md:bg-yellow-700 lg:bg-green-700 xl:bg-blue-700 2xl:bg-purple-700 rounded-tr-md fixed bottom-0 left-0 px-3 py-1 text-sm text-white bg-gray-600">
<span class="sm:hidden">< 640px</span>
<span class="sm:inline md:hidden hidden">SM ≥ 640px</span>
<span class="md:inline lg:hidden hidden">MD ≥ 768px</span>
<span class="lg:inline xl:hidden hidden">LG ≥ 1024px</span>
<span class="xl:inline 2xl:hidden hidden">XL ≥ 1280px</span>
<span class="2xl:inline hidden">XL ≥ 1536px</span>
</div>
</source>

Он же средствами CSS:

<source lang="css">
body:after {
@apply fixed right-0 bottom-0 h-6 px-3 flex justify-center items-center
content-['<_640px'] bg-pink-500
sm:content-['SM'] sm:bg-red-700
md:content-['MD'] md:bg-yellow-700
lg:content-['LG'] lg:bg-green-700
xl:content-['XL'] xl:bg-sky-700
2xl:content-['2XL'] 2xl:bg-purple-700;
}
</source>

=== Split by Breakpoints ===

* См. также: [https://csswizardry.com/2018/11/css-and-network-performance/ CSS and Network Performance – CSS Wizardry]

Предположительной лучший вариант подключения стилей ([https://github.com/tailwindlabs/tailwindcss/issues/653 обсуждение]):

<source lang="html">

<link href="xs.css" rel="stylesheet">
<link href="sm.css" rel="stylesheet" media="@media (min-width: 576px)">
<link href="md.css" rel="stylesheet" media="@media (min-width: 768px)">
<link href="lg.css" rel="stylesheet" media="@media (min-width: 992px)">
<link href="xl.css" rel="stylesheet" media="@media (min-width: 1200px)">
</source>

Решение ([https://github.com/tailwindlabs/discuss/issues/210#issuecomment-464099001 отсюда]):

Updated screens values:

<source lang="javascript">
screens: {
/* ✅ */ sm: '576px',
/* ✅ */ md: [ { min: '668px', max: '767px' }, { min: '868px' } ],
/* ✅ */ lg: { min: '992px', max: '1199px' },
/* ✅ */ xl: { min: '1200px' },
/* ✅ */ xxl: { max: '1920px' },
/* ✅ */ print: { raw: 'print' },
/* ✅ */ dark: { raw: '(prefers-color-scheme: dark)' },
},
</source>

Install [https://github.com/SassNinja/postcss-extract-media-query postcss-extract-media-query]:

npm install postcss-extract-media-query --save-dev

Updated plugin config:

<source lang="javascript">
require('postcss-extract-media-query')({
output: { path: paths.dist, name: '[name]-[query].css' },
queries: tailwindScreenQueries(),
})
</source>

<source lang="javascript">
const tailwindScreenQueries = () => {
const buildQuery = (value) => {
const getMinMaxQuery = (value) => {
return [
value.min ? `(min-width: ${value.min})` : null,
value.max ? `(max-width: ${value.max})` : null,
].filter(Boolean).join(' and ')
}

const query = typeof value === 'string'
? `(min-width: ${value})`
: Array.isArray(value)
? value.map((_value) => buildQuery(_value)).join(', ')
: value.min || value.max
? getMinMaxQuery(value)
: value.raw

return query
}

return Object
.entries(require('../../../tailwind.config.js').screens)
.map(([name, value]) => ({ [buildQuery(value)]: name }))
.reduce((accumulator, value) => Object.assign(accumulator, value))
}
</source>

== Columns ==

[https://github.com/hacknug/tailwindcss-multi-column Multi-column utilities for Tailwind CSS]

Сниппеты Tailwind - Історія редагувань

>Zina: /* Виджет */