一款简洁的ui组件库rabbit-ui

代码语言:html

所属分类:布局界面

代码描述:一款简洁的ui组件库rabbit-ui

代码标签: 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