<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.example {
width: 520px;
padding: 20px;
margin: 20px auto;
border: 1px solid #f0f0f0;
}
</style>
<body>
<div class="example">
<button type="button" class="rab-btn">默认按钮</button>
<button type="button" class="rab-btn rab-btn-primary">主要按钮</button>
<button type="button" class="rab-btn rab-btn-dashed">虚线按钮</button>
<button type="button" class="rab-btn rab-btn-text">文本按钮</button>
<br /><br />
<button type="button" class="rab-btn rab-btn-info">信息按钮</button>
<button type="button" class="rab-btn rab-btn-success">成功按钮</button>
<button type="button" class="rab-btn rab-btn-warning">警告按钮</button>
<button type="button" class="rab-btn rab-btn-error">危险按钮</button>
</div>
<div class="example" style="background: rgb(190, 200, 200)">
<button type="button" class="rab-btn rab-btn-ghost">默认按钮</button>
<button type="button" class="rab-btn rab-btn-primary rab-btn-ghost">主要按钮</button>
<button type="button" class="rab-btn rab-btn-dashed rab-btn-ghost">虚线按钮</button>
<button type="button" class="rab-btn rab-btn-text rab-btn-ghost">文本按钮</button>
<br /><br />
<button type="button" class="rab-btn rab-btn-info rab-btn-ghost">信息按钮</button>
<button type="button" class="rab-btn rab-btn-success rab-btn-ghost">成功按钮</button>
<button type="button" class="rab-btn rab-btn-warning rab-btn-ghost">警告按钮</button>
<button type="button" class="rab-btn rab-btn-error rab-btn-ghost">危险按钮</button>
</div>
<div class="example">
<button type="button" icon="ios-search" class="rab-btn rab-btn-primary rab-btn-circle"></button>
<button type="button" icon="ios-search" class="rab-btn rab-btn-primary">搜索</button>
<button type="button" icon="ios-search" class="rab-btn rab-btn-primary rab-btn-circle">
搜索
</button>
<button type="button" class="rab-btn rab-btn-primary rab-btn-circle">圆角按钮</button>
<br /><br />
<button type="button" icon="ios-search" class="rab-btn rab-btn-circle"></button>
<button type="button" icon="ios-search" class="rab-btn">搜索</button>
<button type="button" icon="ios-search" class="rab-btn rab-btn-circle">搜索</button>
<button type="button" class="rab-btn rab-btn-circle">圆角按钮</button>
</div>
<div class="example">
<button type="button" class="rab-btn rab-btn-primary rab-btn-lg">主要按钮</button>
<button type="button" class="rab-btn">默认按钮</button>
<button type="button" class="rab-btn rab-btn-dashed rab-btn-lg">虚线按钮</button>
<button type="button" class="rab-btn rab-btn-text rab-btn-lg">文本按钮</button>
<br /><br />
<button type="button" class="rab-btn rab-btn-primary">主要按钮</button>
<button type="button" class="rab-btn">默认按钮</button>
<button type="button" class="rab-btn rab-btn-dashed">虚线按钮</button>
<button type="button" class="rab-btn rab-btn-text">文本按钮</button>
<br /><br />
<button type="button" class="rab-btn rab-btn-primary rab-btn-sm">主要按钮</button>
<button type="button" class="rab-btn rab-btn-sm">默认按钮</button>
<button type="button" class="rab-btn rab-btn-dashed rab-btn-sm">虚线按钮</button>
<button type="button" class="rab-btn rab-btn-text rab-btn-sm">文本按钮</button>
<br /><br />
<button type="button" icon="ios-download" class="rab-btn rab-btn-primary rab-btn-circle rab-btn-lg"></button>
<button type="button" icon="ios-download" class="rab-btn rab-btn-primary rab-btn-lg">
<span>Download</span>
</button>
<br /><br />
<button type="button" icon="ios-download" class="rab-btn rab-btn-primary rab-btn-circle"></button>
<button type="button" icon="ios-download" class="rab-btn rab-btn-primary">
<span>Download</span>
</button>
<br /><br />
<button type="button" icon="ios-download" class="rab-btn rab-btn-primary rab-btn-circle rab-btn-sm"></button>
<button type="button" icon="ios-download" class="rab-btn rab-btn-primary rab-btn-sm">
<span>Download</span>
</button>
<br /><br />
<div class="rab-btn-group rab-btn-group-lg">
<button type="button" class="rab-btn rab-btn-primary rab-btn-lg">
<i class="rab-icon rab-icon-ios-arrow-back"></i>
<span>上一页</span>
</button>
<button type="button" class="rab-btn rab-btn-primary rab-btn-lg">
<span>下一页</span>
<i class="rab-icon rab-icon-ios-arrow-forward"></i>
</button>
</div>
<br /><br />
<div class="rab-btn-group">
<button type="button" class="rab-btn rab-btn-primary">
<i class="rab-icon rab-icon-ios-arrow-back"></i>
<span>上一页</span>
</button>
<button type="button" class="rab-btn rab-btn-primary">
<span>下一页</span>
<i class="rab-icon rab-icon-ios-arrow-forward"></i>
</button>
</div>
<br /><br />
<div class="rab-btn-group rab-btn-group-sm">
<button type="button" class="rab-btn rab-btn-primary rab-btn-sm">
<i class="rab-icon rab-icon-ios-arrow-back"></i>
<span>上一页</span>
</button>
<button type="button" class="rab-btn rab-btn-primary rab-btn-sm">
<span>下一页</span>
<i class="rab-icon rab-icon-ios-arrow-forward"></i>
</button>
</div>
</div>
<div class="example">
<button type="button" class="rab-btn rab-btn-success rab-btn-long">提交按钮</button>
<br /><br />
<button type="button" class="rab-btn rab-btn-error rab-btn-long">删除按钮</button>
</div>
<div class="example">
<button type="button" class="rab-btn">默认按钮</button>
<button disabled type="button" class="rab-btn">默认按钮(禁用)</button>
<br /><br />
<button type="button" class="rab-btn rab-btn-primary">主要按钮</button>
<button disabled type="button" class="rab-btn rab-btn-primary">主要按钮(禁用)</button>
<br /><br />
<button type="button" class="rab-btn rab-btn-dashed">虚线按钮</button>
<button disabled type="button" class="rab-btn rab-btn-dashed">虚线按钮(禁用)</button>
<br /><br />
<button type="button" class="rab-btn rab-btn-text">文本按钮</button>
<button disabled type="button" class="rab-btn rab-btn-text">文本按钮(禁用)</button>
</div>
<div class="example">
<button type="button" loading="true" class="rab-btn rab-btn-primary">Loading...</button>
<button type="button" class="rab-btn rab-btn-primary" id="clickMe" onclick="handleLoad()">
Click me!
</button>
<button type="button" loading="true" class="rab-btn rab-btn-circle"></button>
<button type="button" loading="true" class="rab-btn rab-btn-primary rab-btn-circle"></button>
</div>
<div class="example">
<h4>基本</h4>
<br /><br />
<div class="rab-btn-group">
<button type="button" class="rab-btn">Cancel</button>
<button type="button" class="rab-btn rab-btn-primary">Confirm</button>
</div>
<div class="rab-btn-group">
<button disabled type="button"
基于 TypeScript 编写的 JavaScript 简洁 UI 库
版权申诉
200 浏览量
2024-05-08
20:15:30
上传
评论
收藏 4.08MB ZIP 举报
基于 TypeScript 编写的 JavaScript 简洁 UI 库 （736个子文件） 
.babelrc 155B workspace.code-workspace 91B rabbit.css 186KB markdown.css 19KB .editorconfig 421B iconfont.eot 144KB iconfont.eot 144KB .eslintignore 44B .gitattributes 128B .gitignore 74B .gitignore 45B
rabbit.min.js.gz 41KB rabbit.css.gz 26KB
index.html 12KB index.html 7KB index.html 6KB index.html 5KB index.html 5KB index.html 5KB index.html 5KB index.html 4KB index.html 4KB index.html 4KB index.html 4KB index.html 4KB index.html 3KB index.html 3KB index.html 3KB index.html 3KB index.html 3KB index.html 3KB index.html 2KB index.html 2KB index.html 2KB index.html 2KB index.html 2KB index.html 2KB index.html 2KB index.html 2KB index.html 2KB index.html 2KB index.html 2KB index.html 1KB index.html 1KB index.html 1KB index.html 1KB index.html 874B index.html 696B index.html 626B index.html 593B index.html 588B index.html 534B favicon.ico 1KB
zfb-money.jpg 133KB avatar.jpg 124KB card.jpg 57KB rabbit.js 403KB rabbit.min.js 155KB webpack.common.js 3KB .eslintrc.js 2KB webpack.dist.prod.js 1KB webpack.dev.js 1KB prettier.config.js 969B .eslintrc.js 942B webpack.dist.dev.js 582B prettier.config.js 504B postcss.config.js 60B package-lock.json 417KB package-lock.json 169KB package.json 3KB package.json 972B tsconfig.json 662B tsconfig.json 375B icons-icons.less 41KB tinyColor.less 36KB radio.less 10KB button.less 10KB steps.less 9KB normalize.less 8KB custom.less 6KB colors.less 6KB input-number.less 6KB tag.less 6KB input.less 6KB checkbox.less 5KB tabs.less 5KB button.less 5KB move.less 5KB modal.less 4KB badge.less 4KB tooltip.less 4KB poptip.less 4KB slide.less 4KB carousel.less 4KB drawer.less 4KB bezierEasing.less 4KB switch.less 4KB progress.less 4KB message.less 3KB divider.less 3KB共 736 条
- 1
- 2
- 3
- 4
- 5
- 6
- 8
资源评论
