forked from bootstrap-vue-next/bootstrap-vue-next
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(BInputGroup): Refactor examples (bootstrap-vue-next#2529)
- Loading branch information
Showing
12 changed files
with
204 additions
and
383 deletions.
There are no files selected for viewing
20 changes: 20 additions & 0 deletions
20
apps/docs/src/docs/components/demo/InputGroupCheckboxSize.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <template> | ||
| <!-- #region template --> | ||
| <BInputGroup size="sm" prepend="Small" class="mb-2"> | ||
| <BFormInput aria-label="Small text input with custom switch" /> | ||
| <BInputGroupText> | ||
| <BFormCheckbox switch class="me-n2 mb-n1"> | ||
| <span class="visually-hidden">Checkbox for previous text input</span> | ||
| </BFormCheckbox> | ||
| </BInputGroupText> | ||
| </BInputGroup> | ||
| <BInputGroup size="lg" prepend="Large" class="mb-2"> | ||
| <BFormInput aria-label="Large text input with switch" /> | ||
| <BInputGroupText> | ||
| <BFormCheckbox switch class="me-n2"> | ||
| <span class="visually-hidden">Switch for previous text input</span> | ||
| </BFormCheckbox> | ||
| </BInputGroupText> | ||
| </BInputGroup> | ||
| <!-- #endregion template --> | ||
| </template> |
28 changes: 28 additions & 0 deletions
28
apps/docs/src/docs/components/demo/InputGroupCustomCheckbox.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <template> | ||
| <!-- #region template --> | ||
| <BInputGroup class="mb-2"> | ||
| <BInputGroupText> | ||
| <BFormCheckbox class="me-n2"> | ||
| <span class="visually-hidden">Checkbox for following text input</span> | ||
| </BFormCheckbox> | ||
| </BInputGroupText> | ||
| <BFormInput aria-label="Text input with checkbox" /> | ||
| </BInputGroup> | ||
| <BInputGroup class="mb-2"> | ||
| <BInputGroupText> | ||
| <BFormRadio class="me-n2"> | ||
| <span class="visually-hidden">Radio for following text input</span> | ||
| </BFormRadio> | ||
| </BInputGroupText> | ||
| <BFormInput aria-label="Text input with radio input" /> | ||
| </BInputGroup> | ||
| <BInputGroup> | ||
| <BInputGroupText> | ||
| <BFormCheckbox switch class="me-n2"> | ||
| <span class="visually-hidden">Switch for following text input</span> | ||
| </BFormCheckbox> | ||
| </BInputGroupText> | ||
| <BFormInput aria-label="Text input with switch" /> | ||
| </BInputGroup> | ||
| <!-- #endregion template --> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <template> | ||
| <!-- #region template --> | ||
| <BInputGroup> | ||
| <template #prepend> | ||
| <BDropdown text="Dropdown" variant="info"> | ||
| <BDropdownItem>Action A</BDropdownItem> | ||
| <BDropdownItem>Action B</BDropdownItem> | ||
| </BDropdown> | ||
| </template> | ||
| <BFormInput /> | ||
| <template #append> | ||
| <BDropdown v-for="i in 2" :key="i" text="Dropdown" variant="outline-secondary"> | ||
| <BDropdownItem>Action C</BDropdownItem> | ||
| <BDropdownItem>Action D</BDropdownItem> | ||
| </BDropdown> | ||
| </template> | ||
| </BInputGroup> | ||
| <!-- #endregion template --> | ||
| </template> |
17 changes: 17 additions & 0 deletions
17
apps/docs/src/docs/components/demo/InputGroupMultipleAddons.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <template> | ||
| <!-- #region template --> | ||
| <BInputGroup prepend="Item"> | ||
| <BInputGroupText> | ||
| <input type="checkbox" aria-label="Checkbox for following text input" /> | ||
| </BInputGroupText> | ||
| <BInputGroupText><b>$</b></BInputGroupText> | ||
| <BFormInput type="number" aria-label="Text input with checkbox" /> | ||
| </BInputGroup> | ||
| <BInputGroup class="mt-2"> | ||
| <BButton variant="outline-info">Button</BButton> | ||
| <BFormInput type="number" min="0.00" /> | ||
| <BButton variant="outline-secondary">Button</BButton> | ||
| <BButton variant="outline-primary">Button</BButton> | ||
| </BInputGroup> | ||
| <!-- #endregion template --> | ||
| </template> |
8 changes: 8 additions & 0 deletions
8
apps/docs/src/docs/components/demo/InputGroupMultipleInputs.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <template> | ||
| <!-- #region template --> | ||
| <BInputGroup prepend="First and last name" class="mb-2"> | ||
| <BFormInput aria-label="First name" /> | ||
| <BFormInput aria-label="Last name" /> | ||
| </BInputGroup> | ||
| <!-- #endregion template --> | ||
| </template> |
16 changes: 16 additions & 0 deletions
16
apps/docs/src/docs/components/demo/InputGroupNativeCheckbox.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <template> | ||
| <!-- #region template --> | ||
| <BInputGroup class="mb-2"> | ||
| <BInputGroupText> | ||
| <input type="checkbox" aria-label="Checkbox for following text input" /> | ||
| </BInputGroupText> | ||
| <BFormInput aria-label="Text input with checkbox" /> | ||
| </BInputGroup> | ||
| <BInputGroup> | ||
| <BInputGroupText> | ||
| <input type="radio" aria-label="Radio for following text input" /> | ||
| </BInputGroupText> | ||
| <BFormInput aria-label="Text input with radio input" /> | ||
| </BInputGroup> | ||
| <!-- #endregion template --> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <template> | ||
| <!-- #region template --> | ||
| <!-- Using props --> | ||
| <BInputGroup size="lg" prepend="$" append=".00"> | ||
| <BFormInput /> | ||
| </BInputGroup> | ||
| <!-- Using slots --> | ||
| <BInputGroup class="mt-3"> | ||
| <template #append> | ||
| <BInputGroupText><strong class="text-danger">!</strong></BInputGroupText> | ||
| </template> | ||
| <BFormInput /> | ||
| </BInputGroup> | ||
| <!-- Using components --> | ||
| <BInputGroup prepend="Username" class="mt-3"> | ||
| <BFormInput /> | ||
| <BButton variant="outline-success">Button</BButton> | ||
| <BButton variant="info">Button</BButton> | ||
| </BInputGroup> | ||
| <!-- #endregion template --> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <template> | ||
| <BInputGroup | ||
| v-for="size in ['sm', 'md', 'lg']" | ||
| :key="size" | ||
| :size="size as keyof BaseSize" | ||
| class="mb-3" | ||
| prepend="Label" | ||
| > | ||
| <BFormInput /> | ||
| <BButton size="sm" text="Button" variant="success">Button</BButton> | ||
| </BInputGroup> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import type {BaseSize} from 'bootstrap-vue-next' | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <template> | ||
| <!-- #region template --> | ||
| <BInputGroup> | ||
| <template #prepend> | ||
| <BInputGroupText>Username</BInputGroupText> | ||
| </template> | ||
| <BFormInput /> | ||
| <template #append> | ||
| <BDropdown text="Dropdown" variant="success"> | ||
| <BDropdownItem>Action A</BDropdownItem> | ||
| <BDropdownItem>Action B</BDropdownItem> | ||
| </BDropdown> | ||
| </template> | ||
| </BInputGroup> | ||
| <!-- #endregion template --> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <template> | ||
| <!-- #region template --> | ||
| <BInputGroup> | ||
| <BInputGroupText>$</BInputGroupText> | ||
| <BFormInput type="number" min="0.00" /> | ||
| <BInputGroupText>.00</BInputGroupText> | ||
| </BInputGroup> | ||
| <!-- #endregion template --> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <template> | ||
| <!-- #region template --> | ||
| <BInputGroup prepend="$" append=".00"> | ||
| <BFormInput /> | ||
| </BInputGroup> | ||
| <BInputGroup prepend="0" append="100" class="mt-3"> | ||
| <BFormInput type="range" min="0" max="100" /> | ||
| </BInputGroup> | ||
| <!-- #endregion template --> | ||
| </template> |
Oops, something went wrong.