open-index/open-npm huggingface dataset:
npm package: @ophirai/langchain
Description: LangChain.js tool for Ophir agent negotiation — discover, negotiate, and transact with AI providers
Latest version: 0.1.0

# @ophirai/langchain

LangChain.js tool for the Ophir agent negotiation protocol. Lets any LangChain-powered agent discover, negotiate with, and transact with AI service providers automatically.

## Install

```bash
npm install @ophirai/langchain @langchain/core
```

## Usage

```typescript
import { createOphirTools } from "@ophirai/langchain";
import { ChatOpenAI } from "@langchain/openai";
import { AgentExecutor, createToolCallingAgent } from "langchain/agents";
import { ChatPromptTemplate } from "@langchain/core/prompts";

const tools = createOphirTools();

const llm = new ChatOpenAI({ model: "gpt-4" });
const prompt = ChatPromptTemplate.fromMessages([
  ["system", "You are a helpful assistant that can negotiate with AI providers."],
  ["human", "{input}"],
  ["placeholder", "{agent_scratchpad}"],
]);

const agent = createToolCallingAgent({ llm, tools, prompt });
const executor = new AgentExecutor({ agent, tools });

const result = await executor.invoke({
  input: "Find me the cheapest inference provider for llama-3-70b with p99 latency under 200ms",
});
```

## Custom Registry

```typescript
const tools = createOphirTools({ registryUrl: "https://my-registry.example.com/v1" });
```

## Exported Tool

- **`OphirNegotiateTool`** — A LangChain `StructuredTool` that negotiates with AI service providers. Accepts service category, model, budget, currency, SLA requirements, and registry URL. Returns a signed agreement with endpoint URL, pricing, and SLA terms.

## API

| Export | Description |
|---|---|
| `createOphirTools(config?)` | Returns an array of LangChain tools ready for use with any agent |
| `OphirNegotiateTool` | The tool class — use directly if you need more control |
| `OphirNegotiateInput` | TypeScript type for the tool's input schema |
npm package: @ophiuchus/badge
Description: ### 介绍
Author: songbug1024
Latest version: 1.0.1

# Badge 徽标

### 介绍

在右上角展示徽标数字或小红点。

### 引入

```js
import Vue from 'vue';
import Badge from '@ophiuchus/badge';

Vue.use(Badge);
```

## 代码演示

### 基础用法

设置 `content` 属性后，Badge 会在子元素的右上角显示对应的徽标，也可以通过 `dot` 来显示小红点。

```html
<sf-badge :content="5">
  <div class="child" />
</sf-badge>
<sf-badge :content="10">
  <div class="child" />
</sf-badge>
<sf-badge content="Hot">
  <div class="child" />
</sf-badge>
<sf-badge dot>
  <div class="child" />
</sf-badge>

<style>
  .child {
    width: 40px;
    height: 40px;
    background: #f2f3f5;
    border-radius: 4px;
  }
</style>
```

### 最大值

设置 `max` 属性后，当 `content` 的数值超过最大值时，会自动显示为 `{max}+`。

```html
<sf-badge :content="20" max="9">
  <div class="child" />
</sf-badge>
<sf-badge :content="50" max="20">
  <div class="child" />
</sf-badge>
<sf-badge :content="200" max="99">
  <div class="child" />
</sf-badge>
```

### 自定义颜色

通过 `color` 属性来设置徽标的颜色。

```html
<sf-badge :content="5" color="#1989fa">
  <div class="child" />
</sf-badge>
<sf-badge :content="10" color="#1989fa">
  <div class="child" />
</sf-badge>
<sf-badge dot color="#1989fa">
  <div class="child" />
</sf-badge>
```

### 自定义徽标内容

通过 `content` 插槽可以自定义徽标的内容，比如插入一个图标。

```html
<sf-badge>
  <div class="child" />
  <template #content>
    <sf-icon name="success" class="badge-icon" />
  </template>
</sf-badge>
<sf-badge>
  <div class="child" />
  <template #content>
    <sf-icon name="cross" class="badge-icon" />
  </template>
</sf-badge>
<sf-badge>
  <div class="child" />
  <template #content>
    <sf-icon name="ellipsis" class="badge-icon" />
  </template>
</sf-badge>
```

```css
.badge-icon {
  display: block;
  font-size: 10px;
  line-height: 16px;
}
```

### 独立展示

当 Badge 没有子元素时，会作为一个独立的元素进行展示。

```html
<sf-badge :content="20" />

<sf-badge :content="200" max="99" />
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| content | 徽标内容 | _number \| string_ | - |
| color | 徽标背景颜色 | _string_ | `#ee0a24` |
| dot | 是否展示为小红点 | _boolean_ | `false` |
| max | 最大值，超过最大值会显示 `{max}+`，仅当 content 为数字时有效 | _number \| string_ | - |

### Slots

| 名称    | 说明             |
| ------- | ---------------- |
| default | 徽标包裹的子元素 |
| content | 自定义徽标内容   |

### 样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/theme)。

| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| @badge-size | `16px` | - |
| @badge-color | `@white` | - |
| @badge-padding | `0 3px` | - |
| @badge-font-size | `@font-size-sm` | - |
| @badge-font-weight | `@font-weight-bold` | - |
| @badge-border-width | `@border-width-base` | - |
| @badge-background-color | `@red` | - |
| @badge-dot-color | `@red` | - |
| @badge-dot-size | `8px` | - |
| @badge-font-family | `-apple-system-font, Helvetica Neue, Arial, sans-serif` | - |
npm package: @ophiuchus/circle
Description: ### 介绍
Author: songbug1024
Latest version: 1.0.1

# Circle 环形进度条

### 介绍

圆环形的进度条组件，支持进度渐变动画。

### 引入

```js
import Vue from 'vue';
import Circle from '@ophiuchus/circle';

Vue.use(Circle);
```

## 代码演示

### 基础用法

