vue-fraction-grid, 基于Flexbox的Vue.js 响应分数网格系统

分享于 

13分钟阅读

GitHub

  繁體 雙語
Flexbox based responsive fraction grid system for Vue.js
  • 源代码名称:vue-fraction-grid
  • 源代码网址:http://www.github.com/bkzl/vue-fraction-grid
  • vue-fraction-grid源代码文档
  • vue-fraction-grid源代码下载
  • Git URL:
    git://www.github.com/bkzl/vue-fraction-grid.git
    Git Clone代码到本地:
    git clone http://www.github.com/bkzl/vue-fraction-grid
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/bkzl/vue-fraction-grid
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    vue-fraction-grid Build Status

    基于Flexbox的Vue.js 响应分数网格系统

    现场演示和完整的文档设计。

    <container>
     <gridvertical="middle" :rwd="{compact: 'stack'}">
     <grid-itemsize="1/6" :rwd="{compact: '0/1'}">
    . . .
     </grid-item>
     <grid-itemsize="3/6" :rwd="{compact: '1/1'}">
    . . .
     </grid-item>
     <grid-itemsize="2/6" :rwd="{compact: '1/1'}">
    . . .
     </grid-item>
     </grid>
    </container>

    安装

    使用 yarn 或者 npm 安装软件包:

    $ yarn add vue-fraction-grid# or$ npm install --save vue-fraction-grid

    全局

    通过调用 Vue.use() 加载插件:

    importVuefrom"vue";importVueFractionGridfrom"vue-fraction-grid";Vue.use(VueFractionGrid);

    现在你可以在模板中访问 <container><grid><grid-item> 组件。

    本地

    你可能更喜欢在模板中显式导入组件:

    <template>
     <container>
     <grid>
     <grid-itemsize="1/2">
    . . .
     </grid-item>
     <grid-itemsize="1/2">
    . . .
     </grid-item>
     </grid>
     </container>
    </template><script>importContainerfrom"vue-fraction-grid/components/Container";importGridfrom"vue-fraction-grid/components/Grid";importGridItemfrom"vue-fraction-grid/components/GridItem";exportdefault { components: { Container, Grid, GridItem }};</script>

    CDN

    从CDN加载脚本文件:

    <divid="root"></div>
    <scriptsrc="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
    <scriptsrc="//unpkg.com/vue-fraction-grid"></script>
    <script>newVue({ el:'#root', template:'<container>...</container>' })</script>

    设置

    Vue.use(VueFractionGrid, {
     container:"1020px",
     gutter:"24px",
     approach:"mobile-first",
     breakpoints: {
     compact:"320px 414px" }
    });

    通过将选项作为 Vue.use()的第二个参数来配置网格。 将配置合并到上面列出的默认值。

    可用设置:

    
    container - Default containers width. Works with any valid CSS values like: '1440px',
    
    
     '52em', '100vw' etc. Set it to '100%' to use full-width fluid grid. Because
    
    
     this is the maximum value, the grid will scale nicely for smaller viewports.
    
    
    gutter - Gutter width. Works with any valid CSS values like '30px', '1rem' etc.
    
    
    approach - 'mobile-first' or 'desktop-first'. Choose which approach of responsive web design
    
    
     do you prefer. Breakpoint rules are based on this option.
    
    
    breakpoints - List the grid breakpoints. Key is the breakpoint name for `:rwd` prop.
    
    
     Value is the size and can include one or two CSS values separated
    
    
     with a space.
    
    
    
    

    组件

    容器

    语法:

    <container [width="<length>|<percentage>"]>

    在容器中的站点中心内容:

    <container>
    . . .
    </container>

    使用 width prop替代容器宽度的最大值。 当你需要多种类型的容器 比如 规则和完整宽度时,这很有用。

    <containerwidth="100%">
    . . .
    </container>
    <containerwidth="25vw">
    . . .
    </container>

    网格

    语法:

    <grid [horizontal="left|center|right"vertical="top|middle|bottom"direction="reverse|stack|stack-reverse"wrap="nowrap|wrap|wrap-reverse" :rwd="{ breakpointName: direction }"flatpair]>

    网格的最常用用法和简单示例:

    <grid>
     <grid-itemsize="1/3">
    . . .
     </grid-item>
     <grid-itemsize="2/3">
    . . .
     </grid-item>
    </grid>

    不管你喜欢什么,gutter总是一样的。 不需要用容器包装嵌套网格。

    <grid>
     <grid-itemsize="2/3">
     <grid>
     <grid-itemsize="1/2">
    . . .
     </grid-item>
     <grid-itemsize="1/2">
    . . .
     </grid-item>
     </grid>
     </grid-item>
     <grid-itemsize="1/3">
    . . .
     </grid-item>
    </grid>

    网格项的水平对齐方式。 这将simillar转换为 justify-content 属性。

    <gridhorizontal="left">
    . . .
    </grid>
    <gridhorizontal="center">
    . . .
    </grid>
    <gridhorizontal="right">
    . . .
    </grid>
    <gridhorizontal="around">
    . . .
    </grid>
    <gridhorizontal="between">
    . . .
    </grid>

    网格项的垂直对齐方式。 这将simillar转换为 align-items 属性。

    <gridvertical="top">
    . . .
    </grid>
    <gridvertical="middle">
    . . .
    </grid>
    <gridvertical="bottom">
    . . .
    </grid>

    从网格项删除檐沟。

    <gridflat>
    . . .
    </grid>

    将第一个项的内容与左边的内容对齐,将第二个项的内容与右边对齐。

    <gridpair>
    . . .
    </grid>

    设置网格项的direction。 这将simillar转换为 flex-direction 属性。

    <griddirection="reverse">
    . . .
    </grid>
    <griddirection="stack">
    . . .
    </grid>
    <griddirection="stack-reverse">
    . . .
    </grid>

    设置网格项的环绕方式。 这将simillar转换为 flex-wrap 属性。

    <gridwrap="wrap">
    . . .
    </grid>
    <gridwrap="wrap-reverse">
    . . .
    </grid>

    混合道具,不管你想怎样。

    <gridhorizontal="right"vertical="bottom"direction="reverse"pair>
    . . .
    </grid>

    网格项

    语法:

    <grid-itemsize="<number>/<number>"|grow="<number>"|shrink="<number>" [:rwd="{ breakpointName: size }"]>

    使用分数格式写入的任意大小。 网格项应该直接嵌套在网格中。 项分数不一定要与 1求和。 分母不能等于 0.

    <grid-itemsize="123/456">
    . . .
    </grid-item>

    通过将网格项设置为 1/1,填充网格项:

    <grid-itemsize="1/1">
    . . .
    </grid-item>

    通过将网格项设置为 0/1 来隐藏网格项:

    <grid-itemsize="0/1">
    . . .
    </grid-item>

    使用 growshrink 道具而不是 size。 它们将simillar工作到 flex-growflex-shrink 属性。 从不混合大小,增长和收缩为单个项目

    <grid-itemgrow="2">
    . . .
    </grid-item>
    <grid-itemshrink="0.5">
    . . .
    </grid-item>

    实时响应设计

    响应式设计基于设置中的两个选项: approachbreakpoints

    如果使用单个值设置 mobile-first 断点,则将使用 min-width 属性响应媒体查询。 如果你使用 desktop-first,断点将响应 max-width

    具有两个值的断点响应 (min-width: <length>) and (max-width: <length>) 查询。

    以下配置:

    Vue.use(VueFractionGrid, {
     approach:"desktop-first",
     breakpoints: {
     compact:"415px",
     tablet:"416px 1100px" }
    });

    从CSS中转换为这里声明:

    @media (max-width: 415px) {
    . . .;} /* compact */@media (min-width: 416px) and (max-width: 1100px) {
    . . .;} /* tablet */

    API

    更改特定断点的网格的direction。

    <grid :rwd="{compact: 'reverse'}">
    . . .
    </grid>
    <griddirection="stack" :rwd="{compact: 'stack-reverse'}">
    . . .
    </grid>

    更改特定断点的网格项的大小。

    <grid-itemsize="3/4" :rwd="{compact: '0/1'}">
    . . .
    </grid-item>

    为网格和项目混合响应式设计道具。

    <grid :rwd="{compact: 'stack'}">
     <grid-itemsize="1/6" :rwd="{tablet: '0/1', compact: '1/1'}">
    . . .
     </grid-item>
     <grid-itemsize="1/2" :rwd="{tablet: '1/2', compact: '0/1'}">
    . . .
     </grid-item>
     <grid-itemsize="1/3" :rwd="{tablet: '1/2', compact: '1/1'}">
    . . .
     </grid-item>
    </grid>

    插件开发

    克隆存储库:

    $ git clone git@github.com:bkzl/vue-fraction-grid.git

    在主目录中使用 npm run/yarn run 从 package.json 运行脚本:

    
    demo - Start demo page with implementation of all examples
    
    
    test - Run tests using Jest
    
    
    lint - Lint JS and CSS code of components, utils and installation
    
    
    docs - Start docs locally
    
    
    deploy - Deploy docs to GitHub Pages
    
    
    dist - Create an optimized bundle in UMD format
    
    
    
    

    代码是GitHub上的开源 最新的更新更新在版本下可用。

    我欣赏任何关于潜在问题的评论。反馈和信息。 你遇到过 Bug 或者在文档中发现错误? 请你添加一个新问题。 谢谢!


    BASE  SYS  系统  GRID  FLEX  网格系统  
    相关文章