vue 网格组件_轻量级的功能网格组件集

vue 网格组件

Vue网格风格 (vue-grid-styled)

A lightweight set of functional grid components, ported from React's grid-styled.

轻量级的功能性网格组件集，从React的网格样式移植而来。

Vue.js port of @jxnblk's React library, grid-styled. Lightweight set of functional components.

@jxnblk的React库的Vue.js端口(网格样式)。 轻巧的功能组件集。

View demo 查看演示 Download Source 下载源

安装 (Installation)

yarn add vue-grid-styled

默认主题 (Default Theme)

// Breakpoints
const breakpoints = ["40em", "52em", "64em"];
// @media screen and (min-width: 40em)
// @media screen and (min-width: 52em)
// @media screen and (min-width: 64em)

// Typographic Scale (numbers are converted to px values)
const fontSizes = [12, 14, 16, 20, 24, 32, 48, 64, 72];

// Spacing Scale (used for margin and padding)
const space = [0, 4, 8, 16, 32, 64, 128, 256, 512];

导入并安装 (Import & Install)

import VueGridStyled from "vue-grid-styled";
// OR
import { Box, Flex } from "vue-grid-styled";

// OPTIONAL: Pass a custom theme
const theme = {
  colors: {
    red: "#F22613"
  }
};

Vue.use(VueGridStyled, { theme });
// OR
Vue.component("v-box", Box);
Vue.component("v-flex", Flex);

组件用法 (Component Usage)

vue-grid-styled tries to emulate the grid-styled API as closely as possible. Check it out for comprehensive documentation.

vue-grid-styled尝试尽可能接近地模仿网格样式的API 。 查阅完整的文档。

One exception is that the <v-box> component exposes a tag prop that you can use to programatically assign a HTML tag (e.g., "div", "section").

一个例外是<v-box>组件公开了一个tag属性，可用于以编程方式分配HTML标签(例如，“ div”，“ section”)。

In a nutshell, replace the JSX syntax with Vue "binding" syntax and you should be good to go! Here are a few clarifying examples.

简而言之，用Vue“ binding”语法替换JSX语法，您应该一切顺利！ 这是一些澄清的例子。

例子 (Examples)

// Grid-Styled JSX: Pixel Width
<Box width={256} />

<!-- VUE: Pixel Width -->
<v-box :width="256" tag="section" />

// JSX: Responsive Widths
<Box width={[1 / 2, 1 / 3, 1 / 4, 1 / 6]} />

<!-- VUE: Responsive widths -->
<v-box
  tag="main"
  :width="[
    1/2,
    1/3,
    1/4,
    1/6
  ]"
/>

<!-- Altogther now! -->
<v-flex flexWrap="wrap" maxWidth="960px" mx="auto">
  <v-box :width="[1, 1/2]" :px="[0, 1]" :mb="2">
    <v-box bg="aliceblue" :py="4"/>
  </v-box>
  <v-box :width="[1, 1/2]" :px="[0, 1]" :mb="2">
    <v-box bg="aliceblue" :py="4"/>
  </v-box>
</v-flex>

翻译自: https://vuejsexamples.com/a-lightweight-set-of-functional-grid-components/

vue 网格组件