Skip to content

Latest commit

 

History

History
507 lines (338 loc) · 16.1 KB

Buttons.md

File metadata and controls

507 lines (338 loc) · 16.1 KB

Fish Tank Buttons

 

Table Of Contents

Usage

 

To import button components
import { 
  ButtonPrimary,
  ButtonSecondary,
  ButtonDestructive, 
  ButtonOutline,
  ButtonOutlineSmall, 
  ButtonGradient , 
  ButtonWhite,
  ButtonOutlineDark,
  ButtonOutlineDarkSmall,
  ButtonFeatureIcon,
  ButtonFeatureLabel, }  from '@fishtank/fishtank-vue'

 

To import icons for your components

Desired icons must be individually imported from '@fishtank/icons-vue' and listed among exported components or they will not render. Icons must be referenced using camel case not kebab. e.g. MobileInactive24

 

  import { Alert24 } from "@fishtank/icons-vue"

 

To export your custom Vue components

In your export default Vue.extend ( ) class :

  1. Under components, list each type of button and icon that will be used.
  2. Under data, you will return your prop values to the button components   e.g. color, color direction, links, and text.

 

e.g.

  export default Vue.extend({

    components:{
      //imported buttons that will be used
      ButtonFeatureLabel,
      ButtonGradient,
      //imported icons that will be referenced in button components
      Alert24,
    },

    data: function(){
      return{
        //prop values that are sent to components
        colorStart : "#0018AB",
        colorEnd : "9933CC",
        colorDirection : "to right",
      }
    },

  })

To import icons for your component

Desired icons must be individually imported from '@fishtank/icons-vue' and listed among exported components or they will not render. Icons must be referenced using camel case not kebab. e.g. MobileInactive24

  import { Alert24 } from "@fishtank/icons-vue"

To export your custom Vue components

  1. Under components, list each type of button and icon that will be used.
  2. Under data, you will return your prop values to the button components 1. e.g. color, color direction, links, and text.

e.g.

  export default Vue.extend({

    components:{
      //imported buttons that will be used
      ButtonFeatureLabel,
      ButtonGradient,
      //imported icons that will be referenced in button components
      Alert24,
    },

    data: function(){
      return{
        //prop values that are sent to components
        colorStart : "#0018AB",
        colorEnd : "9933CC",
        colorDirection : "to right",
      }
    },

  })

 

Components

 

See Usage for steps on how to enable button components for usage in your template. The following sub-sections describe each button component and their props. In Addition to the props unique to each button component there are universal props that apply to each button ( with the exception of the FAB Button that is still in beta ) . There are also actions that can be added to each button component .

See the Table of Contents to jump directly to the section you need.

 

Primary Button

 

Fish Tank Primary Button

 

    <ButtonPrimary>Button Primary</ButtonPrimary>
See Usage section for an explanation on how to enable this button component in your template.

 

Secondary Button

 

Fish Tank Secondary Button

 

    <ButtonSecondary>Button Secondary</ButtonSecondary>
See Usage section for an explanation on how to enable this button component in your template.

 

Destructive Button

 

Fish Tank Destructive Button

 

    <ButtonDestructive>Button Destructive</ButtonDestructive>
See Usage section for an explanation on how to enable this button component in your template.

 

Outline Button

 

Fish Tank Outline Button

 

    <ButtonOutline>Button Outline</ButtonOutline>
See Usage section for an explanation on how to enable this button component in your template.

 

Outline Small Button

 

Fish Tank Outline Small Button

 

    <ButtonOutlineSmall>Button Outline Small</ButtonOutlineSmall>
See Usage section for an explanation on how to enable this button component in your template.

 

Outline Dark Button

( For use on Dark Backgrounds )

 

Fish Tank Outline Dark Button

 

    <ButtonOutlineDark>Button Outline Dark</ButtonOutlineDark>
See Usage section for an explanation on how to enable this button component in your template.

 

Outline Dark Small Button

( For use on Dark Backgrounds )

 

Fish Tank Outline Dark Small Button

 

    <ButtonOutlineDarkSmall>Button Outline Dark Small</ButtonOutlineDarkSmall>
See Usage section for an explanation on how to enable this button component in your template.

 

White Button

 

Fish Tank White Button

 

    <ButtonWhite>Button White</ButtonWhite>
See Usage section for an explanation on how to enable this button component in your template.

 

Button Primary with block property

 

Block Style Fish Tank Primary Button

 

  <ButtonPrimary 
    :block="true">Button Primary</ButtonPrimary>
See Usage section for an explanation on how to enable this button component in your template.

 

Gradient Button

 

Fish Tank Gradient Button

 

This button takes in three required props :gradientStart, :gradientEnd, and :colorDirection. Return values into these props using a return function in :data within your export default Vue.extend( ) class. See How to Export Your Custom Button Components .

 

  <ButtonGradient
    :gradientStart="startingHexColorVariable"
    :gradientEnd="endingHexColorVariable"
    :colorDirection="to-right"
    >Button Gradient</ButtonGradient>

 

Gradient Button Props

Name Type Description Required Default
gradientStart String(Hex color, or valid CSS color) Start Color of Gradient true undefined
gradientEnd String(Hex color, or valid CSS color) End Color of Gradient true undefined
colorDirection String("to-right" or "to-left") Horizontal Direction of Gradient false undefined
See Usage section for an explanation on how to enable this button component in your template.

 

Feature Button Icon

 

Fish Tank Feature Button Icon

 

