vuepress-plugin-hero-pattern
v0.1.0
Published
Generate seemless repeatable SVG background patterns.
Downloads
6
Maintainers
Readme
Vuepress Plugin HeroPattern
Register a global <HeroPattern />
component for VuePress.
This component generate a seemless SVG background pattern.
This plugin is a adaptor of hero-pattern for VuePress
See Demo on CodeSandbox
Installation
yarn add vuepress-plugin-hero-pattern -S
or
npm i vuepress-plugin-hero-pattern -S
Register the plugin
...
module.exports = {
...,
plugins: {
['hero-pattern']
},
...
}
...
Usage
Only background image, you must give the width & height of the element
<HeroPattern style="width: 240px; height: 80px;" />
With the custom slot, in the case, you can let the slot element control the pattern's height ÷
<hero-pattern>
<div style="padding: 64px; font-size: 2rem; color: white;">
All Posts
</div>
</hero-pattern>
API
| Props | Description | Type | Default |
| :---: | :---------: | :--: | :-----: |
| pattern | 87 kinds of patterns that Hero Patterns supported, check pattern list | String | line-to-motion
|
| fillColor | Controls the foreground color of the generated image. | String | #9c92ac
|
| fillOpacity | Controls the foreground opacity of the generated image. | String | 0.4
|
| backgroundColor | Controls the background color of the generated image. | String | #dfdbe5
|
| repeat | Controls how the background repeated of the generated image. | String | repeat
|
Slot
<HeroPattern />
component provide a custom slot, you can write some element on the generated pattern.
License
MIT @ xiaoluoboding