spades-ui

Spades UI

A UI Library of Vue Components for building web applications

Table of Contents

• Components
  • Renderless
    • Autocomplete
    • Collapse
    • DataTable
    • Input
    • Popover
  • Rendered
    • Alert
    • Avatar
    • Badge
    • Breadcrumbs
    • Button
    • Checkbox
    • DataTable
    • Dropdown
    • Form
    • Input
    • Option
    • Select
    • TagInput
    • Tooltip
    • Wysiwyg

Disclaimer

This document is a work in progress. Some components are not documented, and the documentation is in no way complete.

Components

Visual

Alert

Props

• Color: the color scheme of the alert
  • Type: String
  • Required: No
  • Default: "Primary"
  • Possible Values:
    • Primary: A primary colored alert
    • Accent: An accent colored alert
    • Dark: A dark grey colors alert
    • Light: A light grey colored alert
    • Danger: A danger colored alert
    • Warning: A warning colored alert
    • Success: A success colored alert
• Size: the size of the alert
  • Type: String
  • Required: No
  • Default: "md"
  • Possible Values:
    • Sm: a small alert
    • Md: a medium alert
    • Lg: a large alert
• Theme: the style of the alert
  • Type: String
  • Required: No
  • Default: "solid"
  • Possible Values:
    • Solid: A solid styled alert
    • Light: A light styled alert
    • Outline: An outline styled alert
• Close: whether the alert can be dismissed or not
  • Type: Boolean
  • Required: No
  • Default: true

Button

Props

• Type: the type of button
  • Type: String
  • Required: No
  • Default: "Link"
  • Possible Values
    • Button: an html <button type="button">
    • Submit: an html <button type="submit">
    • Reset: an html <button type="reset">
    • Anchor: an html <a>
    • Link: a vue <nuxt-link>
• To: the destination of the link (only applies to type="Link" & type="Anchor")
  • Type: String
  • Required: No
  • Default: "#"
• Size: the size of the button
  • Type: String
  • Required: No
  • Default: "md"
  • Possible Values:
    • Sm: a small button
    • Md: a medium button
    • Lg: a large button
• Color: the color scheme of the button
  • Type: String
  • Required: No
  • Default: "Primary"
  • Possible Values:
    • Primary: A primary colored button
    • Accent: An accent colored button
    • Dark: A dark grey colors button
    • Light: A light grey colored button
    • Danger: A danger colored button
    • Warning: A warning colored button
    • Success: A success colored button
• Theme: the style of the button
  • Type: String
  • Required: No
  • Default: "solid"
  • Possible Values:
    • Solid: A solid styled button
    • Light: A light styled button
    • Outline: An outline styled button
    • Link: A link styled button
• Pill: Whether the buttons corners should be fully rounded or not
  • Type: Boolean
  • Required: No
  • Default: false
• Icon: An Icon to be displayed in the button
  • Type: String
  • Required: No
  • Default: ''
  • Possible Values: The name of any icon included in Spades
• Disabled: Whether the button is disabled or not
  • Type: Boolean
  • Required: No
  • Default: false