Skip to content

Human Body Parts Selector Vue JS. This is a library for those who want to be able to allow users to select human body parts

Notifications You must be signed in to change notification settings

HamadaFMahdi/vue-body-part-selector

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Human Body Parts Selector (Vue JS)

This is a library for those who want to be able to allow users to select body parts.

Example

https://vue-body-part-selector.netlify.app/

source code for the example above

Intallation

yarn add vue-body-part-selector

or

npm i vue-body-part-selector

Usage

Import component & register it e.g.

<script>
import Vue from 'vue';
import VueBodyPartSelector from 'vue-body-part-selector';

export default Vue.extend({
  name: 'App',
  components: {
    VueBodyPartSelector
  },
  data() {  
  ... // etc.

Use it e.g.

      <vue-body-part-selector 
        :selection.sync="selection" // make sure to define selection in data
        @click="handleClick"
        :disabled="false"
        :multiple="true"
        body-colour="green"
        selection-colour="yellow"
        :show-parts="{ // won't show head, face and neck
          'head': false,
          'face': false,
          'neck': false,
        }"
      />

Props

Name Type Desc Default
disabled bool If true, you can't select anything. false
multiple bool If true allows you to select multiple body parts. false
body-colour string Determines colour of the body. black
selection-colour string Determines colour of selection when clicked. black
show-parts object Allows you to hide body parts. Useful if you only want e.g. the front or the back or half of the front. (Please see below for structure). object where all parts are true

show-parts object structure

Note: true means show, false means hide.

{
    'head': true,
    'face': true,
    'neck': true,
    'shoulder-left': true,
    'shoulder-right': true,
    'arm-left': true,
    'forearm-left': true,
    'arm-right': true,
    'forearm-right': true,
    'chest-left': true,
    'chest-right': true,
    'belly-left': true,
    'ribs-left': true,
    'belly-right': true,
    'belly': true,
    'ribs-right': true,
    'thigh-left': true,
    'innerthigh-left': true,
    'feet-left': true,
    'calf-left': true,
    'knee-left': true,
    'thigh-right': true,
    'genitalia': true,
    'innerthigh-right': true,
    'right-feet': true,
    'calf-right': true,
    'knee-right': true,
    'elbow-right': true,
    'hand-right': true,
    'elbow-left': true,
    'hands-left': true,
    'armback-left': true,
    'leg-left': true,
    'buttock': true,
    'loin': true,
    'column': true,
    'head-back': true,
    'nape': true,
    'armback-right': true,
    'leg-right': true,
    'back-right': true,
    'clavicule-right': true,
    'back-left': true,
    'clavicule-left': true,
}

License: MIT

Credits

Credits go to Carlos Fuentes who did a great job making the base for this. Check source here.

About

Human Body Parts Selector Vue JS. This is a library for those who want to be able to allow users to select human body parts

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published