Manual Bone Setting

This example demonstrates how to control an element being detected as a bone by adding the data-gueleton-bone attribute.

In the example, we manually add the data-gueleton-bone attribute to the parent elements of the tweet card’s username and content sections, so that Gueleton will recognize these parts as a bone.

Click Reload Data to see the effect

Reload data Reset

Loading

控制是否显示骨架屏

Fuzzy 1

调整生成骨架的粒度

Style

Background Color

Container Background Color

type 为 overlay 时效果明显

Network

Limit

预存数据的裁剪规则

Fetch Delay s

模拟网络延迟时间

Manual.vue

<template>
  <Gueleton
    :data-key="dataKey"
    :data="data"
    :loading="loading"
    v-slot="{ data }"
  >
    <div class="p-4 border rounded-lg shadow-sm bg-white not-content">
      <!-- Tweet header -->
      <div class="flex items-start gap-3">
        <div class="h-12 w-12">
          <img class="size-full rounded-full object-cover"
            src="https://avatars.githubusercontent.com/u/24749324?v=4&size=64" alt="avatar">
        </div>
        <div
          data-gueleton-bone
          class="flex-1"
        >
          <div class="flex items-center gap-2">
            <span class="font-semibold text-sm"> siaikin </span>
            <span class="text-gray-500 text-sm">@user · 2m</span>
          </div>
          <p class="mt-2 text-gray-800">
            Just setting up my Gueleton. #myfirstgueleton
          </p>
        </div>
      </div>

      <!-- Tweet actions -->
      <div class="mt-3 flex items-center justify-between text-gray-500 text-sm">
        <div class="flex gap-6">
          <button class="flex items-center gap-2 p-0 bg-transparent hover:text-blue-500">💬 <span> 0 </span></button>
          <button class="flex items-center gap-2 p-0 bg-transparent hover:text-green-500">🔁 <span> 0 </span></button>
          <button class="flex items-center gap-2 p-0 bg-transparent hover:text-red-500">❤️ <span> 0 </span></button>
        </div>
        <div class="text-xs">Translate</div>
      </div>
    </div>
  </Gueleton>
</template>

// ---cut-after---

<script setup>
import { computed } from 'vue'

import { gueletonOptions } from '../../../store/gueleton-options';
import { useStore } from '@nanostores/vue';

const $gueletonOptions = useStore(gueletonOptions);

const dataKey = computed(() => $gueletonOptions.value.dataKey);
const data = computed(() => $gueletonOptions.value.data);
const loading = computed(() => $gueletonOptions.value.loading);
</script>

TweetCard.vue

<template>
  <!-- Summary Card (thumbnail) - Tailwind CSS -->
  <div class="p-4 border rounded-lg shadow-sm bg-white not-content">
    <!-- Tweet header -->
    <div class="flex items-start gap-3">
      <div class="h-12 w-12">
        <img class="size-full rounded-full object-cover"
          :src="avatar" alt="avatar">
      </div>
      <div class="flex-1">
        <div class="flex items-center gap-2">
          <span class="font-semibold text-sm">{{ author }}</span>
          <span class="text-gray-500 text-sm">@user · {{ date }}</span>
        </div>
        <p class="mt-2 text-gray-800">
          {{ content }}
        </p>
      </div>
    </div>

    <!-- Tweet actions -->
    <div class="mt-3 flex items-center justify-between text-gray-500 text-sm">
      <div class="flex gap-6">
        <button class="flex items-center gap-2 hover:text-blue-500">💬 <span>{{ comments }}</span></button>
        <button class="flex items-center gap-2 hover:text-green-500">🔁 <span>{{ retweets }}</span></button>
        <button class="flex items-center gap-2 hover:text-red-500">❤️ <span>{{ likes }}</span></button>
      </div>
      <div class="text-xs">Translate</div>
    </div>
  </div>

</template>

<script setup lang="ts">
import type { TweetCard } from '../../../lib/mock-utils';

defineProps<TweetCard>();
</script>