Button Resize

npm2.0.0

The resize button component is used to act as a drag handle to resize an element. Key navigation is supported and the step value can be used to adjust the amount of change when using the arrow keys.

Example

Allows users to resize elements by dragging.

code

<bp-button-resize aria-label="resize item" value="250" min="20" max="480" style="height: 50px"></bp-button-resize>

<script type="module">
  import '@blueprintui/components/include/button-resize.js';
  document.querySelector('bp-button-resize').addEventListener('input', (event) => console.log(event.target.valueAsNumber));
</script>

Disabled

Shows resize button in disabled state.

code

<bp-button-resize disabled aria-label="resize item" value="250" min="20" max="480" style="height: 50px"></bp-button-resize>

<script type="module">
  import '@blueprintui/components/include/button-resize.js';
  document.querySelector('bp-button-resize').addEventListener('input', (event) => console.log(event.target.valueAsNumber));
</script>

The disabled attribute should be used for UI elements that are currently disabled, making them uninteractive. This attribute informs assistive technologies like screen readers that the element, while present in the document structure, is not usable or cannot be interacted with in its current state.

Split

code

<div style="display: grid; grid-template-columns: 1fr 2px 1fr; height: 250px; width: 100%">
  <div style="background: hsla(0, 0%, 0%, 0.15)"><span id="split-demo-value">0</span></div>
  <bp-button-resize id="split-demo" aria-label="resize item" step="1" style="height: 250px"></bp-button-resize>
  <div></div>
</div>

<script type="module">
  import '@blueprintui/components/include/button-resize.js';

  const resize = document.querySelector('#split-demo');
  resize.step = 10;
  resize.min = 20;
  resize.max = document.documentElement.clientWidth - 44;
  resize.value = document.documentElement.clientWidth / 2;
  resize.addEventListener('input', (event) => {
    resize.parentElement.style.gridTemplateColumns = event.target.valueAsNumber + 'px 2px 1fr';
    document.querySelector('#split-demo-value').innerHTML = event.target.valueAsNumber;
  });
</script>

Install

NPM

// npm package
import '@blueprintui/components/include/button-resize.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/button-resize.js/+esm';
</script>

Accessibility

Use a clear, descriptive label for the button that communicates its purpose.
Provide a way for keyboard users to interact with the resize button.
Provide alternative ways for users who have difficulty using a mouse or trackpad to move the handle, such as by using the arrow keys.

bp-button-resize

Properties

Name	Types	Description

CSS Properties

Name	Types	Description
`--background`
`--width`
`--height`