Reactを使用したBulmaCSSの概要

投稿日: 2022-04-20 2022-10-24
タグ: css, React

序章

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

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

前提条件

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

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

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

プロジェクトの設定

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

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

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

cd react-bulma-components-example

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

npm start

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

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

npm install react-bulma-components@4.0.4

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

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

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

を使用した例を考えてみましょう 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 プロパティを追加するか、CSSクラスを追加します className.

使用する場合 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 利用可能。 The 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, two-thirds、また 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.

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

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

getdocs

13036