<script setup lang="ts">
import { NiButton } from 'ni'
</script>
<template>
  <div>
    <h1>组件库示例</h1>
    
    <section class="demo-section">
      <h2>按钮组件</h2>
      <div class="demo-row">
        <NiButton>默认按钮</NiButton>
        <NiButton type="primary">主要按钮</NiButton>
        <NiButton type="success">成功按钮</NiButton>
        <NiButton type="warning">警告按钮</NiButton>
        <NiButton type="danger">危险按钮</NiButton>
      </div>
      
      <div class="demo-row">
        <NiButton size="small">小型按钮</NiButton>
        <NiButton>默认大小</NiButton>
        <NiButton size="large">大型按钮</NiButton>
      </div>
      
      <div class="demo-row">
        <NiButton disabled>禁用按钮</NiButton>
        <NiButton type="primary" disabled>禁用主要按钮</NiButton>
      </div>
    </section>
  </div>
</template>

<style>
#app {
  font-family: Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style> 