kaf.js sample 09

by mtsgi

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mtsgi/kitstrap/d/0.5/kitstrap.css">
<main id="kaf">
  <h2 kit-i>{{ title }}</h2>
  <p kit-i>{{ desc }}</p>
  <pre kit-i>{{ desc }}</pre>
  <div class="kit-text-c">
    <a class="kit-button" kit-i>{{ more }}</a>
  </div>
  
  <div class="kit-text-c m-t">
    <a class="kit-hl" kit:assign="__locale 'en'">English</a>｜
    <a class="kit-hl" kit:assign="__locale 'ja'">日本語</a>｜
    <a class="kit-hl" kit:assign="__locale 'zh'">中文</a>｜
    <a class="kit-hl" kit:assign="__locale 'de'">Deutsch</a>｜
    <a class="kit-hl" kit:assign="__locale 'fr'">Français</a>
  </div>
</main>

JavaScript

import Kaf from 'https://mtsgi.github.io/kafjs/kaf.js';

const kaf = new Kaf({
  elem: '#kaf',
  locale: 'en',
  dictionary: {
    en: {
      title: 'Welcome!',
      desc: 'kaf.js is a javascript framework to build the application on websites.',
      more: 'View more'
    },
    ja: {
      title: 'ようこそ！',
      desc: 'kaf.jsは、webサイト上でアプリケーションを構築するJavaScriptフレームワークです。',
      more: 'もっと見る'
    },
    zh: {
      title: '欢迎你！',
      desc: 'kaf.js是一个javascript框架，用于构建网站上的应用程序。',
      more: '查看更多'
    },
    de: {
      title: 'Willkommen!',
      desc: 'kaf.js ist ein Javascript-Framework zur Erstellung der Anwendung auf Websites.',
      more: 'Mehr dazu'
    },
    fr: {
      title: 'Bienvenue!',
      desc: 'kaf.js est un framework javascript pour construire l\'application sur les sites web.',
      more: 'En savoir plus'
    }
  }
});