<div><!-- Using props --><b-input-groupsize="lg"prepend="$"append=".00"><b-form-input></b-form-input></b-input-group><!-- Using slots --><b-input-groupclass="mt-3"><templatev-slot:append><b-input-group-text><strongclass="text-danger">!</strong></b-input-group-text></template><b-form-input></b-form-input></b-input-group><!-- Using components --><b-input-groupprepend="Username"class="mt-3"><b-form-input></b-form-input><b-input-group-append><b-buttonvariant="outline-success">Button</b-button><b-buttonvariant="info">Button</b-button></b-input-group-append></b-input-group></div>
<div><b-input-groupclass="mb-2"><b-input-group-prependis-text><inputtype="checkbox"aria-label="Checkbox for following text input"></b-input-group-prepend><b-form-inputaria-label="Text input with checkbox"></b-form-input></b-input-group><b-input-group><b-input-group-prependis-text><inputtype="radio"aria-label="Radio for following text input"></b-input-group-prepend><b-form-inputaria-label="Text input with radio input"></b-form-input></b-input-group></div>
<div><b-input-groupclass="mb-2"><b-input-group-prependis-text><b-form-checkboxclass="mr-n2"><spanclass="sr-only">Checkbox for following text input</span></b-form-checkbox></b-input-group-prepend><b-form-inputaria-label="Text input with checkbox"></b-form-input></b-input-group><b-input-groupclass="mb-2"><b-input-group-prependis-text><b-form-radioclass="mr-n2"><spanclass="sr-only">Radio for following text input</span></b-form-radio></b-input-group-prepend><b-form-inputaria-label="Text input with radio input"></b-form-input></b-input-group><b-input-group><b-input-group-prependis-text><b-form-checkboxswitchclass="mr-n2"><spanclass="sr-only">Switch for following text input</span></b-form-checkbox></b-input-group-prepend><b-form-inputaria-label="Text input with switch"></b-form-input></b-input-group></div>
<div><b-input-groupprepend="First and last name"class="mb-2"><b-form-inputaria-label="First name"></b-form-input><b-form-inputaria-label="Last name"></b-form-input></b-input-group></div>
多个插件
支持多个加载项,并且可以与复选框和radio输入版本混合使用。
Item
$
<div><b-input-groupprepend="Item"><b-input-group-prependis-text><inputtype="checkbox"aria-label="Checkbox for following text input"></b-input-group-prepend><b-input-group-prependis-text><b>$</b></b-input-group-prepend><b-form-inputtype="number"aria-label="Text input with checkbox"></b-form-input></b-input-group></div>
<div><b-input-group><templatev-slot:prepend><b-dropdowntext="Dropdown"variant="info"><b-dropdown-item>Action A</b-dropdown-item><b-dropdown-item>Action B</b-dropdown-item></b-dropdown></template><b-form-input></b-form-input><templatev-slot:append><b-dropdowntext="Dropdown"variant="outline-secondary"v-for="i in 2":key="i"><b-dropdown-item>Action C</b-dropdown-item><b-dropdown-item>Action D</b-dropdown-item></b-dropdown></template></b-input-group></div>
控制大小
使用size属性将高度分别设置为sm或
lg (小或大)。不需要设置单个输入或按钮的大小。但请注意,您还需要在下拉列表中设置大小。
Label
Label
Label
<div><b-input-groupv-for="size in ['sm','','lg']":key="size":size="size"class="mb-3"prepend="Label"
><b-form-input></b-form-input><b-input-group-append><b-buttonsize="sm"text="Button"variant="success">Button</b-button></b-input-group-append></b-input-group></div>
<div><b-input-groupsize="sm"prepend="Small"class="mb-2"><b-form-inputaria-label="Small text input with custom switch"></b-form-input><b-input-group-appendis-text><b-form-checkboxswitchclass="mr-n2 mb-n1"><spanclass="sr-only">Checkbox for previous text input</span></b-form-checkbox></b-input-group-append></b-input-group><b-input-groupsize="lg"prepend="Large"class="mb-2"><b-form-inputaria-label="Large text input with switch"></b-form-input><b-input-group-appendis-text><b-form-checkboxswitchclass="mr-n2"><spanclass="sr-only">Switch for previous text input</span></b-form-checkbox></b-input-group-append></b-input-group></div>