lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

Button Resize

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

NameTypesDescription
accessornumber that specifies the granularity that the value
valuestring | number | FormData | File
minnumber
maxnumber
stepnumber
orientation'vertical' | 'horizontal'
formAssociatedboolean
disabledboolean
requiredboolean
readonlyboolean
multipleboolean
autocompletestring
typestring
namestringrepresents the name of the current
element as a string.
patternstring
placeholderstring
minLengthnumber
maxLengthnumber
sizenumber
valueAsNumber
focus
reset

Attributes

NameTypesDescription
accessornumber that specifies the granularity that the value

CSS Properties

NameTypesDescription
--background
--width
--height