# @ophiuchus/layout

> ### 介绍

Latest version **1.0.1** (published 2021-09-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ophiuchus/layout
pnpm add @ophiuchus/layout
yarn add @ophiuchus/layout
bun add @ophiuchus/layout
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-09-26 |
| First published | 2021-08-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | songbug1024 |
| Maintainers | songbug1024 |
| Keywords | ui, vue, frontend, component, ophiuchus, vant, vite |

## Links

- npm: https://www.npmjs.com/package/@ophiuchus/layout
- Homepage: https://github.com/songbug1024/ophiuchus
- Issues: https://github.com/songbug1024/ophiuchus/issues
- npm.io page: https://npm.io/package/@ophiuchus/layout

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 1.0.1 (latest) — 2021-09-26
- 1.0.0 — 2021-08-29

## README

# Layout 布局

### 介绍

Layout 提供了 `sf-row` 和 `sf-col` 两个组件来进行行列布局。

### 引入

```js
// 方式1（推荐）
import Vue from 'vue';
import Layout from '@ophiuchus/layout';

Vue.use(Layout);

// 方式2
import Vue from 'vue';
import { Col, Row } from '@ophiuchus/layout';

Vue.component(Col.name, Col);
Vue.component(Row.name, Row);
```

## 代码演示

### 基础用法

Layout 组件提供了 `24列栅格`，通过在 `Col` 上添加 `span` 属性设置列所占的宽度百分比。此外，添加 `offset` 属性可以设置列的偏移宽度，计算方式与 span 相同。

```html
<sf-row>
  <sf-col span="8">span: 8</sf-col>
  <sf-col span="8">span: 8</sf-col>
  <sf-col span="8">span: 8</sf-col>
</sf-row>

<sf-row>
  <sf-col span="4">span: 4</sf-col>
  <sf-col span="10" offset="4">offset: 4, span: 10</sf-col>
</sf-row>

<sf-row>
  <sf-col offset="12" span="12">offset: 12, span: 12</sf-col>
</sf-row>
```

### 设置列元素间距

通过 `gutter` 属性可以设置列元素之间的间距，默认间距为 0。

```html
<sf-row gutter="20">
  <sf-col span="8">span: 8</sf-col>
  <sf-col span="8">span: 8</sf-col>
  <sf-col span="8">span: 8</sf-col>
</sf-row>
```

### Flex 布局

将 `type` 属性设置为 flex 可以启用 flex 布局，便于进行灵活的对齐。

```html
<!-- 左对齐 -->
<sf-row type="flex">
  <sf-col span="6">span: 6</sf-col>
  <sf-col span="6">span: 6</sf-col>
  <sf-col span="6">span: 6</sf-col>
</sf-row>

<!-- 居中 -->
<sf-row type="flex" justify="center">
  <sf-col span="6">span: 6</sf-col>
  <sf-col span="6">span: 6</sf-col>
  <sf-col span="6">span: 6</sf-col>
</sf-row>

<!-- 右对齐 -->
<sf-row type="flex" justify="end">
  <sf-col span="6">span: 6</sf-col>
  <sf-col span="6">span: 6</sf-col>
  <sf-col span="6">span: 6</sf-col>
</sf-row>

<!-- 两端对齐 -->
<sf-row type="flex" justify="space-between">
  <sf-col span="6">span: 6</sf-col>
  <sf-col span="6">span: 6</sf-col>
  <sf-col span="6">span: 6</sf-col>
</sf-row>

<!-- 每个元素的两侧间隔相等 -->
<sf-row type="flex" justify="space-around">
  <sf-col span="6">span: 6</sf-col>
  <sf-col span="6">span: 6</sf-col>
  <sf-col span="6">span: 6</sf-col>
</sf-row>
```

## API

### Row Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| type | 布局方式，可选值为`flex` | _string_ | - |
| gutter | 列元素之间的间距（单位为 px） | _number \| string_ | - |
| tag | 自定义元素标签 | _string_ | `div` |
| justify | Flex 主轴对齐方式，可选值为 `end` `center` <br> `space-around` `space-between` | _string_ | `start` |
| align | Flex 交叉轴对齐方式，可选值为 `center` `bottom` | _string_ | `top` |

### Col Props

| 参数   | 说明           | 类型               | 默认值 |
| ------ | -------------- | ------------------ | ------ |
| span   | 列元素宽度     | _number \| string_ | -      |
| offset | 列元素偏移距离 | _number \| string_ | -      |
| tag    | 自定义元素标签 | _string_           | `div`  |

### Row Events

| 事件名 | 说明       | 回调参数       |
| ------ | ---------- | -------------- |
| click  | 点击时触发 | _event: Event_ |

### Col Events

| 事件名 | 说明       | 回调参数       |
| ------ | ---------- | -------------- |
| click  | 点击时触发 | _event: Event_ |

---
_Source: https://npm.io/package/@ophiuchus/layout · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._