How to use the Design System with custom field-types?

IMPOrtant:

Note that blok.ink loads the recent version of the design systems for field-type development.

It's possible to use our Design System in custom field-types.

To do that, we first have to clone the repository for the local development plugin.

Then we need install the design system in the cloned storyblok-fieldtype project:

        
      npm install storyblok-design-system --save

Or with Yarn:

        
      yarn add storyblok-design-system

Loading a specific component

Now, we can import a specific component directly from Design System. Open src/Plugin.vue and add the code below. You need to import the component that you want to use (Line 23) and use it in Vue as a component (Line 27) . Then you will be able to use it in your template (Line 3).

src/Plugin.vue

        
      <template>
  <div>
    <SbRadio
      name="radio-inline"
      id="selected"
      label="Jon Doe"
      v-model="model.selected"
      native-value="Jon Doe"
      inline
    />
    <SbRadio
      name="radio-inline"
      id="unselected"
      label="Albert Einstein"
      v-model="model.selected"
      native-value="Albert Einstein"
      inline
    />
  </div>
</template>
 
<script>
import { SbRadio } from 'storyblok-design-system'
export default {
  mixins: [window.Storyblok.plugin],
  components: {
    SbRadio,
  },
  methods: {
    initWith() {
      return {
        // needs to be equal to your storyblok plugin name
        plugin: 'enter-your-field-type-name',
        selected: '',
      }
    },
  },
  watch: {
    'model': {
      handler: function (value) {
        this.$emit('changed-model', value);
      },
      deep: true
    }
  }
}
</script>
 
<style>
.sb-radio {
  margin: 8px;
}
</style>