Reactを使用したBulmaCSSの概要
序章
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スタイルシートをインポートする必要があります。 次に、コンポーネントをインポートする必要があります。
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ドキュメントを参照してください。