Вид курсора

Классы cursor-* задают свойство cursor — вид указателя мыши над элементом. Берите их, когда элемент ведёт себя не так, как подсказывает его тег: щёлкается, перетаскивается, растягивается или временно недоступен.

Пример

Действия и состояния

Наведите указатель на плитку: курсор принимает вид из её класса.

HTML

<div class="grid grid-col-2 sm:grid-col-3 md:grid-col-4 gap-2">
  <div class="cursor-auto flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-auto</code></div>
  <div class="cursor-default flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-default</code></div>
  <div class="cursor-pointer flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-pointer</code></div>
  <div class="cursor-wait flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-wait</code></div>
  <div class="cursor-progress flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-progress</code></div>
  <div class="cursor-text flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-text</code></div>
  <div class="cursor-vertical-text flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-vertical-text</code></div>
  <div class="cursor-help flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-help</code></div>
  <div class="cursor-not-allowed flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-not-allowed</code></div>
  <div class="cursor-no-drop flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-no-drop</code></div>
  <div class="cursor-context-menu flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-context-menu</code></div>
  <div class="cursor-cell flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-cell</code></div>
  <div class="cursor-crosshair flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-crosshair</code></div>
  <div class="cursor-copy flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-copy</code></div>
  <div class="cursor-alias flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-alias</code></div>
  <div class="cursor-move flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-move</code></div>
  <div class="cursor-all-scroll flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-all-scroll</code></div>
  <div class="cursor-grab flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-grab</code></div>
  <div class="cursor-grabbing flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-grabbing</code></div>
  <div class="cursor-zoom-in flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-zoom-in</code></div>
  <div class="cursor-zoom-out flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-zoom-out</code></div>
</div>

Изменение размера

Курсоры для границ и углов, за которые тянут, и для разделителей колонок и строк.

HTML

<div class="grid grid-col-2 sm:grid-col-3 md:grid-col-4 gap-2">
  <div class="cursor-col-resize flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-col-resize</code></div>
  <div class="cursor-row-resize flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-row-resize</code></div>
  <div class="cursor-ew-resize flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-ew-resize</code></div>
  <div class="cursor-ns-resize flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-ns-resize</code></div>
  <div class="cursor-nesw-resize flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-nesw-resize</code></div>
  <div class="cursor-nwse-resize flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-nwse-resize</code></div>
  <div class="cursor-n-resize flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-n-resize</code></div>
  <div class="cursor-e-resize flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-e-resize</code></div>
  <div class="cursor-s-resize flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-s-resize</code></div>
  <div class="cursor-w-resize flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-w-resize</code></div>
  <div class="cursor-ne-resize flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-ne-resize</code></div>
  <div class="cursor-nw-resize flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-nw-resize</code></div>
  <div class="cursor-se-resize flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-se-resize</code></div>
  <div class="cursor-sw-resize flex items-center justify-center p-2 h-d2 radius-ui border border-outline-variant bg-surface-container"><code class="text-1/2 color-on-surface">cursor-sw-resize</code></div>
</div>

Классы

Класс	CSS	Значения
`cursor-{значение}`	`cursor: {значение}`	`auto`, `default`, `pointer`, `wait`, `text`, `move`, `help`, `progress`, `crosshair`, `cell`, `alias`, `copy`
`cursor-grab`	`cursor: -webkit-grab; cursor: grab`	—
`cursor-grabbing`	`cursor: -webkit-grabbing; cursor: grabbing`	—
`cursor-not-allowed`	`cursor: not-allowed`	—
`cursor-no-drop`	`cursor: no-drop`	—
`cursor-context-menu`	`cursor: context-menu`	—
`cursor-zoom-in`	`cursor: -webkit-zoom-in; cursor: zoom-in`	—
`cursor-zoom-out`	`cursor: -webkit-zoom-out; cursor: zoom-out`	—
`cursor-all-scroll`	`cursor: all-scroll`	—
`cursor-{значение}-resize`	`cursor: {значение}-resize`	`w`, `n`, `ew`, `ns`, `ne`, `nw`, `se`, `sw`, `nesw`, `nwse`, `col`, `row`
`cursor-e-resize`	`cursor: e-resize`	—
`cursor-s-resize`	`cursor: s-resize`	—
`cursor-vertical-text`	`cursor: vertical-text`	—

Условия (что это): ширина экрана — нет; состояния — нет.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

Класс	Когда
`cursor-pointer`	элемент без ссылки или кнопки, который реагирует на щелчок
`cursor-not-allowed`	действие сейчас недоступно
`cursor-wait`, `cursor-progress`	идёт загрузка; с `progress` интерфейс остаётся рабочим
`cursor-grab`, `cursor-grabbing`	элемент можно перетащить; второй — во время перетаскивания
`cursor-move`	элемент перемещается в любую сторону
`cursor-text`	текст можно выделить или отредактировать
`cursor-help`	у элемента есть подсказка
`cursor-zoom-in`, `cursor-zoom-out`	щелчок увеличивает или уменьшает изображение
`cursor-col-resize`, `cursor-row-resize`	разделитель колонок или строк
`cursor-{сторона}-resize`	граница или угол, за который тянут: `n`, `e`, `s`, `w`, `ne`, `nw`, `se`, `sw`, `ew`, `ns`, `nesw`, `nwse`

HTML

<div role="button" tabindex="0" class="cursor-pointer">Открыть карточку</div>
<img src="photo.jpg" alt="Фото товара" class="cursor-zoom-in">

Ссылке с href и доступной кнопке курсор-руку задаёт базовый слой Framework, класс им не нужен. Кнопка, у которой есть класс cursor-*, берёт вид из класса.

Ограничения

Курсор есть только у мыши и стилуса; на сенсорном экране класс ничего не показывает. Не передавайте через курсор смысл, который нужен всем.
cursor-not-allowed не запрещает щелчок: элементу нужен атрибут disabled или обработчик, который ничего не делает.
У элемента с pointer-event-none свой курсор не показывается.
Префиксов ширины экрана и состояния у семейства нет.

Навигация

Главное

Документация

Содержание

Вид курсора

Пример

Действия и состояния

Изменение размера

Классы

Применение

Ограничения

См. также

Settings