niu-grandpa / Rabbitui
Licence: mit
Rabbit UI 是基于 Typescript 编写的UI组件库
Stars: ✭ 307
Programming Languages
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
Projects that are alternatives of or similar to Rabbitui
Jetquotes
🔖 A Quotes Application built to Demonstrate the Jetpack Compose UI
Stars: ✭ 179 (-41.69%)
Mutual labels: ui-design, ui-components
react-native-imaged-card-view
Rising Imaged Card View with Awesome Shadows and Fully Customizable Library for React Native
Stars: ✭ 16 (-94.79%)
Mutual labels: ui-design, ui-components
Underexpress
A free, responsive, ready to use website ui kit, built with bootstrap 4.
Stars: ✭ 205 (-33.22%)
Mutual labels: ui-design, ui-components
Citrus.avalonia
Modern styles for Avalonia controls.
Stars: ✭ 161 (-47.56%)
Mutual labels: ui-design, ui-components
CheckMarkView
UI view which draws programmatically a checkmark with different styles
Stars: ✭ 35 (-88.6%)
Mutual labels: ui-design, ui-components
Linearprogressbar
Simple progress bar for iOS
Stars: ✭ 166 (-45.93%)
Mutual labels: ui-design, ui-components
Metroset Ui
Windows Forms Metro Skin Style, Make The Applications With Metro Styles. see more https://n-a-r-w-i-n.github.io/MetroSet-UI/
Stars: ✭ 228 (-25.73%)
Mutual labels: ui-design, ui-components
React Virgin
The react-native UI Kit you've been looking for.
Stars: ✭ 1,523 (+396.09%)
Mutual labels: ui-design, ui-components
dashkit-ui
UI Components built on React.
Stars: ✭ 17 (-94.46%)
Mutual labels: ui-design, ui-components
Bulma.io-axure
AxureRP Library with Bulma.io components
Stars: ✭ 90 (-70.68%)
Mutual labels: ui-design, ui-components
Collectionviewslantedlayout
A CollectionView Layout displaying a slanted cells
Stars: ✭ 2,029 (+560.91%)
Mutual labels: ui-design, ui-components
Light dark toggle
An awesome flutter app which artistically animates light and dark mode 😍
Stars: ✭ 175 (-43%)
Mutual labels: ui-design, ui-components
Atom Design
🍬 The mobile side UI-library base on Vue.js
Stars: ✭ 120 (-60.91%)
Mutual labels: ui-design, ui-components
Css Mint
Lightweight and simple to use UI Kit. Fully responsive, just 3KB gzipped.
Stars: ✭ 209 (-31.92%)
Mutual labels: ui-design, ui-components
Datingapp
Dating UI kit is used for online meet up with girls and boys . The screen contains more than 30 icons and most of all required elements required to design an application like this. The XML and JAVA files contains comments at each and every point for easy understanding. Everything was made with a detail oriented style and followed by today's web trends. Clean coded & Layers are well-organized, carefully named, and grouped.
Stars: ✭ 97 (-68.4%)
Mutual labels: ui-design, ui-components
Lucide
Simply beautiful open source icons, community-sourced
Stars: ✭ 105 (-65.8%)
Mutual labels: ui-design, ui-components
open design system
Open Source Design System using Sketch. It's early days of my project.
Stars: ✭ 22 (-92.83%)
Mutual labels: ui-design, ui-components
monalisa-ui
MonalisaUI ✨ React Native UI Library
Stars: ✭ 37 (-87.95%)
Mutual labels: ui-design, ui-components
简体中文 | English
RabbitUI
一个基于 TypeScript 构建的UI组件库
目前项目仍处于制作阶段，后续将会更新更多的组件，制作更加详细的文档介绍和官网详情页面
特性
-
优雅、简洁，与庞大且臃肿让人看了眼花缭乱的结构 Say goodbye
-
不依赖任何第三方框架，底层基于原生 Javascript 编写
-
使用少量 HTML 代码且语义化可读性高的自定义标签
-
能够直接在 Vue、React或者其他现有项目中配合使用
-
丰富的组件和功能，满足大部分网站场景
-
细致、漂亮的 UI
-
事无巨细的文档
安装
- 使用 npm
npm install rabbit-design --save
- 浏览器引入
在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 Rabbit。
<!--引入样式库-->
<link rel="stylesheet" href="dist/styles/rabbit.css">
<!--引入脚本-->
<script type="text/javascript" src="rabbit.min.js"></script>
示例
浏览器环境示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!--引入样式库-->
<link rel="stylesheet" href="dist/styles/rabbit.css">
</head>
<body>
<!--警告提示组件-->
<r-alert type="success" message="Success Text"></r-alert>
<!--工具提示组件-->
<r-tooltip content="这里是提示文字">鼠标经过这段文字时，会显示一个气泡框</r-tooltip>
<!--折叠面板组件-->
<r-collapse defaultActiveKey="1">
<r-collapse-panel key="1" title="面板标题1">
<p>狗是一种家养动物。它以忠诚和忠诚而闻名，在世界各地的许多家庭中，它都是受欢迎的客人。</p>
</r-collapse-panel>
<r-collapse-panel key="2" title="面板标题2">
<p>狗是一种家养动物。它以忠诚和忠诚而闻名，在世界各地的许多家庭中，它都是受欢迎的客人。</p>
</r-collapse-panel>
<r-collapse-panel key="3" title="面板标题3">
<p>狗是一种家养动物。它以忠诚和忠诚而闻名，在世界各地的许多家庭中，它都是受欢迎的客人。</p>
</r-collapse-panel>
</r-collapse>
</body>
<!--引入 Rabbit.js-->
<script type="text/javascript" src="rabbit.min.js"></script>
<script>
// 需要先实例化组件的构造函数
const Alert = new Rabbit.Alert();
const Tooltip = new Rabbit.Tooltip();
const Collapse = new Rabbit.Collapse();
</script>
</html>
NPM 环境
推荐使用 npm 来安装，享受生态圈和工具带来的便利，更好地和 webpack 配合使用，当然，我们也推荐使用 ES2015。
import Rabbit from 'rabbit-design';
const Alert = new Rabbit.Alert();
const Tooltip = new Rabbit.Tooltip();
const Collapse = new Rabbit.Collapse();
引入样式：
import 'rabbit-design/dist/styles/rabbit.css';
按需引用
借助插件 babel-plugin-import可以实现按需加载组件，减少文件体积。首先安装，并在文件 .babelrc 中配置：
npm install babel-plugin-import --save-dev
// .babelrc
{
"plugins": [["import", {
"libraryName": "rabbit-design",
"libraryDirectory": "src/components"
}]]
}
然后这样按需引入组件，就可以减小体积了：
import { Alert, Message } from 'rabbit-design';
特别提醒
- 按需引用仍然需要导入样式，即在 main.js 或根组件执行
import 'rabbit-design/dist/styles/rabbit.css';
浏览器支持
现代浏览器和Internet Explorer 10+。
相关链接
如何贡献
如果你希望参与贡献，欢迎 Pull Request或者邮件联系 [email protected] ，贡献指南暂时还未制作
LICENSE
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].