Tailwind Interactivity

CSS交互

元素外观appearance

CSS3中appearance属性用于设置元素模仿系统原生控件的外观

appearace: normal | icon | window | button | menu | field

属性值	描述
normal	设置元素外观为常规元素
icon	设置元素外观呈现为图标或小图片
window	设置元素外观呈现为窗口
button	设置元素外观呈现为按钮
menu	设置元素外观呈现为一套供用户选择的菜单
field	设置元素外观呈现为输入字段

Tailwind提供了.appearance-none工具类用于禁用 元素模仿系统原生控件的外观

工具类	属性
.appearance-none	appearance:none;

光标外观cursor

CSS的cursor属性用于规定显示光标的类型或形状，Tailwind提供以.cursor-前缀的工具类用于控制贯标的显示。

工具类	属性	描述
.cursor-auto	cursor:auto;	默认，浏览器设置的光标。
.cursor-default	cursor:default;	默认光标显示为一个箭头
.cursor-pointer	cursor:pointer;	光标呈现为指示链接的指针，即一只小手的图标。
.cursor-wait	cursor:wait;	光标指示某对象可被移动
.cursor-text	cursor:wait;	光标指示为文本
.cursor-move	cursor:move;	光标指示某对象可被移动
.cursor-not-allowed	cursor:not-allowed;	禁用光标指示效果

轮廓线条outline

CSS中outline属性用于绘制元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓线不会占据空间，也不一定是矩形。

outline属性的实际包含三个子属性

outline: outline-color outline-style outline-width;

子属性	描述
outline-color	设置轮廓线的颜色
outline-style	设置轮廓线的样式
outline-width	设置轮廓线的宽度

outline轮廓线与border边框线不同之处在于，outline轮廓线并不会增加边框的宽度，也就是说outline不会占据布局空间，也不会影响元素的尺寸。

Tailwind为轮廓线新增了.outline-none工具类，用于移除浏览器默认的轮廓线和元素聚焦效果。

工具类	属性
.outline-none	outline:0;

指针事件pointer events

CSS中pointer-events指针事件属性是一个与JavaScript相关的属性，即指定在何种情况下特定图形元素可以设置成为鼠标事件的target目标。

pointer-events: auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill |stroke | all;

使用pointer-events属性用来设置事件穿透，即如果给父元素设置了pointer-events:none属性，那么父元素将不再监听鼠标事件。

pointer-events:none;

当设置元素的pointer-events属性为none后会产生如下特性

• 阻止用户点击动作产生的任何效果
• 阻止缺省鼠标指针的显示
• 阻止CSS中的hover和active状态的变化以触发事件
• 阻止JavaScript点击动作触发的事件

使用场景

当页面中使用canvas绘制雨雪效果，为了避免这些悬浮物遮挡页面而影响鼠标点击，可使用pointer-events:none，设置悬浮物上方的canvas画布不会遮挡鼠标事件，让鼠标事件可以穿透上方的canvas画布来点击页面。

注意事项

• 当设置pointer-events:none时，如果元素是绝对定位的，那在它下一层的元素可以被选中。
• 设置pointer-events:none只是用来禁用鼠标事件，可通过其它方式绑定的事件还是会触发的，比如键盘事件等。
• 如果将元素的子元素的pointer-events设置成非none值，当点击子元素是会通过事件冒泡的方式触发父级元素的事件。

设置元素的pointerr-events属性来阻止元素成为鼠标事件目标，并不一定意味着元素上的事件监听器永远不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件监听器。当然，位于父元素但不再后代元素上的鼠标活动都不会被父元素和后代元素捕获，因为鼠标活动将会传过父元素而指向位于其下的元素。

Tailwind为pointer-events属性提供了两个常用的工具类

工具类	属性
.pointer-events-none	pointer-events:none;
.pointer-events-auto	pointer-events:auto;

• 使用.pointer-events-auto工具类可以还原指针事件为默认的浏览器行为
• 使用.pointer-events-none工具类可以使元素忽略指针事件，但指针事件仍将会在子元素上触发并出传递到低于目标的元素。

例如：自定义选项组件

pointer events

<link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

