feat: add block-input-events tip (#16147)

* feat: add block-input-events tip * feat: use css var
cocos · Sep 22, 2023 · 7e53d99 · 7e53d99
1 parent 8485880
commit 7e53d99
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 0 deletions.
diff --git a/editor/i18n/en/components.js b/editor/i18n/en/components.js
@@ -46,5 +46,7 @@ module.exports = {
             applyCameraSizeLessThanMinimum: 'Current screen ratio is less than its limit, applying current minimum instead. Please reduce lower LOD levels screen size and try again later.',
             applyCameraSizeGreaterThanMaximum: 'Current screen ratio is greater than its limit, applying current maximum instead. Please Increase higher LOD levels screen size and try again later.',
         },
+
+        blockInputEventsTip: 'This component will block all input events, preventing the input from penetrating to other nodes below the screen, typically for the background of the top-level UI of the screen.',
     },
 };
diff --git a/editor/i18n/zh/components.js b/editor/i18n/zh/components.js
@@ -42,5 +42,7 @@ module.exports = {
             applyCameraSizeLessThanMinimum: '当前屏占比小于目前层级能使用的最小值，无法设置，设置为目前层级能使用的最小值。请更新更低 LOD 层级的屏幕尺寸之后再次尝试。',
             applyCameraSizeGreaterThanMaximum: '当前屏占比大于目前层级能使用的最大值，无法设置，设置为目前层级能使用的最大值。请更新更高 LOD 层级的屏幕尺寸之后再次尝试。',
         },
+
+        blockInputEventsTip: '该组件将拦截所有输入事件，防止输入穿透到屏幕下方的其它节点，一般用于屏幕上层 UI 的背景。',
     },
 };
diff --git a/editor/inspector/components.js b/editor/inspector/components.js
@@ -22,4 +22,5 @@ module.exports = {
     'cc.Widget': join(__dirname, './components/widget.js'),
     'cc.Class': join(__dirname, './components/class.js'),
     'cc.LODGroup': join(__dirname, './components/lod-group/index.js'),
+    'cc.BlockInputEvents': join(__dirname, './components/block-input-events.js'),
 };
diff --git a/editor/inspector/components/block-input-events.js b/editor/inspector/components/block-input-events.js
@@ -0,0 +1,18 @@
+const { $, update, close } = require('./base');
+
+exports.style = /* css */`
+    .block-input-events {
+        border: 1px solid var(--color-default-border-weaker);
+        border-radius: 4px;
+        margin: 8px;
+        padding: 8px;
+    }
+`;
+
+exports.template =/* html */ `
+<div class="block-input-events">
+    <ui-label value="i18n:ENGINE.components.blockInputEventsTip"></ui-label>
+</div>`;
+exports.$ = $;
+exports.update = update;
+exports.close = close;