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">
  <a class="kit-hl" kit:assign="__locale 'en'">English</a>｜
  <a class="kit-hl" kit:assign="__locale 'ja'">日本語</a>
  <h2 kit-i>💾 {{ heading.data }}</h2>
  <p kit-i>{{ paragraph.data }}</p>
  <h2 kit-i>💡 {{ heading.events }}</h2>
  <p kit-i>{{ paragraph.events }}</p>
  <h2 kit-i>🌏 {{ heading.i18n }}</h2>
  <p kit-i>{{ paragraph.i18n }}</p>
  <h2 kit-i>📐 {{ heading.style }}</h2>
  <p kit-i>{{ paragraph.style }}</p>
</main>

JavaScript

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

const kaf = new Kaf({
  elem: '#kaf',
  locale: 'en',
  dictionary: {
    en: {
      heading: {
        data: 'Data binding',
        events: 'Kaf events',
        i18n: 'I18n support features',
        style: 'Style controlling'
      },
      paragraph: {
        data: 'KAF data is a fundamental feature of kaf.js.',
        events: 'The KAF events feature allows you to register JavaScript functions as events and manage them easily.',
        i18n: 'The kaf.js is the easiest way to make your website multilingual.',
        style: 'kaf.js has the ability to control scope-restricted styles with JavaScript object notation.'
      }
    },
    ja: {
      heading: {
        data: 'kafデータ',
        events: 'kafイベント',
        i18n: 'i18n支援機能',
        style: 'スタイル制御'
      },
      paragraph: {
        data: 'kafデータは、kaf.jsの根幹となる機能です。',
        events: 'kafイベントの機能を使うことで、JavaScriptの関数をイベントとして登録し、簡単に管理することができるようになります。',
        i18n: 'kaf.jsを使用することで、ウェブサイトの多言語対応を最も簡単に実現することができます。',
        style: 'kaf.jsはスコープの制限されたスタイルの制御をJavaScriptのオブジェクト記法で行うことができる機能を持っています。'
      }
    }
  }
});