ShardsVue入門
提供:Dev Guides
Shards Vueは、美しくモダンなVue.js UIツールキットであり、次のアプリをキックスタートするために使用できる数十のカスタムビルド済みコンポーネントが含まれています。
ライブラリは、フットプリントを非常に小さくし、使いやすい強力なコンポーネントを提供することを目的として、ゼロから構築されました。
このライブラリは、コアのShardsUIキットおよびBootstrap4 に基づいているため、Bootstrap 4に既に精通している場合は、ShardsVueを使用しているときに自宅にいるように感じることができます。
ShardsVueの使用を開始するのは簡単です。
1. インストール
まず、プロジェクトの設定方法に応じて、npmまたはYarnを介してライブラリをインストールしてください。
$ yarn add shards-vue # Install via Yarn $ npm install shards-vue # Or install via NPM
2. 登録
次のステップは、ベースのシャードとブートストラップのスタイルシートを含め、アプリのエントリポイント内にライブラリを登録することです。 ほんの数行のコードでそれを達成できます。
import Vue from 'vue' import ShardsVue from 'shards-vue' import 'bootstrap/dist/css/bootstrap.css' import 'shards-ui/dist/css/shards.css' Vue.use(ShardsVue);
3. あなたは準備ができています!
それでおしまい! これで、Vueテンプレート内でShardsVueを使用して洗練されたユーザーインターフェイスを構築する準備が整いました。 これは、ShardsVueを使用して作成できるものの非常に小さな例です。
<template> <div class="main-wrapper"> <d-navbar toggleable="md" type="dark" theme="primary"> <d-container> <d-navbar-toggle target="nav-collapse"></d-navbar-toggle> <d-navbar-brand> <h6 class="text-white my-auto mr-4">Shards Vue</h6> </d-navbar-brand> <d-collapse is-nav id="nav-collapse"> <d-navbar-nav> <d-nav-item href="#">Home</d-nav-item> <d-nav-item href="#">About</d-nav-item> <d-nav-item href="#">Services</d-nav-item> </d-navbar-nav> </d-collapse> <d-btn theme="white" size="sm" outline>Contact</d-btn> </d-container> </d-navbar> <d-container class="py-4"> <h5 class="mb-4">Add New Post</h5> <d-card class="w-100"> <d-card-body class="p-3"> <d-form> <d-form-row> <d-input class="mb-3" placeholder="Post title" /> </d-form-row> <d-form-row> <d-textarea class="mb-3" placeholder="Post content" :rows="6" /> </d-form-row> <d-form-row class="justify-content-between"> <d-button size="sm" type="submit">Publish</d-button> <d-button size="sm" outline theme="warning" class="ml-auto">Cancel</d-button> </d-form-row> </d-form> </d-card-body> </d-card> </d-container> </div> </template> <style> .main-wrapper { background: #f9f9f9; min-height: 100vh; } </style>
結果のUIは次のとおりです。
リソースとリンク
Shards Vueの詳細については、次のリンクをたどることができます。