diff --git a/docs/components/input/index.md b/docs/components/input/index.md index e91e6f656a08993db8ebd30b82d0e9276cd5d1ab..6092d3e83eb8e57b592cd7fefb1a45f9e90f6404 100644 --- a/docs/components/input/index.md +++ b/docs/components/input/index.md @@ -13,16 +13,16 @@ You can use bootstrap icons <fw-input icon="bi-search" placeholder="Search" /> -## Input suffix slot +## Input-right slot ```html <fw-input v-model="value" placeholder="Search"> - <template #suffix> + <template #input-right> suffix </template> </fw-input> ``` <fw-input placeholder="Search"> - <template #suffix> + <template #input-right> suffix </template> </fw-input> diff --git a/src/components/input/Input.vue b/src/components/input/Input.vue index 78597f7cd361a1b3846caa570f874806995702fb..3497fbb732805ce6d86956128fd191d01ed1640e 100644 --- a/src/components/input/Input.vue +++ b/src/components/input/Input.vue @@ -24,8 +24,8 @@ defineProps<Props>() :placeholder="placeholder" @click.stop /> - <div v-if="$slots.suffix" class="suffix"> - <slot name="suffix" /> + <div v-if="$slots['input-right']" class="input-right"> + <slot name="input-right" /> </div> </div> </template> diff --git a/src/components/input/style.scss b/src/components/input/style.scss index 0635a52792577ee48f45909b89309cd3a650d8ca..3c030c637cf4b7e2c98bcba2231af8b2dad8b6b4 100644 --- a/src/components/input/style.scss +++ b/src/components/input/style.scss @@ -45,7 +45,7 @@ } .prefix, - .suffix { + .input-right { display: flex; align-items: center; color: var(--fw-gray-600); @@ -62,7 +62,7 @@ justify-content: center; } - .suffix { + .input-right { padding-right: 12px; } }