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. The component should have a clear and descriptive label that communicates its purpose, such as "Resize Panel" or "Resize Column".
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
0
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 |
---|---|---|
accessor |
| number that specifies the granularity that the value |
value | string | number | FormData | File | |
min | number | |
max | number | |
step | number | |
orientation | 'vertical' | 'horizontal' | |
formAssociated | boolean | |
disabled | boolean | |
required | boolean | |
readonly | boolean | |
multiple | boolean | |
autocomplete | string | |
type | string | |
name | string | represents the name of the current |
pattern | string | |
placeholder | string | |
minLength | number | |
maxLength | number | |
size | number | |
valueAsNumber |
| |
focus |
| |
reset |
|
Attributes
Name | Types | Description |
---|---|---|
accessor |
| number that specifies the granularity that the value |
CSS Properties
Name | Types | Description |
---|---|---|
--background |
| |
--width |
| |
--height |
|