右侧属性栏(showPropertyBar)

同样具有showSlot的高度自由度，可以嵌入任意你想要嵌入的内容，但有一定的宽度约束。

一、场景和形态

弹框选择之一，特点是靠边显隐、半透明、非模态。大型桌面软件，右侧属性面板是一个比较常见的现象。

UI效果

现场演示

这是插槽内容，可以是任何 HTML。右键可退出

演示代码如下：

<!--在vitepress中的.md文件中直接引入下面的代码-->
<div>
  <p style="margin-top:0px;" id="usetomodal">这是插槽内容，可以是任何 HTML。</p>
  <button @click="show" style="border:1px solid #999;padding:10px 20px;margin:6px;">
    点我弹出 Slot
  </button>
</div>

<script setup>
import { showPropertyBar } from 'axue';
    const show = () => {
        const rawNode = document.getElementById('usetomodal');
		const slotContent = rawNode.cloneNode(true); // 深拷贝节点内容,避免节点被转移走
        showPropertyBar.send({
            title:"单位面板", 
            slot: slotContent,
            paddingTop:"75px"    //vitepress的顶条层级较高，进行下移规避
       });
    };
</script>

二、使用方式

弹出属性栏

//导入
import {showPropertyBar} from "axue";

//准备插槽节点
const node = document.getElementById('siderbar'); 

//注意，在属性栏显示状态下重新send，会先触发close,再触发实例化显示
showPropertyBar.send({
    title:"单位面板",
    slot:node   
})

主动关闭

showPropertyBar.close()

其他说明

没有实现点击外围就关闭的模态交互体验

• 原因是面板需要如下支持特殊场景的交互可能，比如：用户打开属性面板，在内部节点中触发事件，需要通过将地图中单位拖动到选项框来实现选中逻辑、或者拾取坐标数据等等。
• 作为补偿，右击任何地方可以实现关闭，无需移动到关闭按钮处。

参数

send可以传入的参数

内联属性	说明	类型	默认值
title	面板标题	string	""
slot	插槽内容，高级自定义能力	htmlNode或模板字符串	null
paddingTop	距离顶部的距离，用于网站顶条层级比较高的情形	number|string	0px