# asi-section

> 🌟 一个用于文章、列表详情等标题展示的标题栏组件 🌟

Latest version **1.0.4** (published 2023-07-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install asi-section
pnpm add asi-section
yarn add asi-section
bun add asi-section
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2023-07-09 |
| First published | 2023-07-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 74.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | y |
| Maintainers | jasonye1998 |
| Keywords | asi-section |

## Links

- npm: https://www.npmjs.com/package/asi-section
- npm.io page: https://npm.io/package/asi-section

## Recent versions

- 1.0.4 (latest) — 2023-07-09
- 1.0.3 — 2023-07-09
- 1.0.2 — 2023-07-09
- 1.0.1 — 2023-07-09
- 1.0.0 — 2023-07-09

## README

# Asi-section Component

🌟 一个用于文章、列表详情等标题展示的标题栏组件 🌟

[![npm version](https://img.shields.io/npm/v/asi-section.svg)](https://www.npmjs.com/package/asi-section)
[![License](https://img.shields.io/npm/l/asi-section.svg)](https://www.npmjs.com/package/asi-section)

## 安装

使用npm/pnpm/yarn安装asi-section组件:

```shell
pnpm install asi-section -S
```

## 注册
```
在src/main.js

import asiSection from "asi-section";
app.use(asiSection);
import 'asi-section/asi-section.css';
```

## 基本用法

```
<asi-section title="基础用法" sub-title="副标题"></asi-section>

<asi-section title="竖线装饰" sub-title="副标题" type="line"></asi-section>

<asi-section title="装饰器插槽" sub-title="副标题">
  <template v-slot:decoration>
    <div class="decoration"></div>
  </template>
</asi-section>

<asi-section title="默认插槽" sub-title="副标题">默认插槽内容</asi-section>

<asi-section title="主标题">
  <template v-slot:right>
    right slot
  </template>
</asi-section>
```

 ## 属性
 ### Section Props

| 属性名               | 类型     | 默认值 | 说明                                   |
|:--------------------:|:--------:|:------:|---------------------------------------|
|        type          |  String  |   -    | 装饰类型，可选值：line（竖线）、circle（圆形）、square（方形） |
|        title         |  String  |   -    | 主标题                                   |
|    titleFontSize     |  String  | 14px  | 主标题字体大小                          |
|     titleColor       |  String  | #333  | 主标题字体颜色                          |
|     bgColor       |  String  | #2979ff  | 装饰器背景颜色                          |
|      subTitle        |  String  |   -    | 副标题                                    |
|  subTitleFontSize    |  String  | 12px  | 副标题字体大小                          |
|   subTitleColor      |  String  | #999  | 副标题字体颜色                          |
|     padding          |Bolean/String| false | 默认插槽容器的 padding 值，传入类型为 Boolean 时，设置为 10px 或 0 |

 ## 方法
 ### Section Events

 |    事件名    |     事件说明     |   返回参数   |
|:------------:|:----------------:|:-----------:|
|    @click    | 点击 Section 触发事件 |      -      |

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