This page is being translated; the original is shown (Русский ).
Изменение размера
Классы resize-* задают свойство resize: можно ли растянуть элемент за
правый нижний угол и в каком направлении. Берите их для текстовых областей и
блоков с прокруткой.
Пример
Текстовая область
Тяните за угол в правом нижнем углу поля. Под каждым полем — класс.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 sm:grid-col-2 gap-4" >
<div class ="flex flex-col gap-1 items-start" >
<textarea class ="resize w-full h-e2 p-2 border border-outline radius-ui bg-surface color-on-surface" aria-label ="resize" >Тяните за угол в любую сторону</textarea >
<code class ="text-1/2 color-on-surface-variant" >resize</code >
</div >
<div class ="flex flex-col gap-1 items-start" >
<textarea class ="resize-y w-full h-e2 p-2 border border-outline radius-ui bg-surface color-on-surface" aria-label ="resize-y" >Тяните за угол вверх и вниз</textarea >
<code class ="text-1/2 color-on-surface-variant" >resize-y</code >
</div >
<div class ="flex flex-col gap-1 items-start" >
<textarea class ="resize-x w-full h-e2 p-2 border border-outline radius-ui bg-surface color-on-surface" aria-label ="resize-x" >Тяните за угол влево и вправо</textarea >
<code class ="text-1/2 color-on-surface-variant" >resize-x</code >
</div >
<div class ="flex flex-col gap-1 items-start" >
<textarea class ="resize-none w-full h-e2 p-2 border border-outline radius-ui bg-surface color-on-surface" aria-label ="resize-none" >Угла для растягивания нет</textarea >
<code class ="text-1/2 color-on-surface-variant" >resize-none</code >
</div >
</div >
Блок
Обычный блок растягивается, только если у него задан overflow со значением,
отличным от visible. Без него угла нет.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 sm:grid-col-2 gap-4" >
<div class ="flex flex-col gap-1 items-start" >
<div class ="resize overflow-auto w-f0 h-e6 p-2 border border-outline radius-ui bg-surface-container color-on-surface" >Блок можно растянуть за угол</div >
<code class ="text-1/2 color-on-surface-variant" >resize overflow-auto</code >
</div >
<div class ="flex flex-col gap-1 items-start" >
<div class ="resize w-f0 h-e6 p-2 border border-outline radius-ui bg-surface-container color-on-surface" >Без overflow угла нет</div >
<code class ="text-1/2 color-on-surface-variant" >resize</code >
</div >
</div >
Классы
Класс
CSS
Значения
resize-none--sf-resize: none; resize: var(--sf-resize)—
resize-y--sf-resize: vertical; resize: var(--sf-resize)—
resize-x--sf-resize: horizontal; resize: var(--sf-resize)—
resize--sf-resize: both; resize: var(--sf-resize)—
Условия (что это ): ширина экрана — нет; состояния — нет.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Класс
Направление
resizeпо обеим осям
resize-yтолько по высоте
resize-xтолько по ширине
resize-noneрастягивать нельзя
Текстовую область в форме обычно оставляют растягиваемой по высоте: ширину
задаёт сетка формы.
HTML wrap_text Wrap source lines content_copy Copy
<textarea class ="resize-y w-full" rows ="4" ></textarea >
Класс записывает выбранное значение в переменную --sf-resize на самом
элементе и читает его оттуда.
Ограничения
Блоку, кроме класса, нужен overflow-*auto, hidden или scroll; у textarea он уже есть.
Элемент с resize-x или resize можно растянуть шире родителя. Ограничьте
ширину классом max-w-*.
Угол для растягивания мышью есть не во всех мобильных браузерах.
Префиксов ширины экрана и состояния у семейства нет.
См. также
Предыдущая События указателя Следующая Сетка
