ant-design-vue
ant-design-vue copied to clipboard
[Feature Request] Support `containerClassName` of Spin
- [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.
you can use
. wrapperClassName .ant-spin-container {
height: 100%;
}
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
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.