`rate` 属性表示进度条的目标进度，`v-model` 表示动画过程中的实时进度。当 `rate` 发生变化时，`v-model` 会以 `speed` 的速度变化，直至达到 `rate` 设定的值。

```html
<sf-circle v-model="currentRate" :rate="30" :speed="100" :text="text" />
```

```js
export default {
  data() {
    return {
      currentRate: 0,
    };
  },
  computed: {
    text() {
      return this.currentRate.toFixed(0) + '%';
    },
  },
};
```

### 宽度定制

通过 `stroke-width` 属性来控制进度条宽度。

```html
<sf-circle
  v-model="currentRate"
  :rate="rate"
  :stroke-width="60"
  text="宽度定制"
/>
```

### 颜色定制

通过 `color` 属性来控制进度条颜色，`layer-color` 属性来控制轨道颜色。

```html
<sf-circle
  v-model="currentRate"
  :rate="rate"
  layer-color="#ebedf0"
  text="颜色定制"
/>
```

### 渐变色

`color` 属性支持传入对象格式来定义渐变色。

```html
<sf-circle
  v-model="currentRate"
  :rate="rate"
  :color="gradientColor"
  text="渐变色"
/>
```

```js
export default {
  data() {
    return {
      currentRate: 0,
      gradientColor: {
        '0%': '#3fecff',
        '100%': '#6149f6',
      },
    };
  },
};
```

### 逆时针方向

将 `clockwise` 设置为 `false`，进度会从逆时针方向开始。

```html
<sf-circle
  v-model="currentRate"
  :rate="rate"
  :clockwise="false"
  text="逆时针方向"
/>
```

### 大小定制

通过 `size` 属性设置圆环直径。

```html
<sf-circle v-model="currentRate" :rate="rate" :clockwise="false" size="120px" text="大小定制" />
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model | 当前进度 | _number_ | - |
| rate | 目标进度 | _number \| string_ | `100` |
| size | 圆环直径，默认单位为 `px` | _number \| string_ | `100px` |
| color | 进度条颜色，传入对象格式可以定义渐变色 | _string \| object_ | `#1989fa` |
| layer-color | 轨道颜色 | _string_ | `white` |
| fill | 填充颜色 | _string_ | `none` |
| speed | 动画速度（单位为 rate/s） | _number \| string_ | `0` |
| text | 文字 | _string_ | - |
| stroke-width | 进度条宽度 | _number \| string_ | `40` |
| stroke-linecap | 进度条端点的形状，可选值为`sqaure` `butt` | _string_ | `round` |
| clockwise | 是否顺时针增加 | _boolean_ | `true` |

### Slots

| 名称    | 说明           |
| ------- | -------------- |
| default | 自定义文字内容 |

### 样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/theme)。

| 名称                     | 默认值              | 描述 |
| ------------------------ | ------------------- | ---- |
| @circle-size             | `100px`             | -    |
| @circle-color            | `@blue`             | -    |
| @circle-layer-color      | `@white`            | -    |
| @circle-text-color       | `@text-color`       | -    |
| @circle-text-font-weight | `@font-weight-bold` | -    |
| @circle-text-font-size   | `@font-size-md`     | -    |
| @circle-text-line-height | `@line-height-md`   | -    |
npm package: @ophiuchus/divider
Description: ### 介绍
Author: songbug1024
Latest version: 1.0.1

# Divider 分割线

### 介绍

用于将内容分隔为多个区域。

### 引入

```js
import Vue from 'vue';
import Divider from '@ophiuchus/divider';

Vue.use(Divider);
```

## 代码演示

### 基础用法

默认渲染一条水平分割线。

```html
<sf-divider />
```

### 展示文字

通过插槽在可以分割线中间插入内容。

```html
<sf-divider>文字</sf-divider>
```

### 内容位置

通过 `content-position` 指定内容所在位置。

```html
<sf-divider content-position="left">文字</sf-divider>
<sf-divider content-position="right">文字</sf-divider>
```

### 虚线

添加 `dashed` 属性使分割线渲染为虚线。

```html
<sf-divider dashed>文字</sf-divider>
```

### 自定义样式

可以直接通过 `style` 属性设置分割线的样式。

```html
<sf-divider
  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
>
  文字
</sf-divider>
```

## API

### Props

| 参数             | 说明                             | 类型      | 默认值   |
| ---------------- | -------------------------------- | --------- | -------- |
| dashed           | 是否使用虚线                     | _boolean_ | `false`  |
| hairline         | 是否使用 0.5px 线                | _boolean_ | `true`   |
| content-position | 内容位置，可选值为`left` `right` | _string_  | `center` |

### Slots

| 名称    | 说明 |
| ------- | ---- |
| default | 内容 |

### 样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/theme)。

| 名称                         | 默认值          | 描述 |
| ---------------------------- | --------------- | ---- |
| @divider-margin              | `@padding-md 0` | -    |
| @divider-text-color          | `@gray-6`       | -    |
| @divider-font-size           | `@font-size-md` | -    |
| @divider-line-height         | `24px`          | -    |
| @divider-border-color        | `@border-color` | -    |
| @divider-content-padding     | `@padding-md`   | -    |
| @divider-content-left-width  | `10%`           | -    |
| @divider-content-right-width | `10%`           | -    |
npm package: @ophiuchus/empty
Description: ### 介绍
Author: songbug1024
Latest version: 1.0.1

# Empty 空状态

### 介绍

空状态时的占位提示。

### 引入

```js
import Vue from 'vue';
import Empty from '@ophiuchus/empty';

Vue.use(Empty);
```

## 代码演示

### 基础用法

```html
<sf-empty description="描述文字" />
```

### 图片类型

Empty 组件内置了多种占位图片类型，可以在不同业务场景下使用。

```html
<!-- 通用错误 -->
<sf-empty image="error" description="描述文字" />
<!-- 网络错误 -->
<sf-empty image="network" description="描述文字" />
<!-- 搜索提示 -->
<sf-empty image="search" description="描述文字" />
```

