1 | @# Control group
|
2 |
|
3 | A control group renders several distinct form controls as one unit, squaring the
|
4 | borders between them. It supports any number of buttons, text inputs, input
|
5 | groups, and HTML selects as direct children.
|
6 |
|
7 | <div class="@ns-callout @ns-intent-success @ns-icon-comparison">
|
8 | <h4 class="@ns-heading">Control group vs. input group</h4>
|
9 |
|
10 | Both components group multiple elements into a single unit, but their usage patterns are
|
11 | quite different.
|
12 |
|
13 | Think of `ControlGroup` as a parent with multiple children, with each one a separate
|
14 | control.
|
15 |
|
16 | Conversely, an `InputGroup` is a single control, and should function like so. A
|
17 | button inside of an input group should only affect that input; if its reach is further, then it
|
18 | should be promoted to live in a control group.
|
19 |
|
20 | </div>
|
21 |
|
22 | @reactExample ControlGroupExample
|
23 |
|
24 | @## Flex layout
|
25 |
|
26 | `ControlGroup` is a CSS inline flex row (or column if vertical) and provides
|
27 | some modifer props for common flexbox patterns:
|
28 |
|
29 | - Enable the `fill` prop on a control group to make all controls expand equally to
|
30 | fill the available space.
|
31 | - Controls will expand horizontally by default, or vertically if the `vertical` prop is enabled.
|
32 | - Add the class `Classes.FIXED` to individual controls to revert them to their initial sizes.
|
33 |
|
34 | - In addition, you may enable the `fill` prop on specific controls inside the group to expand them
|
35 | fill more space while other controls retain their original sizes.
|
36 |
|
37 | You can adjust the specific size of a control with the `flex-basis` or `width`
|
38 | CSS properties.
|
39 |
|
40 | @## Props
|
41 |
|
42 | This component is a lightweight wrapper around its children. It supports all
|
43 | HTML `<div>` props, in addition to those listed below.
|
44 |
|
45 | ```tsx
|
46 | <ControlGroup fill={true} vertical={false}>
|
47 | <Button icon="filter">Filter</Button>
|
48 | <InputGroup placeholder="Find filters..." />
|
49 | </ControlGroup>
|
50 | ```
|
51 |
|
52 | @interface IControlGroupProps
|
53 |
|
54 | @## CSS
|
55 |
|
56 | A `.@ns-control-group` renders several distinct controls as one unit, squaring the borders between
|
57 | them. It supports any number of `.@ns-button`, `.@ns-input`, `.@ns-input-group`, and `.@ns-select`
|
58 | elements as direct children.
|
59 |
|
60 | Note that `.@ns-control-group` does not cascade any modifiers to its children. For example, each
|
61 | child must be marked individually as `.@ns-large` for uniform large appearance.
|
62 |
|
63 | @css control-group
|
64 |
|