Skip to content

Latest commit

 

History

History
148 lines (130 loc) · 4.95 KB

README.md

File metadata and controls

148 lines (130 loc) · 4.95 KB

spectrum-vue

npm version Types License: MIT

UI Components for Vue based on Adobe Spectrum (spectrum-css)

Document & Demo

⚠️ This project is work in progress. Not a stable version. May make breaking changes.

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