{"id":28089347,"url":"https://github.com/pygmyslowloris/vue-fab","last_synced_at":"2025-05-13T12:57:13.205Z","repository":{"id":51867859,"uuid":"89248239","full_name":"PygmySlowLoris/vue-fab","owner":"PygmySlowLoris","description":"Vue Floating Action Button","archived":false,"fork":false,"pushed_at":"2023-01-12T06:49:16.000Z","size":3349,"stargazers_count":274,"open_issues_count":33,"forks_count":51,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-20T17:49:34.277Z","etag":null,"topics":["floating-action-button","floatingactionbutton","vue","vuejs2"],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PygmySlowLoris.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-24T14:10:18.000Z","updated_at":"2025-04-01T14:10:05.000Z","dependencies_parsed_at":"2023-02-09T10:31:58.389Z","dependency_job_id":null,"html_url":"https://github.com/PygmySlowLoris/vue-fab","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PygmySlowLoris%2Fvue-fab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PygmySlowLoris%2Fvue-fab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PygmySlowLoris%2Fvue-fab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PygmySlowLoris%2Fvue-fab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PygmySlowLoris","download_url":"https://codeload.github.com/PygmySlowLoris/vue-fab/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253948346,"owners_count":21988953,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["floating-action-button","floatingactionbutton","vue","vuejs2"],"created_at":"2025-05-13T12:57:11.585Z","updated_at":"2025-05-13T12:57:13.196Z","avatar_url":"https://github.com/PygmySlowLoris.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"#   FAB\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://media.giphy.com/media/neHUu8DKlgdVK/giphy.gif\" /\u003e\n\u003c/p\u003e\n\nFloating Action Button for Vue.\n\nThe component supports multiple action buttons so you can add as many actions as you need. It will fire an event to the parent when clicking on each one. \n\n\u003ca href=\"https://pygmyslowloris.github.io/vue-fab/\"\u003e Live Demo\u003c/a\u003e\n\n##  Installation\n\n```\nnpm install vue-fab --save\n```\n\n##  Dependencies\n\nInclude the following stylesheets on your document's head\n\n```\n\u003clink rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\"\u003e\n```\n\nAnd \n\n```\n\u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css\"\u003e\n```\n\n##  Properties\n\n| Properties            | Type      | Values     |\n| :---------------      | :-------  | :--------- |\n|  `bg-color`           | String    | \u003cb\u003eDefault '#333333'\u003c/b\u003e\u003cbr\u003e Accepts all color formats: HEX, RGB \u0026 RGBA |\n|  `position`           | String    | \u003cb\u003eDefault 'bottom-left'\u003c/b\u003e \u003cbr\u003eOptions: 'bottom-left', 'bottom-right', 'top-left','top-right'  |\n|  `position-type`           | String    | \u003cb\u003eDefault 'fixed'\u003c/b\u003e \u003cbr\u003eOptions: 'fixed' or 'absolute'|\n|  `z-index`            | String    | \u003cb\u003eDefault '999'\u003c/b\u003e \u003cbr\u003eSet any value that suits your needs.  |\n|  `ripple-show`        | Boolean   | \u003cb\u003eDefault true\u003c/b\u003e \u003cbr\u003eOptions: true or false.  |\n|  `ripple-color`       | String    | \u003cb\u003eDefault 'light'\u003c/b\u003e \u003cbr\u003eOptions: 'light' or 'dark'.  |\n|  `icon-size`       | String    | \u003cb\u003eDefault 'medium'\u003c/b\u003e \u003cbr\u003eOptions: 'small', 'medium' or 'large'.  |\n|  `main-icon`       | String    | \u003cb\u003eDefault 'add'\u003c/b\u003e \u003cbr\u003eUse icons from the material icon library.  |\n|  `main-tooltip`       | String    | \u003cb\u003eDefault `null`\u003c/b\u003e  |\n|  `actions`            | Array    | \u003cb\u003e[Details bellow](https://github.com/PygmySlowLoris/vue-fab/#actions)\u003c/b\u003e\n|  `fixed-tooltip`      | Boolean    | \u003cb\u003eDefault 'false'\u003c/b\u003e\u003cbr\u003e if true, it shows the tooltip beside the actions\n|  `enable-rotation`      | Boolean    | \u003cb\u003eDefault 'true'\u003c/b\u003e\u003cbr\u003e if true, the fab will rotate to indicate that it has been opened. Will not rotate if there are no actions specified.\n|  `start-opened`      | Boolean    | \u003cb\u003eDefault 'false'\u003c/b\u003e\u003cbr\u003e if true, the fab will start opened.\n|  `toggle-when-away`      | Boolean    | \u003cb\u003eDefault 'true'\u003c/b\u003e\u003cbr\u003e if false, the fab will not be closed when clicking outside from the fab component.\n\n### actions\n\n| Properties            | Type      | Values            |\n| :---------------      | :-------  | :---------        |\n|  `name`               | String    | Name of the event |\n|  `icon`               | String    | Icon name (Please refer to [Material icons](https://material.io/icons/))        |\n|  `tooltip`            | String    | If not used, tooltip won't appear.  |\n|  `color`              | String    | \u003cb\u003eDefault `bg-color` value\u003c/b\u003e\u003cbr\u003e Accepts all color formats: HEX, RGB \u0026 RGBA  |\n\n##  Examples\n\nInclude the component in your .vue file, `actions` prop is required for the component to work. The `@event` has to match the name given in the `actions` prop. \n```\n\u003ctemplate\u003e\n  \u003cfab :actions=\"fabActions\"\n       @cache=\"cache\"\n       @alertMe=\"alert\"\n  \u003e\u003c/fab\u003e\n\u003c/template\u003e\n```\n\nEither `color` and `position` are set by default but they can be changed.\n\n```\n\u003cfab\n   :position=\"position\"\n   :bg-color=\"bgColor\"\n   :actions=\"fabActions\"\n   @cache=\"cache\"\n   @alertMe=\"alert\"\n\u003e\u003c/fab\u003e\n```\n\nMatch your data with your components props. The `bgColor` accepts either HEX, RBG or RGBA format.\n\n\u003cb\u003eRemember:\u003c/b\u003e Only material icons are accepted.\n```\n\u003cscript\u003e\nimport fab from 'vue-fab'\n\nexport default {\n  components: {\n    fab\n  },\n   data(){\n      return {\n          bgColor: '#778899',\n          position: 'top-right',\n          fabActions: [\n              {\n                  name: 'cache',\n                  icon: 'cached'\n              },\n              {\n                  name: 'alertMe',\n                  icon: 'add_alert'\n              }\n          ]\n      }\n  },\n  methods:{\n      cache(){\n          console.log('Cache Cleared');\n      },\n      alert(){\n          alert('Clicked on alert icon');\n      }\n  }\n}\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpygmyslowloris%2Fvue-fab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpygmyslowloris%2Fvue-fab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpygmyslowloris%2Fvue-fab/lists"}