The v-skeleton-loader component is a versatile tool that can fill many roles within a project. At its heart, the component provides an indication to the user that something is coming but not yet available. There are over 30 pre-defined options available that can be combined to make custom examples.

The v-skeleton-loader component provides a user with a visual indicator that content is coming / loading. This is better received than traditional full-screen loaders.

제공되는 Props, Slots, Events 와 함수들을 이용하여 원하는 컴포넌트를 직접 구현해 보세요.

간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.

The v-skeleton-loader can be used as boilerplate designs when creating mockups. Mix and match various pre-defined options or create your own unique implementations. In this example, we are extending the v-skeleton-loader into a new component called v-boilerplate for use as a functional boilerplate component.

There are 2 ways that you can utilize the v-skeleton-component. The default slot or a v-if conditional. The built in slot is the most convenient and easiest to use, but generates an extra div once rendered. If the extra div is an issue in your setup, you can utilize a v-if conditional with a Vuetify transition component or a custom one.

By default, the v-skeleton-loader component is assigned a WAI-ARIA role of alert. We augment this role with two aria properties. An aria-busy value of true denotes that a widget is missing required owned elements. An aria-live value of polite sets the screen reader's priority of live regions.

더 읽을 준비 되었나요? 그렇다면 아래 설명서를 더 읽어보세요!

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