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

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

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
`value`	`string \| number \| FormData \| File`	determines initial value of the control
`min`	`number`	defines the most negative value in the range of permitted values
`max`	`number`	defines the greatest value in the range of permitted values
`step`	`number`	number that specifies the granularity that the value
`orientation`	`'vertical' \| 'horizontal'`
`formAssociated`	`boolean`
`disabled`	`boolean`	determines if element is mutable or focusable
`required`	`boolean`	indicates that the user must specify a value for the input before the owning form can be submitted
`readonly`	`boolean`	makes the element not mutable, meaning the user can not edit the control
`multiple`	`boolean`	determines he form control accepts one or more values
`autocomplete`	`string`	provide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
`type`	`string`	string specifying the type of control to render
`name`	`string`	represents the name of the current element as a string.
`pattern`	`string`	regular expression the form control's value should match
`placeholder`	`string`	defines a short hint to help the user with data entry when a form control has no value
`minLength`	`number`	defines minimum number of characters
`maxLength`	`number`	defines maximum number of characters
`size`	`number`	determines number of characters
`valueAsNumber`
`composedLabel`
`focus`
`reset`

Attributes

Name	Types	Description
`value`	`string \| number \| FormData \| File`	determines initial value of the control
`min`	`number`	defines the most negative value in the range of permitted values
`max`	`number`	defines the greatest value in the range of permitted values
`step`	`number`	number that specifies the granularity that the value
`orientation`	`'vertical' \| 'horizontal'`
`disabled`	`boolean`	determines if element is mutable or focusable
`required`	`boolean`	indicates that the user must specify a value for the input before the owning form can be submitted
`readonly`	`boolean`	makes the element not mutable, meaning the user can not edit the control
`multiple`	`boolean`	determines he form control accepts one or more values
`autocomplete`	`string`	provide automated assistance in filling out form field values, and guidance to the browser as to the type of information expected in the field
`type`	`string`	string specifying the type of control to render
`pattern`	`string`	regular expression the form control's value should match
`placeholder`	`string`	defines a short hint to help the user with data entry when a form control has no value
`minLength`	`number`	defines minimum number of characters
`maxLength`	`number`	defines maximum number of characters
`size`	`number`	determines number of characters

CSS Properties

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