VuePress Plugin GeoPattern
Register a global <GeoPattern />
component for VuePress.
This component generate a beautiful random geometric pattern & random color background images from a string you given.
This plugin is a adapter of geopattern for VuePress
See Demo on CodeSandbox
Installation
yarn add vuepress-plugin-geopattern -Sornpm i vuepress-plugin-geopattern -S
Register the plugin
...moduleexports = ... plugins: 'geopattern' ......
Usage
Default
Only background image, you must give the height of the element
<GeoPattern style="height: 160px;" />
Custom pattern
If you don't provide a seed, the pattern's seed is random.
In VuePress you can use global computed properties such as use this.$page.title
as a seed, generate a geopattern by the page title.
Each page title is different, so you got difference geopattern.
<GeoPattern style="height: 160px;" seed="$page.title" :colorHexs="['F', '4', 'A']"/>
With the custom slot
In the case, you can let the slot element control the pattern's height
<geo-pattern> <div style="padding: 64px; font-size: 2rem; color: white;"> All Posts </div></geo-pattern>
API
colorHexs is a new props for this component, I believe that three hexadecimal color value[0-F] can generate beautiful colors in random way.
Props | Description | Type | Default |
---|---|---|---|
seed | Will be used as the seed for generation | String | vuepress-plugin-geopattern |
colorHexs | Given array elements is hexadecimal color value [0-F] | Array | ['3', '9', 'C' ] |
baseColor | Controls the relative background color of the generated image. | String | 933c3c |
Slot
<GeoPattern />
component provide a custom slot, you can write some element on the generated pattern.
Related VuePress Plugin
- vuepress-plugin-hero-pattern - Hero Patterns is a set of repeatable, seemless SVG background patterns
License
MIT @ xiaoluoboding