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