メインコンテンツまでスキップ

インストールと使用

Mind Elixir Coreのインストールと使用の簡単な紹介。

インストール​

npm i mind-elixir -S

使用​

import MindElixir from 'mind-elixir'

let options = {
  el: '#map', // または HTMLDivElement
}

let mind = new MindElixir(options)

// 新しいマップデータの作成
const data = MindElixir.new('新しいトピック')
mind.init(data)

他の設定については完全な設定を参照してください。

警告

Mind Elixir Coreはマウントされるときにコンテナの高さが100％になるため、コンテナの高さを必ず設定してください。そうしないと表示が異常になります。

<div id="map"></div>
<style>
  #map {
    height: 500px;
    width: 100%;
  }
</style>

マインドマップの操作​

  • 操作は一般的なマインドマップアプリと基本的に同じです。
  • ショートカットはショートカットセクションで確認できます。
  • マウスの左クリックでノードをドラッグしたり、複数のノードを選択したりできます。
  • マウスの右クリックでキャンバスをドラッグできます。
  • "接続"を選択した後、別のノードをクリックすると、2つのノードを接続できます。

データのエクスポートと更新​

ユーザーがマインドマップを操作すると、データが変更されます。最新のデータを取得するには、getDataメソッドを呼び出すことができます。データの形式についてはデータのエクスポートを参照してください。

const data = mind.getData()

現在のマインドマップを新しいデータセット全体で更新する必要がある場合は、refreshメソッドを使用できます。

mind.refresh(data)

右から左への言語​

アラビア語、ヘブライ語、ペルシア語、ウルドゥー語のコンテンツには rtl: true と同梱のアラビア語ロケールを使用します：

import MindElixir from 'mind-elixir'
import { ar } from 'mind-elixir/i18n'

const mind = new MindElixir({
  el: '#map',
  rtl: true,
  contextMenu: { locale: ar },
})

rtl が変更するのはノードのテキスト、エディター、ラベル、コンテキストメニューの文字方向のみで、ブランチの配置軸（direction）には影響しません。その他のオプションは v6 API ガイド を参照してください。