Resizer Web 组件

一套网络组件,用于创建支持两者的可扩展面板 声明式(零设置)和方案式(可组合)使用模式.

构成部分

• clabs-resizer-grid - 大型面板集装箱
• clabs-resizer-panel - 个人可调整面板
• clabs-resizer-handle - 在面板之间调整大小
• clabs-resizer-handle-pivot - 先进再大小的角中枢

特征

零定用法( 声明式)

启用没有 JavaScript 设置的组件的直接使用 。 用户可以 完全通过HTML来作曲布局,并重新调整了出箱工作的大小.

可编译用法( 程序)

允许 clabs-resizer-handle 财务报告和审定财务报表 clabs-resizer-handle-pivot 用作 释放拖动事件和三角洲值的独立组件。 消费者(例如, react等框架可以通过JavaScript处理再大小逻辑.

使用量

声明模式( Zero- Setup)

基本水平布局

<clabs-resizer-grid axis="x">
  <clabs-resizer-panel slot="left"> Left panel content </clabs-resizer-panel>

  <clabs-resizer-handle slot="handle-horizontal"></clabs-resizer-handle>

  <clabs-resizer-panel slot="right"> Right panel content </clabs-resizer-panel>
</clabs-resizer-grid>

基本垂直布局

<clabs-resizer-grid axis="y">
  <clabs-resizer-panel slot="top"> Top panel content </clabs-resizer-panel>

  <clabs-resizer-handle slot="handle-vertical"></clabs-resizer-handle>

  <clabs-resizer-panel slot="bottom">
    Bottom panel content
  </clabs-resizer-panel>
</clabs-resizer-grid>

与关键处理

<clabs-resizer-grid axis="x">
  <clabs-resizer-panel slot="left">
    Left panel content
    <clabs-resizer-handle slot="handle-horizontal">
      <clabs-resizer-handle-pivot></clabs-resizer-handle-pivot>
    </clabs-resizer-handle>
  </clabs-resizer-panel>

  <clabs-resizer-panel slot="right"> Right panel content </clabs-resizer-panel>
</clabs-resizer-grid>

程序模式 (Event- Driven)

换接器柄可以独立使用,不用网格容器 听取其活动:

活动

• resize-start - 拖曳开始时被炒了

  • detail.axis - 调整轴("x"或"y")
  • detail.startPosition - 开始位置{x,y}

• resize-drag - 拖行时被放火

  • detail.axis - 调整轴("x"或"y")
  • detail.delta - 三角地移动像素
  • detail.position - 当前位置{x,y}

• resize-end - 拖曳结束时被解除

  • detail.axis - 调整轴("x"或"y")
  • detail.delta - 三角地总移动像素
  • detail.position - 最终位置{x,y}

• resize-reset - 双塔/双击起火

单一面板示例

<div class="container">
  <div class="panel" id="myPanel">Panel content</div>
  <clabs-resizer-handle></clabs-resizer-handle>
</div>

<script>
  const handle = document.querySelector('clabs-resizer-handle');
  const panel = document.getElementById('myPanel');
  let initialHeight = 0;

  handle.addEventListener('resize-start', (e) => {
    initialHeight = panel.offsetHeight;
  });

  handle.addEventListener('resize-drag', (e) => {
    const newHeight = initialHeight + e.detail.delta;
    panel.style.height = `${Math.max(48, newHeight)}px`;
  });
</script>

边框调整大小示例

<div class="container" style="height: 400px">
  <div class="panel" id="boundedPanel">Panel content</div>
  <clabs-resizer-handle></clabs-resizer-handle>
</div>

<script>
  const handle = document.querySelector('clabs-resizer-handle');
  const panel = document.getElementById('boundedPanel');
  const container = document.querySelector('.container');
  let initialHeight = 0;

  handle.addEventListener('resize-start', (e) => {
    initialHeight = panel.offsetHeight;
  });

  handle.addEventListener('resize-drag', (e) => {
    const containerHeight = container.offsetHeight;
    const newHeight = initialHeight + e.detail.delta;

    // Constrain between min and max
    const constrainedHeight = Math.max(
      48,
      Math.min(newHeight, containerHeight - 20)
    );

    panel.style.height = `${constrainedHeight}px`;
  });
</script>

CSS 自定义属性

• --resizer-thickness - 增压器柄的厚度( 默认: 4px)
• --resizer-grab-thickness - 其他抓取区域厚度(默认:0px)
• --resizer-grab-color - 抓取区域的颜色( 默认: 透明)
• --start-element-size - 启动面板的大小( 默认:1fr)
• --end-element-size - 端面板的大小( 默认:1fr)

无障碍

键盘导航

更新器手柄支持键盘导航 :

• 箭头键: 以 5px 递增方式移动更新器手柄
  • ArrowUp编号 :ArrowDown 用于水平手柄(y-轴)
  • ArrowLeft编号 :ArrowRight 用于垂直手柄(x轴)
• 移动 + 箭头键: 以25px增量移动,以更快地调整大小
• 内容: 将启动面板折叠到最小大小( 仅网格模式)
• 结束: 将启动面板扩展至最大大小(仅网格模式)
• 双击/双打: 将面板重置为默认大小

ARIA 属性

基于网格的使用(自动)

使用时 clabs-resizer-handle 内 clabs-resizer-grid, ARIA 属性 自动管理 :

• role="separator" - 确定元素为分离器
• aria-orientation - 设定为基于轴的"垂直"或"横向"
• aria-valuenow - 现行拆分百分比(0-100)
• aria-valuemin="0" - 最低价值
• aria-valuemax="100" - 最大价值
• aria-valuetext - 人可读分拆比率(例如“60%/40%”)
• aria-live="assertive" - 向屏幕阅读器宣布更改

独立使用(手册)

使用时 clabs-resizer-handle 没有网格(程序模式),您就是 负责管理ARIA属性,以确保无障碍:

<div class="container">
  <div class="panel" id="myPanel">Panel content</div>
  <clabs-resizer-handle
    aria-valuenow="50"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuetext="Panel height: 200px"></clabs-resizer-handle>
</div>

<script>
  const handle = document.querySelector('clabs-resizer-handle');
  const panel = document.getElementById('myPanel');
  let initialHeight = 0;

  handle.addEventListener('resize-start', (e) => {
    initialHeight = panel.offsetHeight;
  });

  handle.addEventListener('resize-drag', (e) => {
    const newHeight = initialHeight + e.detail.delta;
    const constrainedHeight = Math.max(48, newHeight);
    panel.style.height = `${constrainedHeight}px`;

    // Update ARIA attributes for accessibility
    const percentage = Math.round((constrainedHeight / 400) * 100);
    handle.setAttribute('aria-valuenow', percentage.toString());
    handle.setAttribute(
      'aria-valuetext',
      `Panel height: ${constrainedHeight}px`
    );
  });
</script>

说明编号: role="separator" 属性需要 aria-valuenow 将会是 为适当遵守无障碍规定而提供。 当使用独立的手柄时, 在调整操作大小时总是更新这些属性 .

浏览器支持

有 Web 组件支持的现代浏览器( Chrome, Firefox, Safari, Edge)

许可证

阿帕奇 - 2.0