pl-overlay元件

覆盖元素允许现有的 ZJUI-Learn 和 HTML 元素在任意位置彼此层叠。最常用于将输入字段（例如 pl-number-input）放置在 pl-figure 或 pl-drawing 之上，以便学生可以在图表上的特定位置填写标签。

样品元素

question.html

<pl-overlay width="400" height="400" clip="false">
  <pl-background>
    <pl-drawing width="398" height="398" hide-answer-panel="false">
      <pl-drawing-initial>
        <pl-triangle x1="50" y1="350" x2="350" y2="350" x3="350" y3="50"></pl-triangle>
      </pl-drawing-initial>
    </pl-drawing>
  </pl-background>
  <pl-location left="200" top="375"> $$3$$ </pl-location>
  <pl-location left="375" top="200"> $$3$$ </pl-location>
  <pl-location left="170" top="170">
    <pl-number-input
      answers-name="c"
      show-help-text="false"
      show-placeholder="false"
      size="1"
    ></pl-number-input>
  </pl-location>
</pl-overlay>

pl-overlay 定制

属性	类型	默认	描述
clip	布尔	真实	如果为 true，则当超出覆盖边界时，子级将被切断。
height	浮动	—	覆盖画布的高度（以像素为单位）。除非提供 pl-background，否则是必需的。
width	浮动	—	覆盖画布的宽度（以像素为单位）。除非提供 pl-background，否则是必需的。

pl-location 定制

属性	类型	默认	描述
bottom	浮动	—	子元素的 y 坐标（相对于覆盖层的底部）
halign	字符串	"center"	指定内容的水平对齐方式。可以是 "left"、"center"、"middle"（相当于 "center"）或 "right" 之一。
left	浮动	—	子元素的 x 坐标（相对于覆盖层的左侧）
right	浮动	—	子元素的 x 坐标（相对于覆盖层的右侧）
top	浮动	—	子元素的 y 坐标（相对于覆盖层的顶部）
valign	字符串	"middle"	指定内容的垂直对齐方式。可以是 "top"、"middle"、"center"（相当于 "middle"）或 "bottom" 之一。

pl-background 定制

pl-background 子标签没有任何需要设置的额外属性。所有相关的定位和尺寸信息均从标签的内容中获取。

细节

覆盖被预定义为具有静态大小的“覆盖区域”。默认情况下，超出这些边界的元素将被部分或全部切断。

可以通过将 HTML 包装在 <pl-background> 标记中来指定背景。如果 <pl-background> 的内容没有固定大小（例如，使用 <pl-figure>，它使用响应式宽度），那么您应该在 <pl-overlay> 上显式指定至少一个 width，以确保无论浏览器视口有多大，子项都会显示在预期位置。但是，如果 <pl-background> 的内容具有固定大小（例如使用 <pl-drawing width="500">），则无需在 <pl-overlay> 上手动指定 width/height。

浮动子元素用 <pl-location> 标签包装，该标签使用 left、right、top 和 bottom 指定相对于覆盖区域的某些定义边缘的位置。每个 <pl-location> 必须准确指定 left 或 right 之一，以及 top 或 bottom 之一。位置标签内的任何内容都将显示在该位置。子元素按照指定的顺序分层，后面的子元素显示在前面定义的子元素之上。

示例实现

• [元素/叠加]

---