Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

在Card的插槽 #header中使用输入组 , 如果是number 且 size = tiny或small时 标签和输入框会上下错位 #6608

Open
5 tasks done
wangz-code opened this issue Dec 10, 2024 · 0 comments
Labels
bug Something isn't working good reproduction ✨ This issue provides a good reproduction pr welcome

Comments

@wangz-code
Copy link

Describe the bug

在Card的插槽 #header 中使用 "输入组" 样式异常

Steps to reproduce

card 官方示例
error

<template>
  <n-card>
    <template #header>
      <n-input-group size="small">
        <n-input-group-label size="tiny">https://www.</n-input-group-label>
        <n-input size="tiny" :style="{ width: '33%' }" />
        <n-input-group-label size="tiny">.com</n-input-group-label>
      </n-input-group>

      <n-input-group v-for="size in sizeData">
        <n-input-group-label :size="size">input 正常</n-input-group-label>
        <n-input :size="size" :style="{ width: '33%' }" />
      </n-input-group>

      <n-input-group v-for="size in sizeData">
        <n-input-group-label :size="size">number 错位</n-input-group-label>
        <n-input-number :size="size" />
      </n-input-group>
    </template>

    <n-input-group v-for="size in sizeData">
      <n-input-group-label size="small">Card</n-input-group-label>
      <n-input-number :value="123" size="small" placeholder="字体大小" />
    </n-input-group>
  </n-card>
</template>

<script setup>
const sizeData = ["tiny", "small", "medium", "large"];
</script>

<style scoped>
.n-card {
  max-width: 100%;
}
</style>



Link to minimal reproduction

https://codesandbox.io/p/sandbox/upbeat-fog-zjz7hv

System Info

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M1
    Memory: 170.92 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
    npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm
    pnpm: 9.12.3 - ~/MyGitLib/naiveui-celeris-admin/apps/celeris/node_modules/.bin/pnpm
    Watchman: 2024.04.15.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 131.0.6778.109
    Edge: 89.0.774.77
    Safari: 17.5
  npmPackages:
    naive-ui: catalog: => 2.40.1 
    vue: catalog: => 3.5.12

Used Package Manager

pnpm

Validations

@wangz-code wangz-code added the untriaged need to sort label Dec 10, 2024
@jahnli jahnli added bug Something isn't working good reproduction ✨ This issue provides a good reproduction pr welcome and removed untriaged need to sort labels Dec 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working good reproduction ✨ This issue provides a good reproduction pr welcome
Projects
None yet
Development

No branches or pull requests

2 participants