### 自定义图片

需要自定义图片时，可以在 image 属性中传入任意图片 URL。

```html
<sf-empty
  class="custom-image"
  image="https://img4.tuhu.org/OfRUe9mR6SL-NuijriKZSg_w200_h200.png"
  description="描述文字"
/>

<style>
  .custom-image .sf-empty__image {
    width: 90px;
    height: 90px;
  }
</style>
```

### 底部内容

通过默认插槽可以在 Empty 组件的下方插入内容。

```html
<sf-empty description="描述文字">
  <sf-button round type="danger" class="bottom-button">按钮</sf-button>
</sf-empty>

<style>
  .bottom-button {
    width: 160px;
    height: 40px;
  }
</style>
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| image | 图片类型，可选值为 `error` `network` `search`，支持传入图片 URL | _string_ | `default` |
| image-size | 图片大小，默认单位为 `px` | _number \| string_ | - |
| description | 图片下方的描述文字 | _string_ | - |

### Slots

| 名称        | 说明           |
| ----------- | -------------- |
| default     | 自定义底部内容 |
| image       | 自定义图标     |
| description | 自定义描述文字 |

### 样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/theme)。

| 名称                           | 默认值            | 描述 |
| ------------------------------ | ----------------- | ---- |
| @empty-padding                 | `@padding-xl 0`   | -    |
| @empty-image-size              | `160px`           | -    |
| @empty-description-margin-top  | `@padding-md`     | -    |
| @empty-description-padding     | `0 60px`          | -    |
| @empty-description-color       | `@gray-6`         | -    |
| @empty-description-font-size   | `@font-size-md`   | -    |
| @empty-description-line-height | `@line-height-md` | -    |
| @empty-bottom-margin-top       | `24px`            | -    |
npm package: @ophiuchus/icon
Description: ### 介绍
Author: songbug1024
Latest version: 1.0.2

# Icon 图标

### 介绍

基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 `icon` 属性引用。

### 引入

```js
import Vue from 'vue';
import Icon from "@ophiuchus/icon";

Vue.use(Icon);
```

## 代码演示

### 基础用法

`Icon` 的 `name` 属性支持传入图标名称或图片链接，所有可用的图标名称见右侧示例。

```html
<sf-icon name="like-o" />
<sf-icon name="https://img3.tuhu.org/3rq0A7JtvChtaD5QMO3HgA_w98_h78.png" />
```

### 徽标提示

设置 `dot` 属性后，会在图标右上角展示一个小红点；设置 `badge` 属性后，会在图标右上角展示相应的徽标。

```html
<sf-icon name="like-o" dot />
<sf-icon name="like-o" badge="9" />
<sf-icon name="like-o" badge="99+" />
```

### 图标颜色

`Icon` 的 `color` 属性用来设置图标的颜色。

```html
<sf-icon name="star-o" color="#1989fa" />
<sf-icon name="like-o" color="#ee0a24" />
```

### 图标大小

`Icon` 的 `size` 属性用来设置图标的尺寸大小，默认单位为 `px`。

```html
<sf-icon name="like-o" size="40" /> <sf-icon name="like-o" size="3rem" />
```

### 自定义图标

如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。

```css
/* 引入第三方或自定义的字体图标样式 */
@font-face {
  font-family: 'my-icon';
  src: url('./my-icon.ttf') format('truetype');
}

.my-icon {
  font-family: 'my-icon';
}

.my-icon-extra::before {
  content: '\e626';
}
```

```html
<!-- 通过 class-prefix 指定类名为 my-icon -->
<sf-icon class-prefix="my-icon" name="extra" />
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| name | 图标名称或图片链接 | _string_ | - |
| dot | 是否显示图标右上角小红点 | _boolean_ | `false` |
| badge | 图标右上角徽标的内容 | _number \| string_ | - |
| color | 图标颜色 | _string_ | `inherit` |
| size | 图标大小，如 `20px` `2em`，默认单位为`px` | _number \| string_ | `inherit` |
| class-prefix | 类名前缀，用于使用自定义图标 | _string_ | `sf-icon` |
| tag | HTML 标签 | _string_ | `i` |

### Events

| 事件名 | 说明           | 回调参数       |
| ------ | -------------- | -------------- |
| click  | 点击图标时触发 | _event: Event_ |
npm package: @ophiuchus/info
Description: ### 介绍
Author: songbug1024
Latest version: 1.0.1

# Info

### 介绍

右上角信息展示

### 引入

```js
import Vue from 'vue';
import Info from "@ophiuchus/info";

Vue.use(Icon);
```

## 代码演示

### 基础用法

`Info` 的 `info` 属性支持传入要展示的内容。

```html
<sf-info dot info="99+" />
```
### Props

| 参数 | 说明 | 类型 | 默认值 |
| dot | 是否显示图标右上角小红点 | _boolean_ | `false` |
| info | 图标右上角徽标的内容 | _number \| string_ | - |
npm package: @ophiuchus/layout
Description: ### 介绍
Author: songbug1024
Latest version: 1.0.1

# 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_ |
npm package: @ophiuchus/lazyload
Description: ### 引入
Author: songbug1024
Latest version: 1.0.1

# Lazyload 懒加载

### 引入

`Lazyload` 是 `Vue` 指令，使用前需要对指令进行注册。

```js
import Vue from 'vue';
import Lazyload from '@ophiuchus/lazyload';

Vue.use(Lazyload);

// 注册时可以配置额外的选项
Vue.use(Lazyload, {
  lazyComponent: true,
});
```

## 代码演示

### 基础用法

将 `v-lazy` 指令的值设置为你需要懒加载的图片。

```html
<img v-for="img in imageList" v-lazy="img" />
```

```js
export default {
  data() {
    return {
      imageList: [
        'https://img4.tuhu.org/JU_d6bTpbt6kxlAcmNKCew_w660_h520.jpeg',
        'https://img4.tuhu.org/4sVmt9tW6ZR89aBswsUhfA_w1600_h1295.jpeg',
      ],
    };
  },
};
```

