<template>
  <div class="demo-card-loading">
    <ui-card
      title="Card Title"
      :loading="loading"
      :style="{width: '300px'}">
      <div class="card-content">
        <ul>
          <li>Card content.</li>
          <li>Card content.</li>
        </ul>
      </div>
    </ui-card>
    <div class="btn-wrap">
      <ui-button @click="loading = !loading">
        Toggle loading
      </ui-button>
    </div>
  </div>
</template>

<script>
import { Card, Button } from "amumu-ui"

export default {
  components: {
    "ui-card": Card,
    "ui-button": Button,
  },
  data() {
    return {
      loading: true,
    }
  },
}
</script>

<style lang="scss">
.demo-card-loading {
  .btn-wrap {
    margin-top: 20px;
  }
}
</style>
