一款简洁的ui组件库rabbit-ui
代码语言:html
所属分类:布局界面
代码描述:一款简洁的ui组件库rabbit-ui
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/rabbit-ui.css"> <style> .example { width: 520px; padding: 20px; margin: 20px auto; border: 1px solid #f0f0f0; } .demo-tabs-style1>.rab-tabs-card>.rab-tabs-content { height: 120px; margin-top: -16px; } .demo-tabs-style1>.rab-tabs-card>.rab-tabs-content>r-tab-pane { background: #fff; padding: 16px; } .demo-tabs-style1>.rab-tabs-card>.rab-tabs-bar .rab-tabs-tab { border-color: transparent; } .demo-tabs-style1>.rab-tabs-card>.rab-tabs-bar .rab-tabs-tab-active { border-color: #fff; } .demo-tabs-style2>.rab-tabs-card>.rab-tabs-bar .rab-tabs-tab { border-radius: 0; background: #fff; } .demo-tabs-style2>.rab-tabs-card>.rab-tabs-bar .rab-tabs-tab-active { border-top: 1px solid #3399ff; } .demo-tabs-style2>.rab-tabs-card>.rab-tabs-bar .rab-tabs-tab-active:before { content: ''; display: block; width: 100%; height: 1px; background: #3399ff; position: absolute; top: 0; left: 0; } </style> </head> <body> <div class="example"> <r-alert title="信息提示的文案"></r-alert> <r-alert type="success" title="成功提示的文案"></r-alert> <r-alert type="warning" title="警告提示的文案"></r-alert> <r-alert type="error" title="错误提示的文案"></r-alert> </div> <div class="example"> <r-alert title="信息提示的文案"> <p> 信息提示的内容,信息提示的内容,信息提示的,信息提示的内容,信息提示的内容。 </p> </r-alert> <r-alert type="success" title="成功提示的文案"> <p> 成功提示的内容,成功提示的内容,成功提示的,成功提示的内容,成功提示的内容。 </p> </r-alert> <r-alert type="warning" title="警告提示的文案"> <p> 警告提示的内容,警告提示的内容,警告提示的,警告提示的内容,警告提示的内容。 </p> </r-alert> <r-alert type="error" title="错误提示的文案"> <p> 错误提示的内容,错误提示的内容,错误提示的,错误提示的内容,错误提示的内容。 </p> </r-alert> </div> <div class="example"> <r-alert title="信息提示的文案" show-icon="true"></r-alert> <r-alert type="success" title="成功提示的文案" show-icon="true"></r-alert> <r-alert type="warning" title="警告提示的文案" show-icon="true"></r-alert> <r-alert type="error" title="错误提示的文案" show-icon="true"></r-alert> <r-alert title="信息提示的文案" show-icon="true"> <p> 信息提示的内容,信息提示的内容,信息提示的,信息提示的内容,信息提示的内容。 </p> </r-alert> <r-alert type="success" title="成功提示的文案" show-icon="true"> <p> 成功提示的内容,成功提示的内容,成功提示的,成功提示的内容,成功提示的内容。 </p> </r-alert> <r-alert type="warning" title="警告提示的文案" show-icon="true"> <p> 警告提示的内容,警告提示的内容,警告提示的,警告提示的内容,警告提示的内容。 </p> </r-alert> <r-alert type="error" title="错误提示的文案" show-icon="true"> <p> 错误提示的内容,错误提示的内容,错误提示的,错误提示的内容,错误提示的内容。 </p> </r-alert> <r-alert title="自定义图标" show-icon="true" icon="<i class='rab-icon rab-icon-ios-planet'>"> <p> 自定义图标的内容,自定义图标的内容,自定义图标的内容。 </p> </r-alert> </div> <div class="example"> <r-alert title="信息提示的文案" closable="true" id="test"></r-alert> <r-alert type="success" title="成功提示的文案" closable="true"> <p> 成功提示的内容,成功提示的内容,成功提示的,成功提示的内容,成功提示的内容。 </p> </r-alert> <r-alert type="warning" title="警告提示的文案" closable="true" close-text="知道了"></r-alert> </div> <div class="example"> <r-alert banner="true" type="warning" title="注意:通知内容……"></r-alert> <r-alert banner="true" closable="true" type="warning" title="注意:通知内容……"></r-alert> <r-alert banner="true" show-icon="true" type="warning" title="注意:通知内容……"></r-alert> </div> <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" class="rab-btn">Yesterday</button> <button disabled type="button" class="rab-btn">Today</button> <button disabled type="button" class="rab-btn">Tomorrow</button> </div> <br /><br /> <div class="rab-btn-group"> <button type="button" class="rab-btn rab-btn-primary">L</button> <button type="button" class="rab-btn">M</button> <button type="button" class="rab-btn">M</button> <button type="button" class="rab-btn rab-btn-dashed">R</button> </div> <br /><br /> <h4>图标</h4> <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>Backward</span> </button> <button type="button" class="rab-btn rab-btn-primary"> <span>Forward</span> <i class="rab-icon rab-icon-ios-arrow-forward"></i> </button> </div> <div class="rab-btn-group"> <button type="button" icon="ios-skip-backward" class="rab-btn rab-btn-primary"></button> <button type="button" icon="ios-skip-forward" class="rab-btn rab-btn-primary"></button> </div> <div class="rab-btn-group"> <button type="button" icon="ios-color-wand" class="rab-btn"></button> <button type="button" icon="ios-sunny" class="rab-btn"></button> <button type="button" icon="ios-crop" class="rab-btn"></button> <button type="button" icon="ios-color-filter" class="rab-btn"></button> </div> <br /><br /> <h4>圆角</h4> <br /><br /> <div class="rab-btn-group rab-btn-group-circle"> <button type="button" class="rab-btn rab-btn-primary"> <i class="rab-icon rab-icon-ios-arrow-back"></i> <span>Backward</span> </button> <button type="button" class="rab-btn rab-btn-primary"> <span>Forward</span> <i class="rab-icon rab-icon-ios-arrow-forward"></i> </button> </div> <div class="rab-btn-group rab-btn-group-circle"> <button type="button" icon="ios-skip-backward" class="rab-btn rab-btn-primary"></button> <button type="button" icon="ios-skip-forward" class="rab-btn rab-btn-primary"></button> </div> <div class="rab-btn-group rab-btn-group-circle"> <button type="button" icon="ios-color-wand" class="rab-btn"></button> <button type="button" icon="ios-sunny" class="rab-btn"></button> <button type="button" icon="ios-crop" class="rab-btn"></button> <butto.........完整代码请登录后点击上方下载按钮下载查看
网友评论0