gulu-vue2
Version:
用 Vue2 做的 UI 框架
54 lines (51 loc) • 11.9 kB
HTML
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>网格 | 轱辘 UI</title>
<meta name="generator" content="VuePress 1.9.7">
<meta name="description" content="一个好用的 UI 框架">
<link rel="preload" href="/gulu-vue2/assets/css/0.styles.8606bcb5.css" as="style"><link rel="preload" href="/gulu-vue2/assets/js/app.0489becd.js" as="script"><link rel="preload" href="/gulu-vue2/assets/js/2.f1b72e70.js" as="script"><link rel="preload" href="/gulu-vue2/assets/js/18.7ad75a27.js" as="script"><link rel="preload" href="/gulu-vue2/assets/js/10.b3cb723a.js" as="script"><link rel="prefetch" href="/gulu-vue2/assets/js/11.e5495829.js"><link rel="prefetch" href="/gulu-vue2/assets/js/12.c53ef19f.js"><link rel="prefetch" href="/gulu-vue2/assets/js/13.8d31745d.js"><link rel="prefetch" href="/gulu-vue2/assets/js/14.c5677d25.js"><link rel="prefetch" href="/gulu-vue2/assets/js/15.999ba418.js"><link rel="prefetch" href="/gulu-vue2/assets/js/16.1bcbd636.js"><link rel="prefetch" href="/gulu-vue2/assets/js/17.1a46b68b.js"><link rel="prefetch" href="/gulu-vue2/assets/js/19.3ea47d1a.js"><link rel="prefetch" href="/gulu-vue2/assets/js/20.0014d694.js"><link rel="prefetch" href="/gulu-vue2/assets/js/21.9d6002e2.js"><link rel="prefetch" href="/gulu-vue2/assets/js/22.1c3ed6a7.js"><link rel="prefetch" href="/gulu-vue2/assets/js/23.71a952f8.js"><link rel="prefetch" href="/gulu-vue2/assets/js/24.b25d935f.js"><link rel="prefetch" href="/gulu-vue2/assets/js/25.a8b50968.js"><link rel="prefetch" href="/gulu-vue2/assets/js/26.f038e661.js"><link rel="prefetch" href="/gulu-vue2/assets/js/3.56737757.js"><link rel="prefetch" href="/gulu-vue2/assets/js/4.f04e4227.js"><link rel="prefetch" href="/gulu-vue2/assets/js/5.1d9468e9.js"><link rel="prefetch" href="/gulu-vue2/assets/js/6.9765cee7.js"><link rel="prefetch" href="/gulu-vue2/assets/js/7.4f5e636d.js"><link rel="prefetch" href="/gulu-vue2/assets/js/8.cd0fbb17.js"><link rel="prefetch" href="/gulu-vue2/assets/js/9.0454796a.js">
<link rel="stylesheet" href="/gulu-vue2/assets/css/0.styles.8606bcb5.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/gulu-vue2/" class="home-link router-link-active"><!----> <span class="site-name">轱辘 UI</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/gulu-vue2/install/" class="sidebar-link">安装</a></li><li><a href="/gulu-vue2/getStarted/" class="sidebar-link">快速上手</a></li><li><section class="sidebar-group collapsable depth-0"><a href="/gulu-vue2/components/" class="sidebar-heading clickable router-link-active open"><span>组件</span> <span class="arrow down"></span></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/gulu-vue2/components/Button.html" class="sidebar-link">Button - 按钮</a></li><li><a href="/gulu-vue2/components/Input.html" class="sidebar-link">Input - 输入框</a></li><li><a href="/gulu-vue2/components/Grid.html" aria-current="page" class="active sidebar-link">Grid - 网格</a></li><li><a href="/gulu-vue2/components/Layout.html" class="sidebar-link">Layout - 布局</a></li><li><a href="/gulu-vue2/components/Toast.html" class="sidebar-link">Toast - 弹出提示框</a></li><li><a href="/gulu-vue2/components/Tabs.html" class="sidebar-link">Tabs - 标签</a></li><li><a href="/gulu-vue2/components/Popover.html" class="sidebar-link">Popover - 弹出层</a></li><li><a href="/gulu-vue2/components/Collapse.html" class="sidebar-link">Collapse - 手风琴</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="网格"><a href="#网格" class="header-anchor">#</a> 网格</h1> <div data-v-c92004b8><section data-v-c92004b8><p data-v-c92004b8>响应式网格</p> <div class="g-row" style="margin-left:-NaNpx;margin-right:-NaNpx;background-color:#eee;" data-v-0eedeffa data-v-c92004b8><div class="g-col col-24 col-pad-12 col-narrowPc-8 col-pc-6 col-widePc-4" style="padding-left:0px;padding-right:0px;" data-v-4983edab data-v-c92004b8><div style="border:1px solid #aaa;height:50px;text-align:center;line-height:50px;" data-v-4983edab data-v-c92004b8>1</div></div><div class="g-col col-24 col-pad-12 col-narrowPc-8 col-pc-6 col-widePc-4" style="padding-left:0px;padding-right:0px;" data-v-4983edab data-v-c92004b8><div style="border:1px solid #aaa;height:50px;text-align:center;line-height:50px;" data-v-4983edab data-v-c92004b8>2</div></div><div class="g-col col-24 col-pad-12 col-narrowPc-8 col-pc-6 col-widePc-4" style="padding-left:0px;padding-right:0px;" data-v-4983edab data-v-c92004b8><div style="border:1px solid #aaa;height:50px;text-align:center;line-height:50px;" data-v-4983edab data-v-c92004b8>3</div></div><div class="g-col col-24 col-pad-12 col-narrowPc-8 col-pc-6 col-widePc-4" style="padding-left:0px;padding-right:0px;" data-v-4983edab data-v-c92004b8><div style="border:1px solid #aaa;height:50px;text-align:center;line-height:50px;" data-v-4983edab data-v-c92004b8>4</div></div><div class="g-col col-24 col-pad-12 col-narrowPc-8 col-pc-6 col-widePc-4" style="padding-left:0px;padding-right:0px;" data-v-4983edab data-v-c92004b8><div style="border:1px solid #aaa;height:50px;text-align:center;line-height:50px;" data-v-4983edab data-v-c92004b8>5</div></div><div class="g-col col-24 col-pad-12 col-narrowPc-8 col-pc-6 col-widePc-4" style="padding-left:0px;padding-right:0px;" data-v-4983edab data-v-c92004b8><div style="border:1px solid #aaa;height:50px;text-align:center;line-height:50px;" data-v-4983edab data-v-c92004b8>6</div></div></div> <pre data-v-c92004b8><code data-v-c92004b8><g-row style="background-color: #eee">
<g-col
v-for="item in 6" :key="item"
span="24" :pad="{span: 12}" :narrow-pc="{span: 8}" :pc="{span: 6}" :wide-pc="{span: 4}"
>
<div style="border: 1px solid #ccc; height: 50px; text-align: center; line-height: 50px">{{ item }}</div>
</g-col>
</g-row></code></pre></section> <section data-v-c92004b8><p data-v-c92004b8>设置偏移（offset）</p> <div class="g-row" style="margin-left:-NaNpx;margin-right:-NaNpx;background-color:#eee;" data-v-0eedeffa data-v-c92004b8><div class="g-col col-24 col-pad-12 col-narrowPc-4" style="padding-left:0px;padding-right:0px;" data-v-4983edab data-v-c92004b8><div style="border:1px solid #aaa;height:50px;text-align:center;line-height:50px;" data-v-4983edab data-v-c92004b8>1</div></div> <div class="g-col col-24 col-pad-12 col-narrowPc-8 offset-narrowPc-4" style="padding-left:0px;padding-right:0px;" data-v-4983edab data-v-c92004b8><div style="border:1px solid #aaa;height:50px;text-align:center;line-height:50px;" data-v-4983edab data-v-c92004b8>2</div></div> <div class="g-col col-24 col-pad-12 col-narrowPc-4 offset-narrowPc-4" style="padding-left:0px;padding-right:0px;" data-v-4983edab data-v-c92004b8><div style="border:1px solid #aaa;height:50px;text-align:center;line-height:50px;" data-v-4983edab data-v-c92004b8>3</div></div></div> <pre data-v-c92004b8><code data-v-c92004b8><g-row style="background-color: #eee">
<g-col span="24" :pad="{span: 12}" :narrow-pc="{span: 4}">
<div style="border: 1px solid #aaa; height: 50px; text-align: center; line-height: 50px">1</div>
</g-col>
<g-col span="24" :pad="{span: 12}" :narrow-pc="{span: 8, offset: 4}">
<div style="border: 1px solid #aaa; height: 50px; text-align: center; line-height: 50px">2</div>
</g-col>
<g-col span="24" :pad="{span: 12}" :narrow-pc="{span: 4, offset: 4}">
<div style="border: 1px solid #aaa; height: 50px; text-align: center; line-height: 50px">3</div>
</g-col>
</g-row></code></pre></section> <section data-v-c92004b8><p data-v-c92004b8>设置居中（align）</p> <div class="g-row align-center" style="margin-left:-NaNpx;margin-right:-NaNpx;background-color:#eee;" data-v-0eedeffa data-v-c92004b8><div class="g-col" style="padding-left:0px;padding-right:0px;width:100px;border:1px solid #aaa;height:50px;text-align:center;line-height:50px;" data-v-4983edab data-v-c92004b8>1</div> <div class="g-col" style="padding-left:0px;padding-right:0px;width:100px;border:1px solid #aaa;height:50px;text-align:center;line-height:50px;" data-v-4983edab data-v-c92004b8>2</div></div> <pre data-v-c92004b8><code data-v-c92004b8><g-row align="center" style="background-color: #eee">
<g-col style="width: 100px; border: 1px solid #aaa; height: 50px; text-align: center; line-height: 50px">1</g-col>
<g-col style="width: 100px; border: 1px solid #aaa; height: 50px; text-align: center; line-height: 50px">2</g-col>
</g-row></code></pre></section> <section data-v-c92004b8><p data-v-c92004b8>设置间隙（gutter）</p> <div class="g-row" style="margin-left:-10px;margin-right:-10px;background-color:#eee;" data-v-0eedeffa data-v-c92004b8><div class="g-col col-2 col-pc-6 col-widePc-8" style="padding-left:10px;padding-right:10px;" data-v-4983edab data-v-c92004b8><div style="border:1px solid #aaa;height:50px;text-align:center;line-height:50px;" data-v-4983edab data-v-c92004b8>1</div></div> <div class="g-col col-20 col-pc-12 col-widePc-8" style="padding-left:10px;padding-right:10px;" data-v-4983edab data-v-c92004b8><div style="border:1px solid #aaa;height:50px;text-align:center;line-height:50px;" data-v-4983edab data-v-c92004b8>2</div></div></div> <pre data-v-c92004b8><code data-v-c92004b8><g-row :gutter="20" style="background-color: #eee">
<g-col :span="2" :pc="{span: 6}" :wide-pc="{span: 8}">
<div style="border: 1px solid #aaa; height: 50px; text-align: center; line-height: 50px">1</div>
</g-col>
<g-col :span="20" :pc="{span: 12}" :wide-pc="{span: 8}">
<div style="border: 1px solid #aaa; height: 50px; text-align: center; line-height: 50px">2</div>
</g-col>
</g-row></code></pre></section></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/gulu-vue2/components/Input.html" class="prev">
Input - 输入框
</a></span> <span class="next"><a href="/gulu-vue2/components/Layout.html">
Layout - 布局
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/gulu-vue2/assets/js/app.0489becd.js" defer></script><script src="/gulu-vue2/assets/js/2.f1b72e70.js" defer></script><script src="/gulu-vue2/assets/js/18.7ad75a27.js" defer></script><script src="/gulu-vue2/assets/js/10.b3cb723a.js" defer></script>
</body>
</html>