Button Handle

npm2.0.0

The button handle component is used to act as a handle to drag and move an element, such as a slidebar or a modal window.

Example

code

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

<bp-button-handle aria-label="move item"></bp-button-handle>

Disabled

code

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

<bp-button-handle disabled aria-label="move item"></bp-button-handle>

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.

Install

NPM

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

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/button-handle.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 button handle, such as using the enter or space key.
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-handle

Properties

Name	Types	Description
`shape`	`string`
`direction`	`'up' \| 'down' \| 'left' \| 'right'`
`pressed`	`boolean`	turns the button into a toggle button
`selected`	`boolean`	indicate the current "selected" state of various widgets
`expanded`	`boolean`	indicate if a control is expanded or collapsed
`readonly`	`boolean`	makes the element not mutable, meaning the user can not interact with button
`disabled`	`boolean`	determines if element is mutable or focusable
`type`	`'button' \| 'submit'`	default behavior of the button
`name`	`string`	represents the name of the current element as a string.
`value`	`string`	determines the current value
`popoverTargetElement`	`HTMLElement`
`popoverTargetAction`	`\| 'toggle' \| 'show' \| 'hide'`
`popovertarget`	`string`
`form`	`HTMLFormElement`
`formAction`	`string`
`formEnctype`	`string`
`formMethod`	`string`
`formNoValidate`	`boolean`
`formTarget`	`string`
`labels`	`NodeListOf`
`validationMessage`	`string`
`validity`	`ValidityState`
`willValidate`	`boolean`
`checkValidity`	`any`
`reportValidity`	`any`
`setCustomValidity`	`any`
`formAssociated`	`boolean`

Attributes

Name	Types	Description
`shape`	`string`
`direction`	`'up' \| 'down' \| 'left' \| 'right'`
`pressed`	`boolean`	turns the button into a toggle button
`selected`	`boolean`	indicate the current "selected" state of various widgets
`expanded`	`boolean`	indicate if a control is expanded or collapsed
`readonly`	`boolean`	makes the element not mutable, meaning the user can not interact with button
`disabled`	`boolean`	determines if element is mutable or focusable
`type`	`'button' \| 'submit'`	default behavior of the button
`value`	`string`	determines the current value
`popoverTargetElement`	`HTMLElement`
`popovertargetaction`	`\| 'toggle' \| 'show' \| 'hide'`
`popovertarget`	`string`

CSS Properties

Name	Types	Description
`--cursoe`
`--icon-width`
`--icon-height`

Slots

Name	Types	Description
`default`		slot for text content or bp-icon