<template>
  <div class="block">
    <h1>概述</h1>
    <p>显示一个全局“加载中”的状态</p>
  </div>
  
  <div class="block">
    <h1>代码示例</h1>
    <RunCase label="基本用法" file="./loading/Basic.vue">
      <template #component>
        <Basic />
      </template>
      <template #description>
        <p><code>show</code>等于<code>true</code>时显示加载中</p>
      </template>
    </RunCase>
  </div>

  <div class="block">
    <h1>代码示例</h1>
    <RunCase label="基本用法" file="./loading/WithText.vue">
      <template #component>
        <WithText />
      </template>
      <template #description>
        <p>可以通过默认插槽显示额外的内容</p>
      </template>
    </RunCase>
  </div>

  <div class="block">
    <h1>API</h1>
    <h2>props</h2>
    <PropsTable type="loading"/>
  </div>
  
</template>

<script setup>
import Basic from '../components/loading/Basic.vue'
import WithText from '../components/loading/WithText.vue';

</script>