vue-initials-placeholder
A vue component that uses parsed initials as placeholders. Can be used as a substitute for absent user profile photo.
Installation
# yarn
yarn add vue-initials-placeholder
# npm
npm i --save vue-initials-placeholderUsage
<script>
import VueInitialsPlaceholder from 'vue-initials-placeholder.vue'
export default {
components: {
VueInitialsPlaceholder
}
}
</script>
<template>
<div>
<VueInitialsPlaceholder value="Emmanuel Raymond"/>
</div>
</template>Props
| Name | Type | Default | Description | Required |
|---|---|---|---|---|
| value | String | null | The name you want to parse as placeholder | true |
| bgColor | String | #4285F4 | Background color - [color name, rgb or hex] | false |
| size | String | 40 | The width and height of the container that contains the initials in px | false |
| textColor | String | #fff | Text color of the initials - [color name, rgb or hex] | false |
| fontSize | String | 18 | Font size of the initials in px | false |
Acknowledgement
This package was inspired by Initials-placeholder-react
Contributing
If you would like to report bugs or request a feature, please create a new issue.
If you'd like to contribute to the code:
- Fork it!
- Create your feature branch:
git checkout -b feature-name - Commit your changes:
git commit -am 'Some commit message' - Push to the branch:
git push origin feature-name - Submit a pull request!
License
This project is released under the terms of the MIT License