ant-design-vue icon indicating copy to clipboard operation
ant-design-vue copied to clipboard

[Feature Request] Support `containerClassName` of Spin

Open meteorlxy opened this issue 3 years ago • 1 comments
trafficstars

  • [x] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Currently, we actually have two-level wrappers in a Spin: a wrapper and a container

https://github.com/vueComponent/ant-design-vue/blob/6650c4d6b1da6ce6065a3c8f08cebea788d416b8/components/spin/Spin.tsx#L148-L162

Now we only supports wrapperClassName in component props, which is not enough. For example, if users want to set 'h-full' class to the child centent to make it have 100% height, they also have to set 'h-full' to the wrapper. However, as there is another container wrapper, the 'h-full' class won't take effect.

<div class={[`${prefixCls}-nested-loading`, wrapperClassName]}>  // <-----  set class="h-full" via wrapperClassName
  <div class={containerClassName} key="container">  //  <-----------------  impossible now
    {children}                    //  <------------------------------------ set class="h-full" on the child component
  </div>
</div>

What does the proposed API look like?

containerClassName -- just like wrapperClassName

Alternatively, maybe we could unwrap the children of Spin, just like how Skeleton does, so that we could reduce the burden of setting extra wrapper / container class names.

meteorlxy avatar Jul 15 '22 08:07 meteorlxy

you can use

. wrapperClassName .ant-spin-container {
   height: 100%;
}

tangjinzhou avatar Jul 24 '22 01:07 tangjinzhou

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

github-actions[bot] avatar Sep 22 '22 04:09 github-actions[bot]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

github-actions[bot] avatar Sep 30 '23 00:09 github-actions[bot]