spectrum-vue
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.
Install
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 |
License
MIT
Development
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