ShardsVue入門

投稿日: 2022-04-20 2022-10-06
タグ: Vue.js

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の詳細については、次のリンクをたどることができます。

getdocs

13036