Vuetify

商店

企业版

v-skeleton-loader 组件是一种多功能工具,可以在项目中扮演许多角色。 从本质上讲,该组件向用户指示即将到来但尚不可用。 有 30 多个预定义选项可用,可以组合在一起以创建自定义示例。

v-skeleton-loader 组件为用户提供了视觉指示,指示内容 即将到来/正在加载。 比传统的全屏加载器更好。

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

v-skeleton-loader 可以在创建模型时使用样板设计。 混合并匹配各种预定义选项,或创建自己的独特实现。 在此示例中,我们将 v-skeleton-loader 扩展到名为 v-boilerplate 的新组件中,以用作功能样板组件。

有两种方法可以使用 v-skeleton-componentdefault slotv-if 条件。内建的插槽是最方便和最容易使用的,但是一旦渲染就会生成一个额外的 div。如果额外的 div 在您的设置中是一个问题,您可以使用一个 Vuetify transition component 或一个定制的 v-if 条件。

默认情况下,v-skeleton-loader 组件被分配给了 WAI-ARIA 角色 alert。我们用两个法属性来补充这个角色。aria-busy 的值 true 表示小部件缺少所需属元素。aria-live 的值polite 设置屏幕读者对实时区域的优先级。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!