61 lines
1.3 KiB
Vue
61 lines
1.3 KiB
Vue
<script lang="ts" setup>
|
|
import { NiButton } from './components/button/index'
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<h1>Ni UI 组件库示例</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 lang="scss">
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
|
|
h1 {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
}
|
|
|
|
.demo-section {
|
|
margin-bottom: 40px;
|
|
|
|
h2 {
|
|
margin-bottom: 20px;
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
.demo-row {
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: center;
|
|
}
|
|
</style>
|