描绘界面元素的可用性

界面元素的状态是用户界面设计的一个关键方面，它提供视觉反馈，并在某些操作不允许时防止交互。

关于标签 (Tabs) 的说明

Mautic 使用以下 CSS 代码来设置不可交互的标签的样式：

.nav-tabs.nav-tabs-contained > li.disabled {
  cursor: not-allowed;
  color: var(--text-disabled);
}

.nav-tabs.nav-tabs-contained > li.disabled > a {
  background-color: var(--button-disabled);
  pointer-events: none;
}

此 CSS 代码实现以下功能：

将无法交互的标签的光标设置为 not-allowed，表示禁止交互。
将文本颜色更改为预定义的非活动状态颜色。
修改标签的背景颜色，以视觉上表示其非活动状态。
使用 pointer-events: none 阻止点击事件。

要动态地禁用标签，请使用 JavaScript 添加或删除 disabled 类。以下是一个示例函数：

Mautic.togglePermissionVisibility = function () {
    setTimeout(function () {
        if (mQuery('#role_isAdmin_0').prop('checked')) {
            mQuery('#permissions-tab').removeClass('disabled');
        } else {
            mQuery('#permissions-tab').addClass('disabled');
        }
    }, 10);
};

此函数：

检查复选框的状态 - #role_isAdmin_0。
根据复选框的状态，为权限标签添加或删除 disabled 类。

要实现标签的非活动状态：

为您的标签元素分配唯一的 ID。
使用 JavaScript 在适当的 <li> 元素上切换 disabled 类。

Note

始终使用非活动状态，而不是隐藏元素。