Reactを使用したBulmaCSSの概要

序章

Bullma は、ヘルパー、要素、およびコンポーネントを含むCSSフレームワークです。プロジェクトで信頼性が高く拡張可能なデザインにBulmaクラスとHTML構造を使用できます。

この記事では、ReactでのBulmaCSSフレームワークの最も一般的な実装の1つであるreact-bulma-componentsを使用します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Node.jsのローカル開発環境。 Node.jsをインストールしてローカル開発環境を作成する方法に従ってください。
Reactにある程度精通している。 React.jsシリーズのコーディング方法をご覧ください。

このチュートリアルは、ノードv16.2.0、npm v7.14.0、react v17.0.2、およびreact-bulma-componentsv4.0.4で検証されました。

プロジェクトの設定

create-react-app を使用してReactアプリを生成し、依存関係をインストールすることから始めます。

npx create-react-app react-bulma-components-example

新しいプロジェクトディレクトリに移動します。

cd react-bulma-components-example

これで、Reactアプリケーションを実行できます。

npm start

プロジェクトのエラーや問題を修正します。そして、Webブラウザでlocalhost:3000にアクセスします。

動作するReactアプリケーションができたら、react-bulma-componentsの追加を開始できます。

npm install [email protected]

この時点で、react-bulma-componentsを使用した新しいReactプロジェクトがあります。

要素とコンポーネントの調査

react-bulma-componentsライブラリは、Bulma要素、コンポーネント、フォーム、およびレイアウトをサポートします。

Buttonコンポーネントを使用した例を考えてみましょう。まず、Bulmaスタイルシートをインポートする必要があります。次に、コンポーネントをインポートする必要があります。

src / App.js

import 'bulma/css/bulma.min.css';
import { Button } from 'react-bulma-components';

function App() {
  return (
    <div className="App">
      <Button>Example</Button>
    </div>
  );
}

export default App;

これにより、ブルマスタイルのButtonが生成されます。

注：以前のバージョンのreact-bulma-componentsでは、コンポーネントのfullおよびlib固有のバージョンを指定できました。これはバージョン4.0で変更され、Bulmaがピア依存関係に変更され、スタイルシートをインポートする必要があります。

そこにあるほとんどのCSSフレームワークと同様に、Bulmaには、一般的なコンポーネントのスタイルと、要素にさまざまなクラスを追加することで実現できる一連のカスタマイズが付属しています。

react-bulma-componentsは、主要な要素ごとにコンポーネントを提供することで作業をさらに簡素化し、コンポーネントにプロパティを渡すためにクラス名を調整する必要をなくします。

dangerの色を使った、角が丸く輪郭のある大きなボタンを作りたいですか？

<Button
  color="danger"
  size="large"
  rounded
  outlined
>
  Example
</Button>

すべてのreact-bulma-componentsは、renderAsプロパティを受け入れることができます。これにより、コンポーネントのレンダリングに使用する要素の種類を定義できます。

デフォルトでは、Buttonコンポーネントはbutton要素としてレンダリングされます。 renderAsプロパティを使用して、リンクとしてレンダリングします。

renderAsプロパティに加えて、hrefも含めて、リンクをクリックしたときに送信先を指定する必要があります。

<Button
  renderAs="a"
  href="https://www.example.com"
  color="danger"
  size="large"
  rounded
  outlined
>
  Example
</Button>

実際、すべてのBulmaコンポーネントは、それらをスローする可能性のあるすべてのプロパティを受け入れることができます。つまり、styleプロパティを使用して高度なスタイル設定をいつでも実行したり、classNameを使用してCSSクラスを追加したりできます。

classNameを使用する場合、指定したクラスはすべて、ライブラリで生成されたBulmaクラス名のリストの前に追加されます。

色

最新のCSSフレームワークと同様に、Bulmaにはいくつかのセマンティック命名規則を使用するカラーテーマが付属しています。

これらのテーマカラーには、primary、link、info、success、warning、およびdangerが含まれます。

さらに、black、dark、light、およびwhiteの文字通りの色も利用できます。

色をサポートするコンポーネントは、colorプロパティを受け入れます。

<Button color="success">Example</Button>

これにより、レンダリングされた要素に正しいカラークラスが割り当てられます。このcolorプロパティは、レンダリングされた要素にクラスを割り当てるため、任意の色の値を割り当てることはできません。

サイズ

いくつかのコンポーネントはsizeプロパティを受け入れますが、異なるタイプの値を受け入れる場合があります。

これは、一部のコンポーネント（Headingなど）が数値を使用するためです。

<Heading size={1}>Large Heading</Heading>
<Heading size={2}>Not So Large Heading</Heading>

他の人（Buttonなど）はサイズにテキスト名を使用します。

<Button size="large">Large Button</Button>
<Button size="small">Small Button</Button>

テキストサイズを受け入れるコンポーネントの場合、small、normal、medium、およびlargeを使用できます。 normalサイズは、sizeが指定されていない場合にデフォルトで使用されるサイズです。

グリッドシステムの使用

Bulmaは、コンテンツを一貫した方法でレイアウトするのを支援するグリッドシステムもサポートしています。デフォルトでは、Bulmaはパーセンテージまたは列数を使用する12列のレイアウトを使用します。

まず、コンポーネントをインポートする必要があります。

import { Columns } from 'react-bulma-components';

12列のレイアウトに基づくサイズの場合、sizeを1と12の間の数値に設定します。

<Columns>
  <Columns.Column size={1}>One</Columns.Column>
  <Columns.Column>Eleven</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={2}>Two</Columns.Column>
  <Columns.Column>Ten</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={3}>Three</Columns.Column>
  <Columns.Column>Nine</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={4}>Four</Columns.Column>
  <Columns.Column>Eight</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={5}>Five</Columns.Column>
  <Columns.Column>Seven</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={6}>Six</Columns.Column>
  <Columns.Column>Six</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={7}>Seven</Columns.Column>
  <Columns.Column>Five</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={8}>Eight</Columns.Column>
  <Columns.Column>Four</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={9}>Nine</Columns.Column>
  <Columns.Column>Three</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={10}>Ten</Columns.Column>
  <Columns.Column>Two</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={11}>Eleven</Columns.Column>
  <Columns.Column>One</Columns.Column>
</Columns>

また、パーセンテージベースのサイズ設定では、sizeをone-fifth、one-quarter、one-third、half、[に設定できます。 X108X]、またはthree-quarters：

<Columns>
  <Columns.Column size="one-fifth">20%</Columns.Column>
  <Columns.Column>80%</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size="one-quarter">25%</Columns.Column>
  <Columns.Column>75%</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size="one-third">33.333333333%</Columns.Column>
  <Columns.Column>66.666666667%</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size="half">50%</Columns.Column>
  <Columns.Column>Also 50%</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size="two-thirds">66.666666667%</Columns.Column>
  <Columns.Column>33.333333333%</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size="three-quarters">75%</Columns.Column>
  <Columns.Column>25%</Columns.Column>
</Columns>

グリッドシステムへのこれら2つのアプローチは、合計でそれぞれ最大12列または100% rになります。

結論

この記事では、react-bulma-componentsを使用してBulmaのいくつかの機能について説明しました。

十分にサポートされ、適切に保守されているCSSフレームワークに依存することで、プロジェクトのスタイルと設計を行うことができます。それらは効率的な時間の節約になります。

詳細については、Bulmaドキュメントを参照してください。