骨架装载器

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

用例

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

API

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

props

sass

name

boilerplate

type

boolean

default

false

description

从骨架中移除加载动画

name

dark

type

boolean

default

false

description

将暗色主题变量应用到组件。你可以在 dark themes 的 Material Design 文档中找到更多有关信息。

name

elevation

type

number | string

default

undefined

description

组件的海拔可接受 0 到 24 之间的值。你可以在 elevation page 浏览更多信息。

name

height

type

number | string

default

undefined

description

设定组件的高度。

name

light

type

boolean

default

false

description

为组件设置浅色主题。

name

type

boolean

default

false

description

应用一个加载动画，加载光标在悬停时加载。false 的值只有在 default 槽中有内容时才会工作。

name

max-height

type

number | string

default

undefined

description

设定组件的最大高度。

name

max-width

type

number | string

default

undefined

description

设定组件的最大宽度。

name

min-height

type

number | string

default

undefined

description

设定组件的最小高度。

name

min-width

type

number | string

default

undefined

description

设定组件的最小宽度。

name

tile

type

boolean

default

false

description

删除组件的 border-radius。

name

transition

type

string

default

undefined

description

name

type

string

default

undefined

description

字符串分隔要创建的骨架组件列表，例如 type="text@3" 和 type="card, list-item"。将根据提供的字符串递归生成相应的框架。还支持多个元素的简写，例如 article@3 和 paragraph@2 ，它们将生成 3 article skeletons and 2 paragraph 骨架。请参阅下面的可用预定义选项列表。

{
  "actions": "button@2",
  "article": "heading, paragraph",
  "avatar": "avatar",
  "button": "button",
  "card": "image, card-heading",
  "card-avatar": "image, list-item-avatar",
  "card-heading": "heading",
  "chip": "chip",
  "date-picker": "list-item, card-heading, divider, date-picker-options, date-picker-days, actions",
  "date-picker-options": "text, avatar@2",
  "date-picker-days": "avatar@28",
  "heading": "heading",
  "image": "image",
  "list-item": "text",
  "list-item-avatar": "avatar, text",
  "list-item-two-line": "sentences",
  "list-item-avatar-two-line": "avatar, sentences",
  "list-item-three-line": "paragraph",
  "list-item-avatar-three-line": "avatar, paragraph",
  "paragraph": "text@3",
  "sentences": "text@2",
  "table": "table-heading, table-thead, table-tbody, table-tfoot",
  "table-heading": "heading, text",
  "table-thead": "heading@6",
  "table-tbody": "table-row-divider@6",
  "table-row-divider": "table-row, divider",
  "table-row": "table-cell@6",
  "table-cell": "text",
  "table-tfoot": "text@2, avatar@2",
  "text": "text"
}

name

types

type

object

default

{}

description

将与预定义选项结合使用的自定义类型对象。有关可用的预定义选项的列表，请参见 type 属性。

name

width

type

number | string

default

undefined

description

设定组件的宽度。

name

$skeleton-loader-actions-button-margin

default

12px !default;

name

$skeleton-loader-actions-padding

default

16px 16px 8px !default;

name

$skeleton-loader-article-heading-margin-top-left

default

16px !default;

name

$skeleton-loader-article-heading-margin-x

default

16px !default;

name

$skeleton-loader-article-paragraph-padding

default

16px !default;

name

$skeleton-loader-avatar-height

default

56px !default;

name

$skeleton-loader-avatar-width

default

48px !default;

name

$skeleton-loader-border-radius

default

$border-radius-root !default;

name

$skeleton-loader-button-border-radius

default

$border-radius-root !default;

name

$skeleton-loader-button-height

default

36px !default;

name

$skeleton-loader-button-width

default

64px !default;

name

$skeleton-loader-card-heading-loader-heading-margin

default

16px !default;

name

$skeleton-loader-card-text-padding

default

16px !default;

name

$skeleton-loader-chip-border-radius

default

16px !default;

name

$skeleton-loader-chip-height

default

32px !default;

name

$skeleton-loader-chip-width

default

96px !default;

name

$skeleton-loader-date-picker-border-radius

default

inherit !default;

name

$skeleton-loader-date-picker-days-height

default

40px !default;

name

$skeleton-loader-date-picker-days-margin

default

4px !default;

name

$skeleton-loader-date-picker-days-padding

default

0 12px !default;

name

$skeleton-loader-date-picker-days-width

default

40px !default;

name

$skeleton-loader-date-picker-options-avatar-child-margin

default

8px !default;

name

$skeleton-loader-date-picker-options-avatar-height

default

40px !default;

name

$skeleton-loader-date-picker-options-avatar-width

default

40px !default;

name

$skeleton-loader-date-picker-options-padding

default

16px !default;

name

$skeleton-loader-divider-border-radius

default

1px !default;

name

$skeleton-loader-divider-height

default

2px !default;

name

$skeleton-loader-heading-border-radius

default

12px !default;

name

$skeleton-loader-heading-height

default

24px !default;

name

$skeleton-loader-image-height

default

200px !default;

name

$skeleton-loader-item-avatar-height

default

40px !default;

name

$skeleton-loader-item-avatar-margin

default

16px !default;

name

$skeleton-loader-item-avatar-width

default

40px !default;

name

$skeleton-loader-item-padding

default

0 16px !default;

name

$skeleton-loader-item-three-line-height

default

88px !default;

name

$skeleton-loader-item-two-line-height

default

72px !default;

name

$skeleton-loader-list-item-height

default

48px !default;

name

$skeleton-loader-loading-animation

default

loading 1.5s infinite !default;

name

$skeleton-loader-loading-transform

default

translateX(-100%) !default;

name

$skeleton-loader-table-cell-height

default

48px !default;

name

$skeleton-loader-table-cell-width

default

88px !default;

name

$skeleton-loader-table-heading-padding

default

16px !default;

name

$skeleton-loader-table-tbody-padding

default

16px 16px 0 !default;

name

$skeleton-loader-table-tfoot-avatar-height

default

40px !default;

name

$skeleton-loader-table-tfoot-avatar-width

default

40px !default;

name

$skeleton-loader-table-tfoot-children-margin

default

8px !default;

name

$skeleton-loader-table-tfoot-padding

default

16px !default;

name

$skeleton-loader-table-thead-heading-padding

default

16px !default;

name

$skeleton-loader-table-thead-padding

default

16px !default;

name

$skeleton-loader-text-border-radius

default

6px !default;

name

$skeleton-loader-text-height

default

12px !default;

实战场

示例

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

样板组件

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

实现方法

有两种方法可以使用 v-skeleton-component。default slot 或 v-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!