### 背景图懒加载

和图片懒加载不同，背景图懒加载需要使用 `v-lazy:background-image`，值设置为背景图片的地址，需要注意的是必须声明容器高度。

```html
<div v-for="img in imageList" v-lazy:background-image="img" />
```

### 组件懒加载

将需要懒加载的组件放在 `lazy-component` 标签中，即可实现组件懒加载。

```js
// 注册时设置`lazyComponent`选项
Vue.use(Lazyload, {
  lazyComponent: true,
});
```

```html
<lazy-component>
  <img v-for="img in imageList" v-lazy="img" />
</lazy-component>
```

## API

### Options

| 参数          | 说明             | 类型       | 默认值     |
| ------------- | ---------------- | ---------- | ---------- |
| loading       | 加载时的图片     | _string_   | -          |
| error         | 错误时的图片     | _string_   | -          |
| preload       | 预加载高度的比例 | _string_   | -          |
| attempt       | 尝试次数         | _number_   | `3`        |
| listenEvents  | 监听的事件       | _string[]_ | `scroll`等 |
| adapter       | 适配器           | _object_   | -          |
| filter        | 图片 URL 过滤    | _object_   | -          |
| lazyComponent | 是否能懒加载模块 | _boolean_  | `false`    |

> 更多内容请参照：[vue-lazyload 官方文档](https://github.com/hilongjw/vue-lazyload)
npm package: @ophiuchus/loading
Description: ### 介绍
Author: songbug1024
Latest version: 1.0.1

# Loading 加载

### 介绍

加载图标，用于表示加载中的过渡状态。

### 引入

```js
import Vue from 'vue';
import Loading from '@ophiuchus/loading';

Vue.use(Loading);
```

## 代码演示

### 加载类型

通过 `type` 属性可以设置加载图标的类型，默认为 `circular`，可选值为 `spinner`。

```html
<sf-loading />

<sf-loading type="spinner" />
```

### 自定义颜色

通过 `color` 属性设置加载图标的颜色。

```html
<sf-loading color="#1989fa" />

<sf-loading type="spinner" color="#1989fa" />
```

### 自定义大小

通过 `size` 属性设置加载图标的大小，默认单位为 `px`。

```html
<sf-loading size="24" />

<sf-loading type="spinner" size="24px" />
```

### 加载文案

可以使用默认插槽在图标的右侧插入加载文案。

```html
<sf-loading size="24px">加载中...</sf-loading>
```

### 垂直排列

设置 `vertical` 属性后，图标和文案会垂直排列。

```html
<sf-loading size="24px" vertical>加载中...</sf-loading>
```

### 自定义文案颜色

通过 `color` 或者 `text-color` 属性设置加载文案的颜色。

```html
<!-- 可修改文案和加载图标的颜色 -->
<sf-loading color="#0094ff" />

<!-- 只修改文案颜色 -->
<sf-loading text-color="#0094ff" />
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| color | 颜色 | _string_ | `#c9c9c9` |
| type | 类型，可选值为 `spinner` | _string_ | `circular` |
| size | 加载图标大小，默认单位为 `px` | _number \| string_ | `30px` |
| text-size | 文字大小，默认单位为 `px` | _number \| string_ | `14px` |
| text-color | 文字颜色 | _string_ | `#c9c9c9` |
| vertical | 是否垂直排列图标和文字内容 | _boolean_ | `false` |

### Slots

| 名称    | 说明     |
| ------- | -------- |
| default | 加载文案 |

### 样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/theme)。

| 名称                                | 默认值          | 描述 |
| ----------------------------------- | --------------- | ---- |
| @loading-text-color                 | `@gray-6`       | -    |
| @loading-text-font-size             | `@font-size-md` | -    |
| @loading-spinner-color              | `@gray-5`       | -    |
| @loading-spinner-size               | `30px`          | -    |
| @loading-spinner-animation-duration | `0.8s`          | -    |
npm package: @ophiuchus/nav-bar
Description: ### 引入
Author: songbug1024
Latest version: 1.0.2

# NavBar 导航栏

### 引入

```js
import Vue from 'vue';
import NavBar from '@ophiuchus/nav-bar';

Vue.use(NavBar);
```

## 代码演示

### 基础用法

```html
<sf-nav-bar
  title="标题"
  left-text="返回"
  right-text="按钮"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>
```

```js
import Toast  from '@ophiuchus/toast';

export default {
  methods: {
    onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');
    },
  },
};
```

### 使用插槽

通过插槽自定义导航栏两侧的内容。

```html
<sf-nav-bar title="标题" left-text="返回" left-arrow>
  <template #right>
    <sf-icon name="search" size="18" />
  </template>
</sf-nav-bar>
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| title | 标题 | _string_ | `''` |
| left-text | 左侧文案 | _string_ | `''` |
| right-text | 右侧文案 | _string_ | `''` |
| left-arrow | 是否显示左侧箭头 | _boolean_ | `false` |
| border | 是否显示下边框 | _boolean_ | `true` |
| fixed | 是否固定在顶部 | _boolean_ | `false` |
| placeholder | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` |
| z-index | 导航栏 z-index | _number \| string_ | `1` |
| safe-area-inset-top | 是否开启[顶部安全区适配](#/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `false` |

### Slots

| 名称  | 说明               |
| ----- | ------------------ |
| title | 自定义标题         |
| left  | 自定义左侧区域内容 |
| right | 自定义右侧区域内容 |

### Events

| 事件名      | 说明               | 回调参数 |
| ----------- | ------------------ | -------- |
| click-left  | 点击左侧按钮时触发 | -        |
| click-right | 点击右侧按钮时触发 | -        |

### 样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/theme)。

| 名称                      | 默认值          | 描述 |
| ------------------------- | --------------- | ---- |
| @nav-bar-height           | `46px`          | -    |
| @nav-bar-background-color | `@white`        | -    |
| @nav-bar-arrow-size       | `16px`          | -    |
| @nav-bar-icon-color       | `@blue`         | -    |
| @nav-bar-text-color       | `@blue`         | -    |
| @nav-bar-title-font-size  | `@font-size-lg` | -    |
| @nav-bar-title-text-color | `@text-color`   | -    |
| @nav-bar-z-index          | `1`             | -    |
npm package: @ophiuchus/notify
Description: ### 介绍
Author: songbug1024
Latest version: 1.0.1

# Notify 消息提示

### 介绍

在页面顶部展示消息提示，支持函数调用和组件调用两种方式。

### 函数调用

Notify 是一个函数，调用后会直接在页面中弹出相应的消息提示。

```js
import Notify from '@ophiuchus/notify';

Notify('通知内容');
```

### 组件调用

通过组件调用 Notify 时，可以通过下面的方式进行注册：

```js
import Vue from 'vue';
import Notify from '@ophiuchus/notify';

// 全局注册
Vue.use(Notify);

// 局部注册
export default {
  components: {
    [Notify.Component.name]: Notify.Component,
  },
};
```

## 代码演示

### 基础用法

```js
Notify('通知内容');
```

### 通知类型

支持 `primary`、`success`、`warning`、`danger` 四种通知类型，默认为 `danger`。

```js
// 主要通知
Notify({ type: 'primary', message: '通知内容' });

// 成功通知
Notify({ type: 'success', message: '通知内容' });

// 危险通知
Notify({ type: 'danger', message: '通知内容' });

// 警告通知
Notify({ type: 'warning', message: '通知内容' });
```

### 自定义通知

自定义消息通知的颜色和展示时长。

```js
Notify({
  message: '自定义颜色',
  color: '#ad0000',
  background: '#ffe1e1',
});

Notify({
  message: '自定义时长',
  duration: 1000,
});
```

### 全局方法

引入 Notify 组件后，会自动在 Vue 的 prototype 上挂载 `$notify` 方法，便于在组件内调用。

```js
export default {
  mounted() {
    this.$notify('提示文案');
  },
};
```

### 组件调用

如果需要在 Notify 内嵌入组件或其他自定义内容，可以使用组件调用的方式。

```html
<sf-button type="primary" text="组件调用" @click="showNotify" />
<sf-notify v-model="show" type="success">
  <sf-icon name="bell" style="margin-right: 4px;" />
  <span>通知内容</span>
</sf-notify>
```

```js
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    showNotify() {
      this.show = true;
      setTimeout(() => {
        this.show = false;
      }, 2000);
    },
  },
};
```

## API

### 方法

| 方法名 | 说明 | 参数 | 返回值 |
| --- | --- | --- | --- |
| Notify | 展示提示 | `options | message` | notify 实例 |
| Notify.clear | 关闭提示 | - | `void` |
| Notify.setDefaultOptions | 修改默认配置，对所有 Notify 生效 | `options` | `void` |
| Notify.resetDefaultOptions | 重置默认配置，对所有 Notify 生效 | - | `void` |

### Options

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| type | 类型，可选值为 `primary` `success` `warning` | _string_ | `danger` |
| message | 展示文案，支持通过`\n`换行 | _string_ | - |
| duration | 展示时长(ms)，值为 0 时，notify 不会消失 | _number \| string_ | `3000` |
| color | 字体颜色 | _string_ | `white` |
| background | 背景颜色 | _string_ | - |
| className | 自定义类名 | _any_ | - |
| onClick | 点击时的回调函数 | _Function_ | - |
| onOpened | 完全展示后的回调函数 | _Function_ | - |
| onClose | 关闭时的回调函数 | _Function_ | - |

### 样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/theme)。

| 名称                             | 默认值                    | 描述 |
| -------------------------------- | ------------------------- | ---- |
| @notify-text-color               | `@white`                  | -    |
| @notify-padding                  | `@padding-xs @padding-md` | -    |
| @notify-font-size                | `@font-size-md`           | -    |
| @notify-line-height              | `@line-height-md`         | -    |
| @notify-primary-background-color | `@blue`                   | -    |
| @notify-success-background-color | `@green`                  | -    |
| @notify-danger-background-color  | `@red`                    | -    |
| @notify-warning-background-color | `@orange`                 | -    |
npm package: @ophiuchus/overlay
Description: ### 介绍
Author: songbug1024
Latest version: 1.0.1

# Overlay 遮罩层

### 介绍

创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。

### 引入

```js
import Vue from 'vue';
import Overlay from '@ophiuchus/overlay';

Vue.use(Overlay);
```

## 代码演示

### 基础用法

```html
<sf-button type="primary" text="显示遮罩层" @click="show = true" />
<sf-overlay :show="show" @click="show = false" />
```

```js
export default {
  data() {
    return {
      show: false
    }
  }
},
```

### 嵌入内容

通过默认插槽可以在遮罩层上嵌入任意内容。

```html
<sf-overlay :show="show" @click="show = false">
  <div class="wrapper" @click.stop>
    <div class="block" />
  </div>
</sf-overlay>

<style>
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }
</style>
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| show | 是否展示遮罩层 | _boolean_ | `false` |
| z-index | z-index 层级 | _number \| string_ | `1` |
| duration | 动画时长，单位秒 | _number \| string_ | `0.3` |
| class-name | 自定义类名 | _string_ | - |
| custom-style | 自定义样式 | _object_ | - |
| lock-scroll | 是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动 | _boolean_ | `true` |

### Events

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

### Slots

| 名称    | 说明                               |
| ------- | ---------------------------------- |
| default | 默认插槽，用于在遮罩层上方嵌入内容 |

### 样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/theme)。

| 名称                      | 默认值               | 描述 |
| ------------------------- | -------------------- | ---- |
| @overlay-z-index          | `1`                  | -    |
| @overlay-background-color | `rgba(0, 0, 0, 0.7)` | -    |
npm package: @ophiuchus/pagination
Description: ### 引入
Author: songbug1024
Latest version: 1.0.1

# Pagination 分页

### 引入

```js
import Vue from 'vue';
import Pagination from '@ophiuchus/pagination';

Vue.use(Pagination);
```

## 代码演示

### 基础用法

通过 `v-model` 来绑定当前页码。

```html
<sf-pagination v-model="currentPage" :total-items="24" :items-per-page="5" />
```

```js
export default {
  data() {
    return {
      currentPage: 1,
    };
  },
};
```

### 简单模式

 将 `mode` 设置为 `simple` 来切换到简单模式，此时分页器不会展示具体的页码按钮。

```html
<sf-pagination v-model="currentPage" :page-count="12" mode="simple" />
```

### 显示省略号

设置 `force-ellipses` 后会展示省略号按钮，点击后可以快速跳转。

```html
<sf-pagination
  v-model="currentPage"
  :total-items="125"
  :show-page-size="3"
  force-ellipses
/>
```

### 自定义按钮

通过 `prev-text`、`next-text` 等插槽来自定义分页按钮的内容。

```html
<sf-pagination v-model="currentPage" :total-items="50" :show-page-size="5">
  <template #prev-text>
    <sf-icon name="arrow-left" />
  </template>
  <template #next-text>
    <sf-icon name="arrow" />
  </template>
  <template #page="{ text }">{ { text } }</template>
</sf-pagination>
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model | 当前页码 | _number_ | - |
| mode | 显示模式，可选值为 `simple` | _string_ | `multi` |
| prev-text | 上一页按钮文字 | _string_ | `上一页` |
| next-text | 下一页按钮文字 | _string_ | `下一页` |
| page-count | 总页数 | _number \| string_ | 根据页数计算 |
| total-items | 总记录数 | _number \| string_ | `0` |
| items-per-page | 每页记录数 | _number \| string_ | `10` |
| show-page-size | 显示的页码个数 | _number \| string_ | `5` |
| force-ellipses | 是否显示省略号 | _boolean_ | `false` |

### Events

| 事件名 | 说明           | 回调参数 |
| ------ | -------------- | -------- |
| change | 页码改变时触发 | -        |

### Slots

| 名称 | 描述 | 参数 |
| --- | --- | --- |
| page | 自定义页码 | _{ number: number, text: string, active: boolean }_ |
| prev-text | 自定义上一页按钮文字 | `-` |
| next-text | 自定义下一页按钮文字 | `-` |

### 样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/theme)。

| 名称                                       | 默认值              | 描述 |
| ------------------------------------------ | ------------------- | ---- |
| @pagination-height                         | `40px`              | -    |
| @pagination-font-size                      | `@font-size-md`     | -    |
| @pagination-item-width                     | `36px`              | -    |
| @pagination-item-default-color             | `@blue`             | -    |
| @pagination-item-disabled-color            | `@gray-7`           | -    |
| @pagination-item-disabled-background-color | `@background-color` | -    |
| @pagination-background-color               | `@white`            | -    |
| @pagination-desc-color                     | `@gray-7`           | -    |
| @pagination-disabled-opacity               | `@disabled-opacity` | -    |
npm package: @ophiuchus/progress
Description: ### 介绍
Author: songbug1024
Latest version: 1.0.1

# Progress 进度条

### 介绍

用于展示操作的当前进度。

### 引入

```js
import Vue from 'vue';
import Progress from '@ophiuchus/progress';

Vue.use(Progress);
```

## 代码演示

### 基础用法

进度条默认为蓝色，使用 `percentage` 属性来设置当前进度。

```html
<sf-progress :percentage="50" />
```

### 线条粗细

通过 `stroke-width` 可以设置进度条的粗细。

```html
<sf-progress :percentage="50" stroke-width="8" />
```

### 置灰

设置 `inactive` 属性后进度条将置灰。

```html
<sf-progress inactive :percentage="50" />
```

### 样式定制

可以使用 `pivot-text` 属性自定义文字，`color` 属性自定义进度条颜色。

```html
<sf-progress pivot-text="橙色" color="#f2826a" :percentage="25" />
<sf-progress pivot-text="红色" color="#ee0a24" :percentage="50" />
<sf-progress
  :percentage="75"
  pivot-text="紫色"
  pivot-color="#7232dd"
  color="linear-gradient(to right, #be99ff, #7232dd)"
/>
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| percentage | 进度百分比 | _number \| string_ | `0` |
| stroke-width | 进度条粗细，默认单位为`px` | _number \| string_ | `4px` |
| color | 进度条颜色 | _string_ | `#1989fa` |
| track-color | 轨道颜色 | _string_ | `#e5e5e5` |
| pivot-text | 进度文字内容 | _string_ | 百分比 |
| pivot-color | 进度文字背景色 | _string_ | 同进度条颜色 |
| text-color | 进度文字颜色 | _string_ | `white` |
| inactive | 是否置灰 | _boolean_ | `false` |
| show-pivot | 是否显示进度文字 | _boolean_ | `true` |

### 方法

通过 ref 可以获取到 Progress 实例并调用实例方法，详见[组件实例方法](#/advanced-usage#zu-jian-shi-li-fang-fa)。

| 方法名 | 说明                                         | 参数 | 返回值 |
| ------ | -------------------------------------------- | ---- | ------ |
| resize | 外层元素大小变化后，可以调用此方法来触发重绘 | -    | -      |

### 样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/theme)。

| 名称                             | 默认值          | 描述 |
| -------------------------------- | --------------- | ---- |
| @progress-height                 | `4px`           | -    |
| @progress-color                  | `@blue`         | -    |
| @progress-background-color       | `@gray-3`       | -    |
| @progress-pivot-padding          | `0 5px`         | -    |
| @progress-pivot-text-color       | `@white`        | -    |
| @progress-pivot-font-size        | `@font-size-xs` | -    |
| @progress-pivot-line-height      | `1.6`           | -    |
| @progress-pivot-background-color | `@blue`         | -    |

## 常见问题

### 组件从隐藏状态切换到显示状态时，渲染不正确？

Progress 组件在挂载时，会获取自身的宽度，并计算出进度条的样式。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法展示正确的进度。

#### 解决方法

方法一，如果是使用 `v-show` 来控制组件展示的，则替换为 `v-if` 即可解决此问题：

```html
<!-- Before -->
<sf-progress v-show="show" />
<!-- After -->
<sf-progress v-if="show" />
```

方法二，调用组件的 resize 方法来主动触发重绘：

```html
<sf-progress v-show="show" ref="progress" />
```

```js
this.$refs.progress.resize();
```
npm package: @ophiuchus/rate
Description: ### 介绍
Author: songbug1024
Latest version: 1.0.1

# Rate 评分

### 介绍

用于对事物进行评级操作。

### 引入

```js
import Vue from 'vue';
import Rate from '@ophiuchus/rate';

Vue.use(Rate);
```

## 代码演示

### 基础用法

```html
<sf-rate v-model="value" />
```

```js
export default {
  data() {
    return {
      value: 3,
    };
  },
};
```

### 自定义图标

```html
<sf-rate v-model="value" icon="like" void-icon="like-o" />
```

### 自定义样式

```html
<sf-rate
  v-model="value"
  :size="25"
  color="#ffd21e"
  void-icon="star"
  void-color="#eee"
/>
```

### 半星

```html
<sf-rate v-model="value" allow-half void-icon="star" void-color="#eee" />
```

```js
export default {
  data() {
    return {
      value: 2.5,
    };
  },
};
```

### 自定义数量

```html
<sf-rate v-model="value" :count="6" />
```

### 禁用状态

```html
<sf-rate v-model="value" disabled />
```

### 只读状态

```html
<sf-rate v-model="value" readonly />
```

### 监听 change 事件

```html
<sf-rate v-model="value" @change="onChange" />
```

```javascript
export default {
  method: {
    onChange(value) {
      Toast('当前值：' + value);
    },
  },
};
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model | 当前分值 | _number_ | - |
| count | 图标总数 | _number \| string_ | `5` |
| size | 图标大小，默认单位为`px` | _number \| string_ | `20px` |
| gutter | 图标间距，默认单位为`px` | _number \| string_ | `4px` |
| color | 选中时的颜色 | _string_ | `#ee0a24` |
| void-color | 未选中时的颜色 | _string_ | `#c8c9cc` |
| disabled-color | 禁用时的颜色 | _string_ | `#c8c9cc` |
| icon | 选中时的[图标名称](#/icon)或图片链接 | _string_ | `star` |
| void-icon | 未选中时的[图标名称](#/icon)或图片链接 | _string_ | `star-o` |
| icon-prefix | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/icon#props) | _string_ | `sf-icon` |
| allow-half | 是否允许半选 | _boolean_ | `false` |
| readonly | 是否为只读状态  | _boolean_ | `false` |
| disabled | 是否禁用评分 | _boolean_ | `false` |
| touchable | 是否可以通过滑动手势选择评分 | _boolean_ | `true` |

### Events

| 事件名 | 说明                     | 回调参数 |
| ------ | ------------------------ | -------- |
| change | 当前分值变化时触发的事件 | 当前分值 |

### 样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/theme)。

| 名称                      | 默认值          | 描述 |
| ------------------------- | --------------- | ---- |
| @rate-icon-size           | `20px`          | -    |
| @rate-icon-gutter         | `@padding-base` | -    |
| @rate-icon-void-color     | `@gray-5`       | -    |
| @rate-icon-full-color     | `@red`          | -    |
| @rate-icon-disabled-color | `@gray-5`       | -    |
npm package: @ophiuchus/skeleton
Description: ### 介绍
Author: songbug1024
Latest version: 1.0.1

# Skeleton 骨架屏

### 介绍

用于在内容加载过程中展示一组占位图形。

### 引入

```js
import Vue from 'vue';
import Skeleton from '@ophiuchus/skeleton';

Vue.use(Skeleton);
```

## 代码演示

### 基础用法

通过 `title` 属性显示标题占位图，通过 `row` 属性配置占位段落行数。

```html
<sf-skeleton title :row="3" />
```

### 显示头像

通过 `avatar` 属性显示头像占位图。

```html
<sf-skeleton title avatar :row="3" />
```

### 展示子组件

将 `loading` 属性设置成 `false` 表示内容加载完成，此时会隐藏占位图，并显示 `Skeleton` 的子组件。

```html
<sf-skeleton title avatar :row="3" :loading="loading">
  <div>实际内容</div>
</sf-skeleton>
```

```js
export default {
  data() {
    return {
      loading: true,
    };
  },
  mounted() {
    this.loading = false;
  },
};
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| row | 段落占位图行数 | _number \| string_ | `0` |
| row-width | 段落占位图宽度，可传数组来设置每一行的宽度 | _number \| string \|<br>(number \| string)[]_ | `100%` |
| title | 是否显示标题占位图 | _boolean_ | `false` |
| avatar | 是否显示头像占位图 | _boolean_ | `false` |
| loading | 是否显示骨架屏，传 `false` 时会展示子组件内容 | _boolean_ | `true` |
| animate | 是否开启动画 | _boolean_ | `true` |
| round | 是否将标题和段落显示为圆角风格 | _boolean_ | `false` |
| title-width | 标题占位图宽度 | _number \| string_ | `40%` |
| avatar-size | 头像占位图大小 | _number \| string_ | `32px` |
| avatar-shape | 头像占位图形状，可选值为`square` | _string_ | `round` |

### 样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/theme)。

| 名称                              | 默认值          | 描述 |
| --------------------------------- | --------------- | ---- |
| @skeleton-row-height              | `16px`          | -    |
| @skeleton-row-background-color    | `@active-color` | -    |
| @skeleton-row-margin-top          | `@padding-sm`   | -    |
| @skeleton-title-width             | `40%`           | -    |
| @skeleton-avatar-size             | `32px`          | -    |
| @skeleton-avatar-background-color | `@active-color` | -    |
| @skeleton-animation-duration      | `1.2s`          | -    |
npm package: @ophiuchus/steps
Description: ### 介绍
Author: songbug1024
Latest version: 1.0.1

# Steps 步骤条

### 介绍

用于展示操作流程的各个环节，让用户了解当前的操作在整体流程中的位置。

### 引入

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

Vue.use(Steps);

// 方式2
import Vue from 'vue';
import { Step, Steps } from '@ophiuchus/collapse';

Vue.component(Step.name, Step);
Vue.component(Steps.name, Steps);
```

## 代码演示

### 基础用法

`active` 属性表示当前步骤的索引，从 0 起计。

```html
<sf-steps :active="active">
  <sf-step>买家下单</sf-step>
  <sf-step>商家接单</sf-step>
  <sf-step>买家提货</sf-step>
  <sf-step>交易完成</sf-step>
</sf-steps>
```

```js
export default {
  data() {
    return {
      active: 1,
    };
  },
};
```

### 自定义样式

可以通过 `active-icon` 和 `active-color` 属性设置激活状态下的图标和颜色。

```html
<sf-steps :active="active" active-icon="success" active-color="#38f">
  <sf-step>买家下单</sf-step>
  <sf-step>商家接单</sf-step>
  <sf-step>买家提货</sf-step>
  <sf-step>交易完成</sf-step>
</sf-steps>
```

### 竖向步骤条

可以通过设置 `direction` 属性来改变步骤条的显示方向。

```html
<sf-steps direction="vertical" :active="0">
  <sf-step>
    <h3>【城市】物流状态1</h3>
    <p>2016-07-12 12:40</p>
  </sf-step>
  <sf-step>
    <h3>【城市】物流状态2</h3>
    <p>2016-07-11 10:00</p>
  </sf-step>
  <sf-step>
    <h3>快件已发货</h3>
    <p>2016-07-10 09:30</p>
  </sf-step>
</sf-steps>
```

## API

### Steps Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| active | 当前步骤 | _number \| string_ | `0` |
| direction | 显示方向，可选值为 `vertical` | _string_ | `horizontal` |
| active-color | 激活状态颜色 | _string_ | `#07c160` |
| inactive-color | 未激活状态颜色 | _string_ | `#969799` |
| active-icon | 激活状态底部图标，可选值见 [Icon 组件](#/icon) | _string_ | `checked` |
| inactive-icon | 未激活状态底部图标，可选值见 [Icon 组件](#/icon) | _string_ | - |
| finish-icon | 已完成步骤对应的底部图标，优先级高于 `inactive-icon`，可选值见 [Icon 组件](#/icon) | _string_ | - |
| icon-prefix | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/icon#props) | _string_ | `sf-icon` |

### Step Slots

| 名称 | 说明 |
| --- | --- |
| active-icon | 自定义激活状态图标 |
| inactive-icon | 自定义未激活状态图标 |
| finish-icon | 自定义已完成步骤对应的底部图标，优先级高于 `inactive-icon` |

### Steps Events

| 事件名              | 说明                       | 回调参数        |
| ------------------- | -------------------------- | --------------- |
| click-step | 点击步骤的标题或图标时触发 | _index: number_ |

### 样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/theme)。

| 名称                             | 默认值          | 描述 |
| -------------------------------- | --------------- | ---- |
| @step-text-color                 | `@gray-6`       | -    |
| @step-active-color               | `@green`        | -    |
| @step-process-text-color         | `@text-color`   | -    |
| @step-font-size                  | `@font-size-md` | -    |
| @step-line-color                 | `@border-color` | -    |
| @step-finish-line-color          | `@green`        | -    |
| @step-finish-text-color          | `@text-color`   | -    |
| @step-icon-size                  | `12px`          | -    |
| @step-circle-size                | `5px`           | -    |
| @step-circle-color               | `@gray-6`       | -    |
| @step-horizontal-title-font-size | `@font-size-sm` | -    |
| @steps-background-color          | `@white`        | -    |
npm package: @ophiuchus/sticky
Description: ### 介绍
Author: songbug1024
Latest version: 1.0.1

# Sticky 粘性布局

### 介绍

Sticky 组件与 CSS 中`position: sticky`属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。

### 引入

```js
import Vue from 'vue';
import Sticky from '@ophiuchus/sticky';

Vue.use(Sticky);
```

## 代码演示

### 基础用法

将内容包裹在 `Sticky` 组件内即可。

```html
<sf-sticky>
  <sf-button type="primary">基础用法</sf-button>
</sf-sticky>
```

### 吸顶距离

通过 `offset-top` 属性可以设置组件在吸顶时与顶部的距离。

```html
<sf-sticky :offset-top="50">
  <sf-button type="info">吸顶距离</sf-button>
</sf-sticky>
```

### 指定容器

通过 `container` 属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会固定在容器的底部。

```html
<div ref="container" style="height: 150px;">
  <sf-sticky :container="container">
    <sf-button type="warning">指定容器</sf-button>
  </sf-sticky>
</div>
```

```js
export default {
  data() {
    return {
      container: null,
    };
  },
  mounted() {
    this.container = this.$refs.container;
  },
};
```

## API

### Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| offset-top | 吸顶时与顶部的距离，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `0` |
| z-index | 吸顶时的 z-index | _number \| string_ | `99` |
| container | 容器对应的 HTML 节点 | _Element_ | - |

### Events

| 事件名 | 说明 | 回调参数 |
| --- | --- | --- |
| change | 当吸顶状态改变时触发 | _isFixed: boolean_ |
| scroll | 滚动时触发 | _{ scrollTop: number, isFixed: boolean }_ |

### 样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/theme)。

| 名称            | 默认值 | 描述 |
| --------------- | ------ | ---- |
| @sticky-z-index | `99`   | -    |