import Vue from 'vue';
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';

Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);

Usage

Basic Usage

<van-goods-action>
  <van-goods-action-icon icon="chat-o" text="Icon1" @click="onClickIcon" />
  <van-goods-action-icon icon="cart-o" text="Icon2" @click="onClickIcon" />
  <van-goods-action-icon icon="shop-o" text="Icon3" @click="onClickIcon" />
  <van-goods-action-button type="danger" text="Button" @click="onClickButton" />
</van-goods-action>

import { Toast } from 'vant';

export default {
  methods: {
    onClickIcon() {
      Toast('Click Icon');
    },
    onClickButton() {
      Toast('Click Button');
    },
  },
};

Icon Badge

Use badge prop to show badge in icon.

<van-goods-action>
  <van-goods-action-icon icon="chat-o" text="Icon1" dot />
  <van-goods-action-icon icon="cart-o" text="Icon2" badge="5" />
  <van-goods-action-icon icon="shop-o" text="Icon3" badge="12" />
  <van-goods-action-button type="warning" text="Button" />
  <van-goods-action-button type="danger" text="Button" />
</van-goods-action>

Custom Icon Color

<van-goods-action>
  <van-goods-action-icon icon="chat-o" text="Icon1" color="#ee0a24" />
  <van-goods-action-icon icon="cart-o" text="Icon2" />
  <van-goods-action-icon icon="star" text="Collected" color="#ff5000" />
  <van-goods-action-button type="warning" text="Button" />
  <van-goods-action-button type="danger" text="Button" />
</van-goods-action>

Custom Button Color

<van-goods-action>
  <van-goods-action-icon icon="chat-o" text="Icon1" />
  <van-goods-action-icon icon="shop-o" text="Icon2" />
  <van-goods-action-button color="#be99ff" type="warning" text="Button" />
  <van-goods-action-button color="#7232dd" type="danger" text="Button" />
</van-goods-action>

API

GoodsAction Props

Attribute	Description	Type	Default
safe-area-inset-bottom	Whether to enable bottom safe area adaptation	boolean	`true`

GoodsActionIcon Props

Attribute	Description	Type	Default
text	Button text	string	-
icon	Icon	string	-
color	Icon color	string	`#323233`
icon-class	Icon class name	any	`''`
dot `2.5.5`	Whether to show red dot	boolean	-
badge `2.5.6`	Content of the badge	number \| string	-
url	Link	string	-
to	Target route of the link, same as to of vue-router	string \| object	-
replace	If true, the navigation will not leave a history record	boolean	`false`

GoodsActionButton Props

Attribute	Description	Type	Default
text	Button text	string	-
type	Button type, Can be set to `primary` `info` `warning` `danger`	string	`default`
color	Button color, support linear-gradient	string	-
icon	Left Icon	string	-
primary	Is primary button (red color)	boolean	`false`
disabled	Whether to disable button	boolean	`false`
loading	Whether show loading status	boolean	`false`
url	Link	string	-
to	Target route of the link, same as to of vue-router	string \| object	-
replace	If true, the navigation will not leave a history record	boolean	`false`

GoodsActionIcon Slots

Name	Description
default	Text
icon	Custom icon

GoodsActionButton Slots

Name	Description
default	Button content

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@goods-action-background-color	`@white`	-
@goods-action-height	`50px`	-
@goods-action-icon-width	`48px`	-
@goods-action-icon-height	`100%`	-
@goods-action-icon-color	`@text-color`	-
@goods-action-icon-size	`18px`	-
@goods-action-icon-font-size	`@font-size-xs`	-
@goods-action-icon-active-color	`@active-color`	-
@goods-action-icon-text-color	`@gray-7`	-
@goods-action-button-height	`40px`	-
@goods-action-button-warning-color	`@gradient-orange`	-
@goods-action-button-danger-color	`@gradient-red`	-