<div class="container mx-auto my-12">
  <!--pointer-events-auto-->
  <div class="relative overflow-hidden mb-4">
    <select name="" class="block appearance-none px-4 py-3 pr-8 w-full bg-gray-100 border-l border-gray-200 rounded leading-tight text-gray-700 focus:outline-none focus:bg-white focus:border-gray-500">
      <option value="">pointer-events-auto</option>
      <option value="">appearance-none</option>
      <option value="">outline-none</option>
    </select>
    <div class="absolute inset-y-0 right-0 px-3 bg-gray-300 rounded-r text-gray-700 flex items-center appearance-none pointer-events-auto">
      <i class="fas fa-angle-down fill-current w-4 h-4"></i>
    </div>
  </div>
  <!--pointer-events-none-->
  <div class="relative overflow-hidden mb-4">
    <select name="" class="block appearance-none px-4 py-3 pr-8 w-full bg-gray-100 border-l border-gray-200 rounded leading-tight text-gray-700 focus:outline-none focus:bg-white focus:border-gray-500">
      <option value="">pointer-events-none</option>
      <option value="">appearance-none</option>
      <option value="">outline-none</option>
    </select>
    <div class="absolute inset-y-0 right-0 px-3 bg-gray-300 rounded-r text-gray-700 flex items-center appearance-none pointer-events-none">
      <i class="fas fa-angle-down fill-current w-4 h-4"></i>
    </div>
  </div>
</div>

源代码效果：https://codepen.io/junchow/pen/NWxRwmX?editors=1000

调整尺寸reseize

CSS的resize属性用于指定一个元素是否可以由用户调整大小，即可以设置是否允许用户缩放页面中元素的尺寸。

resize: none | both | horizontal | vertical;

属性值	描述
none	默认值，禁止用户调整元素尺寸。
both	允许用户可调整元素的宽度和高度
horizontal	允许用户可以调整元素的宽度
vertical	允许用户可以调整元素的高度

使用注意

• resize属性生效需要提前设置元素的overflow属性，其值可以是auto、hidden、scroll。
• 通过设置max-width和max-height最大宽高加以限制范围
• 当为元素定义了resize属性后，元素的右下角会出现允许拖动的标志，用户可以点击右下角拖动来随意改变元素的尺寸。
• 为增强用户体验建议配置cursor属性通过设置对应的鼠标样式来增强用户体验感

例如：拖动边框缩放背景图片

demo

<div class="resize"></div>
<style>
.resize{
  background-image:url('http://source.unsplash.com/800x800');
  background-repeat:no-repeat;
  background-position:center;
  background-clip:content;
  width: 200px;
  height: 200px;
  max-width: 800px;
  max-height:800px;
  padding:10px;
  border:1px solid #888;
  resize:both;
  overflow:auto;
}
</style>

Tailwind为resize属性设置常用的工具类

工具类	属性	描述
.resize-none	resize:none;	禁止用户调整尺寸
.resize	resize:both;	允许用户调整宽高尺寸
.resize-x	resize:horizontal;	允许用户调整水平尺寸
.resizee-y	resize:vertical;	允许用户调整垂直尺寸

例如：设置文本域可手动调整宽高

demo

<link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

<div class="container mx-auto my-12 p-12 bg-gray-100">
  <textarea class="border rounded resize focus:outline-none focus:shadow-outline"></textarea>
</div>

用户选中user-select

CSS3新增的user-select属性用于设置用户是否能够选中文本，可用于除替换元素外的所有元素。

user-select: none | text | all | element;

属性值	描述
none	设置文本不能被选择
text	默认值，设置可以选择文本。
all	当内容作为整体时可被选择，若双击或在上下文上点击子元素，被选中部分将以从该子元素向上回溯到最高祖先元素。
element	可选择文本，但选择范围受元素边界约束。

使用场景

• user-select之前可用来保护网站内容，不能被选择以禁止复制和转载，进而保护内容的版权，但这种做法对普通用户的体验会造成伤害，而且并不能真正的保护页面内容，通过查看源代码也可以复制。
• 当使用字体图标时，字体图标所在元素会被频繁点击时可添加user-select:none以防止图标字体作为文本被选择而影响使用。

Tailwind为user-select属性提供常用工具类

工具类	属性	描述
.select-none	user-select:none;	禁止用户选中文本
.select-text	user-select:text;	允许用户选择文本
.select-all	user-select:all;	允许用户选择上下文
.select-auto	user-select:auto;	自动取值

展示地址：https://codepen.io/junchow/pen/YzwGexO?editors=1000