This button type utilizes both icons and slots, it will require 4 things of you:

  1. Import desired icons from @fishtank/icons-vue. See How to Import Icons for Button Components

  2. Declare them under :components in your export default Vue.extend( ) class. See How to Export Your Custom Button Components .

  3. Refer to icons in all cases using camel case. a. Do it like this. 'AnAwesomeIcon24' (Heroes do this) b. Never do it like this, *'an_awesome_icon_24' or 'an-awesome-icon-24'. (Only Villians do that.)

  4. Refer to icon with self closing tags within component. e.g. '< AnAwesomeIcon24 />'

 

This button simply needs you to reference the desired icon using camel case and self closing brackets within the components.

 

  <ButtonFeatureIcon> <Alert24/> </ButtonFeatureIcon>
See Usage section for an explanation on how to enable this button component in your template.

 

Feature Button Icon With Label

 

Fish Tank Feature Button with Label

 

This button type utilizes both icons and slots, it will require 4 things of you:

  1. Import desired icons from @fishtank/icons-vue. See How to Import Icons for Button Components

  2. Declare them under :components in your export default Vue.extend( ) class. See How to Export Your Custom Button Components .

  3. Refer to icons in all cases using camel case. a. Do it like this. 'AnAwesomeIcon24' (Heroes do this) b. Never do it like this, *'an_awesome_icon_24' or 'an-awesome-icon-24'. (Only Villians do that.)

  4. Refer to icon with self closing tags within component. e.g. '< AnAwesomeIcon24 />'

 

This button takes in two required slots that are referenced using the '< template >' tags. The first is the '< template >' that takes in the attribute slot named 'icon'. Between this template tag is where you will reference your 24x24 icon of choice, after you have imported it from '@fishtank/icons-vue'. Remember to reference your icon using self closing tags. The second '< template >' tag takes in a slot named 'label', where you enter the label text.

 

  <ButtonFeatureLabel> 
      <template slot="icon"> <Alert24/> </template>
      <template slot="label"> Button Feature Label</template>
  </ButtonFeatureLabel>
See Usage section for an explanation on how to enable this button component in your template.

 

F A B ( Floating Action Button )

 

     Fish Tank FAB Button Default State                            Fish Tank FAB Button Hover State

    Default State                     Hover State (optional)

 

    <ButtonFAB 
      :fab-color-primary-start="#0018AB"
      :fab-color-primary-end="#9933CC" 
      :fab-color-secondary="#17509F"
      :options-available="true"
      :option-one-link="https://twitter.com/"
      :option-two-link="https://facebook.com/"
    >

      <template slot="mainIcon"> <Add32/>  </template>
      <template slot="option1"> <Twitter24/> </template>
      <template slot="option2"> <Facebook24/> </template>

    </ButtonFAB>

 

An Explanation of the FAB Button Props, Icons, and Slots

The FAB Button takes in six props, the first three are strings that take in valid css colors and hex values. With :fab-color-primary-start determining the start gradient color of the main FAB button, :fab-color-primary-end determining the end gradient color, and :fab-color-secondary being the solid background color of the two FAB button options. The optional sub-buttons on the FAB are only available if the boolean prop :options-available is set to true, it is set to false by default. The final two props are strings where you can pass URL's / paths for each of the FAB's optional sub-buttons, which render in ascending order. These props are :option-one-link and :option-two-link .

Assigning Icons to each button is as simple as creating <template></template> tags within the <ButtonFAB></ButtonFAB> element, and then passing your desired icons through the <template></template> tags after specifying the appropiate slot it will belong to. For instance, icons passed into any template with a slot named 'mainIcon' will appear/belong to the main FAB button.

eg.

<template slot="mainIcon"> <Add32/> </template>

Icons passed into any template with a slot named 'option1' will appear as the first FAB sub-button's icon. This is the sub-button nearest the main FAB button.

eg.

<template slot="option1"> <Twitter24/> <template>

Lastly, icons passed into any template with a slot named 'option2' will appear as the second FAB sub-button's icon. This is the sub-button furthest from the main FAB button.

eg.

<template slot="option2"> <Facebook24/> </template>

 

For Instructions on how to import Fish Tank Icons for use in this component, see the ' How to Import Icons for Button Components ' section.

 

The FAB Button Props

Name Type Description Required Default
:fab-color-primary-start String ( Hex color, or valid css color ) Start color of main button gradient true #0018AB
:fab-color-primary-end String ( Hex color, or valid css color ) End color of main button gradient true #9933CC
:fab-secondary String ( Hex color, or valid css color ) Color of FAB sub-buttons true #777C7F
:options-available Boolean Enables presence of FAB sub-buttons true false
:options-one-link String ( URL Link / path ) Link text for first sub-button option true " "
:options-two-link String ( URL Link / path ) Link text for second sub-button option true " "

 

See Usage section for an explanation on how to enable this button component in your template.

 

Adding actions:

Actions applicable to all button components.

<ButtonPrimary 
  @click="handleClick"
  >Button Primary</ButtonPrimary>
See Usage section for an explanation on how to enable button components in your template.

Universal Props

The following props apply to all buttons .

 

Examples of Implementation
<ButtonPrimary
  :disabled="falsyVariable"
  :block="truthyVariable"
  >Button Primary</ButtonPrimary>

 

List of Available Props
Name Type Description Required Default
disabled Boolean Specify if button should be disabled false false
block Boolean Changes Button to full width block element false false
See Usage section for an explanation on how to enable button components in your template.