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

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 サイトの他の関連記事を参照してください。