{"id":19311246,"url":"https://github.com/quasarframework/quasar-ui-qactivity","last_synced_at":"2025-04-22T14:30:33.271Z","repository":{"id":44999153,"uuid":"176432078","full_name":"quasarframework/quasar-ui-qactivity","owner":"quasarframework","description":"Create activity timeline","archived":false,"fork":false,"pushed_at":"2023-06-02T11:18:48.000Z","size":4199,"stargazers_count":48,"open_issues_count":5,"forks_count":6,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-11T19:43:05.147Z","etag":null,"topics":["quasar","quasar-framework","timeline-component","vue"],"latest_commit_sha":null,"homepage":"https://qactivity.netlify.app/","language":"JavaScript","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/quasarframework.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":["hawkeye64","rstoenescu"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-03-19T05:36:14.000Z","updated_at":"2025-01-29T06:32:53.000Z","dependencies_parsed_at":"2024-02-06T01:12:45.514Z","dependency_job_id":null,"html_url":"https://github.com/quasarframework/quasar-ui-qactivity","commit_stats":{"total_commits":111,"total_committers":5,"mean_commits":22.2,"dds":0.6126126126126126,"last_synced_commit":"d77b004b4248e7715ec8b66434e20711d5843467"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quasarframework%2Fquasar-ui-qactivity","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quasarframework%2Fquasar-ui-qactivity/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quasarframework%2Fquasar-ui-qactivity/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quasarframework%2Fquasar-ui-qactivity/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quasarframework","download_url":"https://codeload.github.com/quasarframework/quasar-ui-qactivity/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250258752,"owners_count":21400962,"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":["quasar","quasar-framework","timeline-component","vue"],"created_at":"2024-11-10T00:28:25.926Z","updated_at":"2025-04-22T14:30:32.080Z","avatar_url":"https://github.com/quasarframework.png","language":"JavaScript","funding_links":["https://github.com/sponsors/hawkeye64","https://github.com/sponsors/rstoenescu"],"categories":[],"sub_categories":[],"readme":"QActivity (@quasar/qactivity)\n===\n\n![@quasar/quasar-ui-qactivity](https://img.shields.io/npm/v/@quasar/quasar-ui-qactivity?label=@quasar/quasar-ui-qactivity)\n![@quasar/quasar-app-extension-qactivity](https://img.shields.io/npm/v/@quasar/quasar-app-extension-qactivity?label=@quasar/quasar-app-extension-qactivity)\n[![npm](https://img.shields.io/npm/dt/@quasar/quasar-ui-qactivity.svg)](https://www.npmjs.com/package/@quasar/quasar-ui-qactivity)\n![@quasar/quasar-app-extension-qactivity](https://img.shields.io/npm/dm/@quasar/quasar-ui-qactivity)\n[![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/quasarframework/quasar-ui-qactivity.svg)]()\n[![GitHub repo size in bytes](https://img.shields.io/github/repo-size/quasarframework/quasar-ui-qactivity.svg)]()\n\nQActivity is an `UI App Extension` for [Quasar Framework v2](https://quasar.dev/). It will not work with legacy versions of Quasar Framework.\n\n# Info\nQActivity is the smaller sister to [QTimeline](https://quasar.dev/vue-components/timeline) and can be used to create an activity list.\n\nOne of the most important actions is the ability to adjust the `QActivity` bar distance and the `QActivityItem` icon distance. This is needed when you adjust margins, padding or icon size to make everything line up properly. Therefore, when making an activity list, it is recommended to keep everything the same. If you do use different icon sizes, you will need to adjust the `icon-distance` property appropriately for each `QActivityItem`.\n\n[Live Demo](https://qactivity.netlify.app/) - **live docs and examples**\n\n# Install\nTo add this App Extension to your Quasar application, run the following (in your Quasar app folder):\n```\nquasar ext add @quasar/qactivity\n```\n\n# Describe\nYou can use `quasar describe QActivity` or `quasar describe QActivityItem`\n\n# Example Code\nBe sure to check out the docs for more examples.\n```\n\u003cdiv class=\"q-pa-md q-gutter-sm\"\u003e\n  \u003cq-card class=\"q-pa-sm\" style=\"width: 100%;\"\u003e\n    \u003cq-activity\n      dense\n      bar-color=\"red\"\n      bar-width=\"1px\"\n      bar-distance=\"15px\"\n      :class=\"itemClass\"\n    \u003e\n      \u003cq-activity-item\n        icon=\"photo\"\n        icon-color=\"blue\"\n        icon-text-color=\"white\"\n        icon-size=\"1rem\"\n        icon-font-size=\"0.75rem\"\n        icon-square\n        style=\"padding-bottom:5px;padding-top:5px;\"\n      \u003e\n        \u003cq-parallax\n          :height=\"100\"\n          src=\"https://cdn.quasar.dev/img/parallax2.jpg\"\n        /\u003e\n      \u003c/q-activity-item\u003e\n      \u003cq-activity-item\n        icon=\"list\"\n        icon-color=\"orange-8\"\n        icon-text-color=\"white\"\n        icon-size=\"1rem\"\n        icon-font-size=\"0.75rem\"\n        icon-square\n        :class=\"itemClass\"\n        style=\"padding-bottom:5px;padding-top:5px;\"\n      \u003e\n        \u003cq-item\u003e\n          \u003cq-item-section\u003e\n            \u003cq-item-label\u003eQItem\u003c/q-item-label\u003e\n            \u003cq-item-label caption lines=\"2\"\u003eSecondary line text. Lorem ipsum dolor sit amet, consectetur adipiscit elit.\u003c/q-item-label\u003e\n          \u003c/q-item-section\u003e\n\n          \u003cq-item-section side top\u003e\n            \u003cq-item-label caption\u003e5 min ago\u003c/q-item-label\u003e\n            \u003cq-icon name=\"star\" color=\"yellow\" /\u003e\n          \u003c/q-item-section\u003e\n        \u003c/q-item\u003e\n      \u003c/q-activity-item\u003e\n      \u003cq-activity-item\n        v-for=\"(item, index) in data\"\n        :key=\"index\"\n        :icon=\"item.icon\"\n        :icon-color=\"item.iconColor\"\n        :icon-text-color=\"item.iconTextColor\"\n        :icon-size=\"item.iconSize\"\n        :icon-font-size=\"item.iconFontSize\"\n        :icon-square=\"item.iconSquare\"\n        :icon-rounded=\"item.iconRounded\"\n        :icon-image=\"item.iconImage\"\n        :class=\"listClasses(index)\"\n      \u003e\n        \u003cdiv class=\"full-width row justify-evenly\"\u003e\n          \u003cdiv class=\"inline-block vertical-middle middle-text col\"\u003e\n            {{ item.text }}\n          \u003c/div\u003e\n          \u003cdiv class=\"inline-block vertical-middle side-text text-right q-pr-sm col col-shrink\" style=\"min-width: 100px;\"\u003e\n            {{ item.time }}\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/q-activity-item\u003e\n    \u003c/q-activity\u003e\n  \u003c/q-card\u003e\n\u003c/div\u003e\n```\n\n# QActivity Vue Properties\n| Vue\u0026nbsp;Property | Type\t| Description |\n|---|---|---|\n| dense | Boolean | Dense mode; occupies less space |\n| bar-color | String | CSS color (no Quasar colors allowed here) |\n| bar-width | String | Size in CSS units, including unit name |\n| bar-distance | String | Size in CSS units, including unit name |\n\nQActivity has no events or methods. It has a single \"default\" slot. You can put anything into this slot, but QActivityItem is expected.\n\n# QActivityItem Vue Properties\n| Vue\u0026nbsp;Property | Type\t| Description |\n|---|---|---|\n| icon | Boolean | Icon name following Quasar convention; make sure you have the icon library installed |\n| icon-color | String | Color name for icon from the Quasar Color Palette |\n| icon-text-color | String | Color name for icon text from the Quasar Color Palette |\n| icon-size | String | Size in CSS units, including unit name |\n| icon-font-size | String | Size in CSS units, including unit name |\n| icon-square | Boolean | Removes border-radius so borders are squared |\n| icon-rounded | Boolean | Applies a small standard border-radius for a squared shape of the component |\n| icon-image | String | Path to image to use. If used, do not also use `icon`, `icon-color`, `icon-text-color` or `icon-font-size` |\n| icon-distance | String | Size in CSS units, including unit name. Used to help center icons on the bar |\n\nQActivityItem has no events or methods. It has a single \"default\" slot. You can put anything into this slot.\n\n# Donate\nIf you appreciate the work that went into this, please consider donating to [Quasar](https://donate.quasar.dev) or [Jeff](https://github.com/sponsors/hawkeye64).\n\n# License\nMIT (c) Jeff Galbraith \u003cjeff@quasar.dev\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquasarframework%2Fquasar-ui-qactivity","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquasarframework%2Fquasar-ui-qactivity","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquasarframework%2Fquasar-ui-qactivity/lists"}