Vue コンポーネント ライブラリの推奨事項: Buefy の詳細な分析

Buefy は、Vue.js と Bulma CSS に基づくオープン ソース UI コンポーネント ライブラリで、美しく保守しやすい Web アプリケーションを迅速に構築できます。 Vue.js のライフ サイクルとコンポーネント化された性質により、Buefy はユーザーがコードをより明確に整理して使用できるように、明確に階層化されたコンポーネントをいくつか提供できます。

Buefy には、フォーム、タブ バー、モーダル ボックス、スライダー、日付ピッカー、カルーセル、プログレス バー、ダイアログ ボックス、メニュー、その他のコンポーネント、およびいくつかの補助ツールやその他のコンポーネントを含む、機能豊富なコンポーネントが多数付属しています。プラグイン。

この記事では、Buefy の主要コンポーネントとその使用方法について詳しく説明し、この便利なコンポーネント ライブラリについてより深く理解できるように、実用的なコード例を提供します。

インストール

Buefy の使用を開始する前に、Buefy を Vue.js アプリケーションにインストールする必要があります。次のように、npm パッケージ マネージャーを介してインストールできます。

npm install buefy

Buefy が正常にインストールされたら、Vue.js アプリケーションに Buefy を導入する必要があります。これを Vue.js コンポーネントに直接導入することも、グローバル Vue.js インスタンスに導入してアプリケーション全体で利用できるようにすることもできます。以下は、Vue.js コンポーネントで Buefy を参照するためのサンプル コードです。

<template>
  <div>
    <b-button>Click me</b-button>
  </div>
</template>

<script>
import Buefy from 'buefy';
import Vue from 'vue';

Vue.use(Buefy);
</script>

ここでは、Buefy を使用して単純なボタン コンポーネントを作成し、Vue.use() を通じて Vue.js インスタンスでそれを参照しています。方法 わかりました。

使用方法

Buefy をインストールして正常に参照できたので、その主要コンポーネントとその使用方法を詳しく見てみましょう。

フォーム

Buefy のフォーム コンポーネントは、入力、選択、チェックボックス、ラジオ ボタン、スイッチ コンポーネントなど、非常に強力です。 Buefy を使用した基本的なフォームの例を次に示します。

<template>
  <div>
    <b-field label="Username">
      <b-input placeholder="Enter your username"></b-input>
    </b-field>
    <b-field label="Password">
      <b-input type="password" placeholder="Enter your password"></b-input>
    </b-field>
    <b-field label="Gender">
      <b-radio-group>
        <b-radio name="gender">Male</b-radio>
        <b-radio name="gender">Female</b-radio>
      </b-radio-group>
    </b-field>
    <b-field label="Favorite Colors">
      <b-checkbox-group>
        <b-checkbox name="color">Red</b-checkbox>
        <b-checkbox name="color">Green</b-checkbox>
        <b-checkbox name="color">Blue</b-checkbox>
      </b-checkbox-group>
    </b-field>
    <b-field>
      <b-switch></b-switch>
      <span>Remember me?</span>
    </b-field>
    <b-field>
      <b-button type="is-primary">Submit</b-button>
    </b-field>
  </div>
</template>

<script>
import { BField, BInput, BRadioGroup, BRadio, BCheckboxGroup, BCheckbox, BSwitch, BButton } from 'buefy';
export default {
  components: {
    BField,
    BInput,
    BRadioGroup,
    BRadio,
    BCheckboxGroup,
    BCheckbox,
    BSwitch,
    BButton,
  },
};
</script>

このフォームには、入力、パスワード、ラジオおよび複数選択ボックス、スイッチ、送信ボタンなどのコンポーネントが含まれています。各コンポーネントは Buefy のフォーム フィールドに含まれており、フォーム入力の作成と管理をより簡単に行うことができます。

タブ バー

タブ バーは、ページ コンテンツをグループ化したり、ナビゲーション リンクをグループ化したりするために使用できる一般的な UI 要素です。 Buefy のタブ バーは非常に使いやすく、適切なタブを追加するだけです。 Buefy を使用した基本的なタブ バーの例を次に示します。

<template>
  <div>
    <b-tabs>
      <b-tab-item label="Home">
        Welcome to the homepage
      </b-tab-item>
      <b-tab-item label="Profile">
        Here is your profile information
      </b-tab-item>
      <b-tab-item label="Messages">
        You have 15 new messages
      </b-tab-item>
    </b-tabs>
  </div>
</template>

<script>
import { BTabs, BTabItem } from 'buefy';
export default {
  components: {
    BTabs,
    BTabItem,
  },
};
</script>

このタブ バーには、「ホーム」、「プロフィール」、「メッセージ」というタイトルの 3 つのタブが含まれています。各タグには、選択したタグに基づいて表示される対応するコンテンツがあります。

