UI Components for Vue based on Adobe Spectrum (spectrum-css)
- It was created "based" on Spectrum and is not the same as Spectrum.
- This project was not developed by Adobe.
- Not the same as React Spectrum, Spectrum Web Components API.
yarn add @toshusai/spectrum-vue
Register Components to global.
import * as components from "@toshusai/spectrum-vue"
import Vue from "vue"
Object.entries(components).forEach(([name, component]) => {
Vue.component(name, component)
})Add style.
import "@toshusai/spectrum-vue/dist/index.css"Add global css.
@spectrum-css/vars/dist/spectrum-global.css
<html class="spectrum spectrum--medium spectrum--dark" dir="ltr">
<body class="spectrum-Body"> </body>
</html>| Accordion | ✅ |
| ActionBar | 🚧 |
| ActionButton | ✅ |
| ActionGroup | ✅ |
| ActionMenu | ✅ |
| AssetFile | ✅ |
| AssetFolder | ✅ |
| AssetImage | ✅ |
| AssetList | 🚧 |
| AutoComplete | 🚧 |
| Avatar | ✅ |
| Badge | ✅ |
| Breadcrumbs | ✅ |
| BreadcrumbsItem | ✅ |
| Button | ✅ |
| ButtonGroup | ✅ |
| Calendar | 🚧 |
| CalendarDate | 🚧 |
| Card | 🚧 |
| Checkbox | ✅ |
| CoachMark | 🚧 |
| ColorArea | 🚧 |
| ColorLoupe | 🚧 |
| ColorSlider | 🚧 |
| ColorWheel | 🚧 |
| Combobox | 🚧 |
| ContextMenu | 🚧 |
| DatePicker | 🚧 |
| Dial | 🚧 |
| Dialog | ✅ |
| Divider | ✅ |
| DropIndicator | 🚧 |
| Dropzone | ✅ |
| FieldGroup | ✅ |
| FieldLabel | ✅ |
| Form | ✅ |
| FormItem | ✅ |
| HelpText | ✅ |
| HintTextfield | 🚧 |
| Icon | ✅ |
| InlineAlert | ✅ |
| ItemListItem | 🚧 |
| Link | ✅ |
| LogicButton | ✅ |
| Menu | ✅ |
| MenuDivider | ✅ |
| MenuItem | ✅ |
| MenuItemHeader | ✅ |
| Meter | ✅ |
| Modal | ✅ |
| PaginationButton | ✅ |
| Picker | ✅ |
| PickerButton | ✅ |
| Popover | 🚧 |
| ProgressBar | ✅ |
| ProgressCircle | ✅ |
| QuickAction | ✅ |
| Radio | ✅ |
| Sidenav | 🚧 |
| Slider | ✅ |
| SliderTextfield | ✅ |
| SplitView | ✅ |
| SplitViewPane | ✅ |
| SplitViewSplitter | ✅ |
| Table | ✅ |
| Tabs | 🚧 |
| Tag | ✅ |
| TextArea | ✅ |
| Textfield | ✅ |
| Toast | ✅ |
| TreeItem | 🚧 |
| TreeView | 🚧 |
| TreeViewItem | 🚧 |
MIT
Serve documents site. http://localhost:10000/spectrum-vue
cd docs
npm install
npm run dev
Build and replace dev docs node_modules.
npm install
npm run build && rsync dist docs/node_modules/@toshusai/spectrum-vue
Generate docs. Check scripts/README.md
cd scripts
node generateTemplate.js