<template>
  <div class="demo-timeline-color">
    <ui-timeline>
      <ui-timeline-item color="green">
        <div>Create a services site 2015-09-01</div>
      </ui-timeline-item>
      <ui-timeline-item color="green">
        <div>Create a services site 2015-09-01</div>
      </ui-timeline-item>
      <ui-timeline-item color="red">
        <ui-icon
          slot="dot"
          name="clock"
          size="1.2rem"></ui-icon>
        <div>
          <p>Solve initial network problems 1</p>
          <p>Solve initial network problems 2</p>
          <p>Solve initial network problems 3 2015-09-01</p>
        </div>
      </ui-timeline-item>
      <ui-timeline-item color="blue">
        <div>
          <p>Technical testing 1</p>
          <p>Technical testing 2</p>
          <p>Technical testing 3 2015-09-01</p>
        </div>
      </ui-timeline-item>
    </ui-timeline>
  </div>
</template>

<script>
import { Timeline, TimelineItem, Icon } from "amumu-ui"
export default {
  components: {
    "ui-timeline": Timeline,
    "ui-timeline-item": TimelineItem,
    "ui-icon": Icon,
  },
}
</script>

<style lang="scss" scope>
p {
  margin: 0;
}
</style>
