[Feature] Component

[Alex Yang]

[Alex Yang]

Avatar

support display img or only characters

example:

<b-avatar color="blue"
  :size="100">
  <img src="...xxx">
</b-avatar>

<b-avatar color="red" :size="64"> LG </b-avatar>

[Alex Yang]

Button

b-button has any common usege like router, type ...

<b-button-group direction="row">
  <b-button color="green" type="info" :router="xxx"  round>Home</b-button>
  <b-button color="red" type="info" :router="xxx" round>HOT</b-button>
  <b-button color="blue" type="info" :router="xxx" round>Me</b-button>
  <b-button color="gray" type="info" :router="xxx" round>About</b-button>
</b-button-group>

<b-button disable="false">Click Me</b-button>
<b-button block>Wide button</b-button>

[Alex Yang]

Card

a basic display container

[Alex Yang]

Progress

two styles of progress, circle and line

[Alex Yang]

List

a basic display container which is used to display information

[Alex Yang]

Pagination

it's used to separate long sets of data

[Alex Yang]

Bottom Navigation

default to display on mobile, it's element has icon, text

[Alex Yang]

Carousel

for displaying huge images, like on luogu.org

[Alex Yang]

Block

example:

<template>
  <div>
    <h1>Enjoy Coding Life!</h1>
    <div class="playground">
      <b-block
        :color="'green'"
        status="AC"
        disabled>
        1000ms/128kb
      </b-block>
      <b-block
        :color="'red'"
        status="WA"
        disabled>
        1000ms/128kb
      </b-block>
      <b-block
        :color="'bluelight'"
        status="WA"
        disabled>
        1000ms/128kb
      </b-block>
      <b-block
        :color="'yellow'"
        status="WA"
        disabled>
        1000ms/128kb
      </b-block>
      <b-block
        :color="'orange'"
        status="WA"
        disabled>
        1000ms/128kb
      </b-block>
      <b-block
        :color="'brown'"
        status="WA"
        disabled>
        1000ms/128kb
      </b-block>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Playground'
}
</script>

<style lang="stylus" scoped>
  .playground {
    display: flex
    flex-direction: row
  }
</style>

[Alex Yang]

Hover

Change style when mouse hover on it, it can use on any components

[Alex Yang]

Tag

[Alex Yang]

Badge

[Alex Yang]

this issue will not update