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`	The target element for the popover https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget
`popoverTargetAction`	`\| 'toggle' \| 'show' \| 'hide'`	The action to perform on the target popover element https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertargetaction
`popovertarget`	`string`	The target popover id https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget
`command`	`string`	The command property of the HTMLButtonElement interface gets and sets the action to be performed on an element being controlled by this button. For this to have an effect, commandfor must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command
`commandFor`	`string`	The command for property of the HTMLButtonElement interface gets and sets the id of the element being controlled by this button. For this to have an effect, command must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command
`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
`name`	`string`	represents the name of the current element as a string.
`value`	`string`	determines the current value
`popoverTargetElement`	`HTMLElement`	The target element for the popover https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget
`popovertargetaction`	`\| 'toggle' \| 'show' \| 'hide'`	The action to perform on the target popover element https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertargetaction
`popovertarget`	`string`	The target popover id https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget
`command`	`string`	The command property of the HTMLButtonElement interface gets and sets the action to be performed on an element being controlled by this button. For this to have an effect, commandfor must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command
`commandFor`	`string`	The command for property of the HTMLButtonElement interface gets and sets the id of the element being controlled by this button. For this to have an effect, command must be set. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#command

CSS Properties

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

Slots

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