自定义样式示例

示例展示了如何设置 bone 和 container 的样式。

注意

通过 className 设置背景色时，内置的背景色样式是通过 style 属性直接作用于元素上的，优先级较高。

你需要使用 !important 来覆盖它，或者使用 revert-layer 关键字回滚到上一个层级的样式。

点击卡片任意区域刷新

Style.vue

<template>
  <Gueleton
    data-key="docs-example-style"
    :data="data"
    :loading="loading"
    v-slot="{ data }"

    :bone="{
      style: { backgroundColor: 'revert-layer' },
      className: 'rounded-md bg-gray-500',
    }"
    :container="{
      style: { backgroundColor: 'revert-layer' },
      className: 'bg-black',
    }"
  >
    <div class="flex flex-col gap-4 p-4" @click="fetchData">
      <TweetCard v-for="(item, index) in data" :key="index" v-bind="item" />
    </div>
  </Gueleton>
</template>

<script setup>
import { mockRequest } from "../../../lib/mock-utils";
import { onMounted, ref } from 'vue'
import TweetCard from './TweetCard.vue';

const data = ref([]);
const loading = ref(false);

async function fetchData() {
  loading.value = true;
  data.value = [];
  data.value = await mockRequest(1500);
  loading.value = false;
}
onMounted(() => fetchData());
</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>