Carbon Vue

carbon-vue.markdown

Carbon Vue

A Pen by Segmentational on CodePen.

License.

index.html

<div id="app">
    <!--  Replaced by Vue content  -->
</div>

<script type="text/x-template" id="app-template">
    <div>
    <cv-text-input
      label="You are?"
      v-model="yourName"
      placeholder="Tell me your name then click below, or I'll call you Bob"
    ></cv-text-input>
    <p>{{ hello }}</p>

    <cv-content-switcher>
      <cv-content-switcher-button owner-id="csb-1" :selected="isSelected(0)"
        >Tiles</cv-content-switcher-button
      >
      <cv-content-switcher-button owner-id="csb-2" :selected="isSelected(1)"
        >Buttons</cv-content-switcher-button
      >
      <cv-content-switcher-button owner-id="csb-3" :selected="isSelected(2)"
        >Other</cv-content-switcher-button
      >
    </cv-content-switcher>

    <section style="margin: 10px 0;">
      <cv-content-switcher-content owner-id="csb-1" class="flexme">
        <cv-tile>
          <h1>Hello</h1>
          <p>This is some tile content</p>
        </cv-tile>
        <cv-tile kind="expandable">
          <h1>Hello</h1>
          <p>This is some tile content</p>
          <template slot="below">
            <h2>More</h2>
            <ul>
              <li>This</li>
              <li>is some</li>
              <li>more</li>
              <li>content</li>
            </ul>
          </template>
        </cv-tile>
        <cv-tile kind="selectable" value="tile-1">
          <h1>Hello</h1>
          <p>This is some tile content</p>
          <template slot="below">
            <h2>More</h2>
            <ul>
              <li>This</li>
              <li>is some</li>
              <li>more</li>
              <li>content</li>
            </ul>
          </template>
        </cv-tile>
      </cv-content-switcher-content>
      <cv-content-switcher-content owner-id="csb-2">
        <cv-button>Default/Primary</cv-button>
        <cv-button kind="secondary">Secondary</cv-button>
        <cv-button kind="tertiary">Tertiary</cv-button>
        <cv-button kind="ghost">Ghost</cv-button>
        <cv-button kind="danger">Danger</cv-button>
        <cv-button kind="danger--primary">Danger-Primary</cv-button>
      </cv-content-switcher-content>
      <cv-content-switcher-content owner-id="csb-2">
        <cv-checkbox label="Checkbox 1" value="value-1"></cv-checkbox>
        <cv-checkbox label="Checkbox 2" value="value-2"></cv-checkbox>

        <cv-radio-group>
          <cv-radio-button name="test" value="test-1" label="test-1" checked />
          <cv-radio-button name="test" value="test-2" label="test-2" />
          <cv-radio-button name="test" value="test-3" label="test-3" />
        </cv-radio-group>
      </cv-content-switcher-content>
      <cv-content-switcher-content owner-id="csb-3">
        <cv-dropdown value="value">
          <cv-dropdown-item value="10">Option with value 10</cv-dropdown-item>
          <cv-dropdown-item value="20">Option with value 20</cv-dropdown-item>
          <cv-dropdown-item value="30">Option with value 30</cv-dropdown-item>
          <cv-dropdown-item value="40">Option with value 40</cv-dropdown-item>
          <cv-dropdown-item value="50">Option with value 50</cv-dropdown-item>
        </cv-dropdown>
        
        <br>
        <cv-progress :initialStep="2" :steps="['Start', 'Speed up', 'Travel', 'Slow down', 'Stop']" />
        <br>

        <cv-pagination :number-of-items="1250" />
      </cv-content-switcher-content>
    </section>
  </div>
</script>

script.babel

Vue.use(window["carbon-vue"].default);

new Vue({
    el: "#app",
    template: "#app-template",
    data() {
        return {
            yourName: "",
            notify: false,
            dataSelected: 0
        };
    },
    computed: {
        hello() {
            if (this.yourName.length) {
                return `Hello ${this.yourName}!`;
            } else {
                return "Hello Bob!";
            }
        },
        isSelected() {
            return (index) => this.dataSelected === index;
        }
    },
    methods: {
        sayHi() {
            alert(`Stay ${this.yourName}`);
        }
    }
});

scripts

<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/@carbon/vue@latest"></script>

style.css

body {
    background-color: #fff;
    padding: 2rem 3%;
}

.cv-text-input {
    margin-bottom: 1.5rem;
}

.flexme:not([hidden]) {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

styles

<link href="https://unpkg.com/carbon-components@latest/css/carbon-components.css" rel="stylesheet" />