モーダル ボックス

モーダル ボックスは、いくつかのプロンプト、確認情報を表示したり、特定のコンテンツを強調表示したりするために使用できます。 Buefy のモーダルは非常に柔軟で、さまざまなニーズに合わせてカスタマイズできます。 Buefy を使用した基本的なモーダルの例を次に示します。

<template>
  <div>
    <b-button @click="showModal = true">Show Modal</b-button>
    <b-modal :active.sync="showModal">
      <p>Are you sure you want to delete this item?</p>
      <b-button type="is-danger" @click="deleteItem">Yes, delete it</b-button>
      <b-button @click="showModal = false">Cancel</b-button>
    </b-modal>
  </div>
</template>

<script>
import { BButton, BModal } from 'buefy';
export default {
  components: {
    BButton,
    BModal,
  },
  data() {
    return {
      showModal: false,
    };
  },
  methods: {
    deleteItem() {
      console.log('Item deleted!');
      this.showModal = false;
    },
  },
};
</script>

このモーダルには、クリックするとモーダルが表示される「モーダルを表示」ボタンが含まれています。モーダルにはテキストのほか、「はい、削除します」ボタンと「キャンセル」ボタンが含まれています。ユーザーが「はい、削除します」ボタンをクリックすると、deleteItem() メソッドが実行され、モーダル ボックスが閉じます。

スライダー

スライダーは、アプリケーションで数値を調整する必要がある場合に便利な UI コンポーネントです。 Buefy のスライダーには、スライダー フォーム コントローラーを使用できるように、複数のオプションとカスタム イベントが用意されています。 Buefy を使用した基本的なスライダーの例を次に示します。

<template>
  <div>
    <b-slider v-model="sliderValue" min="0" max="100"></b-slider>
    <p>{{ sliderValue }}</p>
  </div>
</template>

<script>
import { BSlider } from 'buefy';
export default {
  components: {
    BSlider,
  },
  data() {
    return {
      sliderValue: 50,
    };
  },
};
</script>

このスライダーでは、ユーザーは 0 から 100 までの値を調整できます。スライダーの位置はユーザーのドラッグに従って移動し、現在選択されている位置になります。値を以下に示します。

日付ピッカー

日付ピッカーは、ユーザーに日付または日付範囲を選択させる必要がある場合に非常に便利な UI コンポーネントです。 Buefy の日付ピッカーには、ラジオ、範囲、カレンダー ビューに加えて、カスタム カタログや週の開始日などのオプションが含まれています。 Buefy を使用した基本的な日付ピッカーの例を次に示します。

<template>
  <div>
    <b-datepicker v-model="selectedDate"></b-datepicker>
    <p>Date selected: {{ selectedDate }}</p>
  </div>
</template>

<script>
import { BDatepicker } from 'buefy';
export default {
  components: {
    BDatepicker,
  },
  data() {
    return {
      selectedDate: null,
    };
  },
};
</script>

この日付ピッカーを使用すると、ユーザーは日付を選択でき、選択した日付が下に表示されます。

プログレス バー

プログレス バーは、アプリケーションの操作の進行状況やステータスを表示するために使用できます。 Buefy のプログレス バーには、その外観と動作をより詳細に制御できるように、さまざまなスタイルとカスタマイズ オプションが付属しています。 Buefy を使用した基本的な進行状況バーの例を次に示します。

<template>
  <div>
    <b-progress :value="progressValue" :max="maxValue" type="is-primary"></b-progress>
    <p>Progress: {{ progressValue }}%</p>
    <b-button @click="increaseProgress">Increase Progress</b-button>
  </div>
</template>

<script>
import { BProgress, BButton } from 'buefy';
export default {
  components: {
    BProgress,
    BButton,
  },
  data() {
    return {
      progressValue: 25,
      maxValue: 100,
    };
  },
  methods: {
    increaseProgress() {
      if (this.progressValue < this.maxValue) {
        this.progressValue += 25;
      } else {
        this.progressValue = 0;
      }
    },
  },
};
</script>

この進行状況バーには、現在の進行状況と、進行状況の値を増加させ、最大値に達すると再起動する「進行状況を増やす」ボタンが表示されます。

結論

この記事では、Buefy の主要コンポーネントとその使用方法を詳しく説明し、この便利なコンポーネントのライブラリをより深く理解するのに役立つ実用的なコード例を提供しました。 。 Buefy は、初心者と経験豊富な開発者の両方が美しい Web アプリケーションを作成するために使用できる、使いやすく高度にカスタマイズ可能な UI フレームワークです。したがって、Vue.js を使用して Web アプリケーションを開発する場合、Buefy は非常に便利なツールとなるでしょう。

以上がVue コンポーネント ライブラリの推奨事項: Buefy の詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。