# @tys/vue-materials

> vue2 and vue3 components material

Latest version **0.0.6** (published 2023-08-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @tys/vue-materials
pnpm add @tys/vue-materials
yarn add @tys/vue-materials
bun add @tys/vue-materials
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2023-08-03 |
| First published | 2023-05-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 88.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Tyson |
| Maintainers | tys |

## Links

- npm: https://www.npmjs.com/package/@tys/vue-materials
- npm.io page: https://npm.io/package/@tys/vue-materials

## Dependencies (2)

- [colord](https://npm.io/package/colord.md) 2.9.3
- [vue-demi](https://npm.io/package/vue-demi.md) 0.14.5

## Recent versions

- 0.0.6 (latest) — 2023-08-03
- 0.0.5 — 2023-06-29
- 0.0.4 — 2023-06-01
- 0.0.3 — 2023-05-31
- 0.0.2 — 2023-05-12
- 0.0.1 — 2023-05-11

## README

# @tys/vue-metarials

Vue 组件物料

## 安装

```bash
npm install @tys/vue-materials
yarn install @tys/vue-materials
pnpm install @tys/vue-materials
```

## 使用

```vue
<script setup lang="ts">
import { AdminLayout, AdminTab } from "@tys/vue-materials";
import "@tys/vue-materials/dist/style.css";
</script>

<template>
  <AdminLayout></AdminLayout>
  <AdminTab></AdminTab>
</template>
```

## AdminLayout

后台管理系统的布局组件

[预览地址]()

- 支持垂直(vertical)和水平(horizontal)两种布局模式
- 布局由头部 Header、页签 Tab、侧边栏 Sider、主体内容 Content 和底部 Footer 组成，除了主体内容 Content，其余都可以控制是否渲染
- 支持两种滚动模式：容器滚动(wrapper)和主体内容滚动(content)
- 支持主体内容 Content 全屏

### Api 用法

#### 属性

| 字段                      | 说明                                                                     | 类型                      | 默认值               |
| ------------------------- | ------------------------------------------------------------------------ | ------------------------- | -------------------- |
| mode                      | 布局模式                                                                 | [LayoutMode](#LayoutMode) | "vertical"           |
| scrollMode                | 滚动模式                                                                 | [ScrollMode](#ScrollMode) | "vertical"           |
| [scrollElId](#scrollElId) | 滚动元素的 ID, 可用于获取对应的 Dom，使其滚动                            | string                    | "**SCROLL_EL_ID**"   |
| commonClass               | 组件的通用样式类名，可控制容器、头部、页签、侧边栏、主体和底部的公共样式 | string                    | "transition-all-300" |
| fixedTop                  | 固定上面的头部和 Tab 页签部分                                            | boolean                   | true                 |
|                           |                                                                          |                           |                      |

### 说明

#### LayoutMode

```ts
/**
 * 布局模式
 * - horizontal 水平
 * - vertical 垂直
 */
type LayoutMode = "horizontal" | "vertical";
```

#### ScrollMode

```ts
/**
 * 内容溢出时的出现滚动条的方式
 * - wrapper 布局组件最外层的元素出现滚动条
 * - content 主体内容组件出现滚动条
 * @default 默认 wrapper
 */
type ScrollMode = "wrapper" | "content";
```

#### scrollElId

使用导出的默认 ID

```ts
import { SCROLL_EL_ID } from "@tys/vue-materials";
```

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