スクリプトのお勉強

svelteのUIライブラリを使用してみる(TreeView)

投稿日:

前回の続きで、まずは、TreeViewを実現してみます。

Carbon Components Svelte

svelteのUIライブラリにCarbon Components Svelteを使用してみました。

色々あるのですが、まずはこれにしてみようかと思います。

理由としては、TreeViewをとりあえず使ってみたかったから、ということになります。

この中では、Smelteとかでもいいのですが、TreeViewがしょぼいので、とりあえず外しました。

TreeView仕様

TreeView仕様が以下です。

https://carbon-components-svelte.onrender.com/components/TreeView

準備

作ってみるまでの準備は以下です。

$ npx degit sveltejs/template treeview-svelte
$ cd treeview-svelte
### to use TypeScript run:
$ node scripts/setupTypeScript.js
$ npm install
$ npm i -D carbon-components-svelte
$ npm i -D carbon-icons-svelte

動作環境

動作環境は以下の通りです。

### WSL上
$ cat /etc/lsb-release
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=20.04
DISTRIB_CODENAME=focal
DISTRIB_DESCRIPTION="Ubuntu 20.04.2 LTS"
$ npm --version
6.14.15

テスト起動

起動方法は以下の通りです。

$ npm install
$ npm run dev

ソース

ここに置いておきました。

中心は以下です。

<TreeView
labelText="File Folder Sample"
{children}
bind:activeId
bind:selectedIds
on:select={({ detail }) => console.log("select", detail)}
on:toggle={({ detail }) => console.log("toggle", detail)}
on:focus={({ detail }) => console.log("focus", detail)}
/>

childrenが、TreeView用のデータです。

今のところはサンプルの通り実装しただけです。

画面

画面は以下のようになります。

svelteによるTreeView

終わりに

次はPython と連携してみたいと思います。

参考

  • UIライブラリの参考
    https://medium.com/mkdir-awesome/8-popular-svelte-ui-components-d2a3e43d70c3

-スクリプトのお勉強

執筆者:

関連記事

gradleのcommandLineでリダイレクト

gradleというビルドツールがあります。なぜかRPMを作成するのに使ってます。Ansibleも使ってるんですがね。。 それはともかく、ここの通りなのですが、例えばls -lRの出力を、プロジェクトデ …

PythonでAESを使用して暗号/復号する

1.つづき Pythonで、PKCS#12の公開鍵で暗号、秘密鍵で復号するプログラムの続きです。 今回はAESで暗号化/復号を行い、通信しながらRSA暗号/復号,AES暗号/復号を組み合わせたいと思い …

顔画像のモザイク方法(python + OpenCV + face_recognition)

Python3での顔画像モザイク方法 python3での顔画像モザイクの方法を調べてみました。 仕事とは関係なく、単なる趣味だったりしますが。。 この内容で、Djangoと統合する予定です。 Open …

Selenium + Python によるアップロードアプリの動作確認プログラム作成

私の周りでは、なぜかSeleniumが流行っている模様です。 私自身は、Webアプリ的なのも作ってますが、あまり使ってなかったので、使ってみようと思います。 前回作成した、Djangoのupload_ …

Nuxt.js – CRUDアプリケーションのフォーム/一覧を作成する

前回で作ったAPIのフロントエンドアプリケーションを作ろうと思います。 どういうアプリ? サンプルとして作ったAPIが住所録的だったので、住所録を作りました。 以下の機能があります。 登録(確認付き) …

google オプトアウト Click here to opt-out.