ブロックReactコンポーネント

Block Reactコンポーネントは、Block / Content Block要素を表し、テキストコンテンツに追加のフォーマットと必要なスペースを追加するために設計されています。

ブロックコンポーネント

以下のコンポーネントが含まれています。

Block - メインのブロック要素
BlockTitle - ブロックのタイトルです。ブロックビューやリストビューの前に使用されます。
BlockHeader - 追加のヘッダー要素。ブロック要素の内側と外側の両方で使用できます。
BlockFooter - 追加のフッター要素です。ブロック要素の内側と外側の両方で使用できます。

ブロックのプロパティ

Prop	Type	Description
<Block> properties
inset	boolean	ブロックを挿入します。
xsmallInset	boolean	アプリの幅が >= 480px のとき、ブロックを挿入します。
smallInset	boolean	ブロックを挿入しますアプリの幅が >= 568px のときにブロックを挿入します
mediumInset	boolean	ブロックを挿入しますアプリの幅が >= 768px の場合
largeInset	boolean	ブロックを挿入しますアプリの幅が >= 1024px のときにブロックを挿入します
xlargeInset	boolean	ブロックの挿入を、アプリの幅が1200px以上の場合に行います。
strong	boolean	ブロックコンテンツにハイライトとパディングを追加します。
accordionList	boolean	アコーディオンアイテム用のブロックラッパーの作成
tabs	boolean	追加の "tobs" クラスを追加して、ブロックのタブラッパーとする
tab	boolean	ブロックをタブとして使用する場合に、"tab "クラスを追加します。
tabActive	boolean	ブロックがTabとして使われているときに "tab-active "クラスを追加して、アクティブなタブにする
noHairlines	boolean	外側の hairlines を削除する
noHairlinesMd	boolean	MDテーマの外側のhairlinesを削除した
noHairlinesIos	boolean	iOSテーマの外側のhairlinesが削除されました。
noHairlinesAurora	boolean	Auroraテーマの外側のhairlinesを削除しました。
<BlockTitle> properties
medium	boolean	ブロックタイトルのサイズを中に変更
large	boolean	ブロックタイトルのサイズを大にする

Examples

import React from 'react';
import {
  Page,
  Navbar,
  Block,
  BlockTitle,
  BlockHeader,
  BlockFooter,
} from 'framework7-react';

export default () => (
  
    
  <Page>
    <Navbar title="Content Block"></Navbar>
    <p>
      This paragraph is outside of content block. Not cool, but useful for any custom elements
      with custom styling.
    </p>

    <Block>
      <p>
        Here comes paragraph within content block. Donec et nulla auctor massa pharetra
        adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit
        amet quam mollis, vulputate turpis vel, sagittis felis.{' '}
      </p>
    </Block>

    <Block strong>
      <p>
        Here comes another text block with additional "block-strong" class. Praesent nec
        imperdiet diam. Maecenas vel lectus porttitor, consectetur magna nec, viverra sem.
        Aliquam sed risus dolor. Morbi tincidunt ut libero id sodales. Integer blandit varius
        nisi quis consectetur.{' '}
      </p>
    </Block>

    <BlockTitle>Block title</BlockTitle>
    <Block>
      <p>
        Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie
        velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis
        felis.{' '}
      </p>
    </Block>

    <BlockTitle>Another ultra long content block title</BlockTitle>
    <Block strong>
      <p>
        Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie
        velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis
        felis.{' '}
      </p>
    </Block>

    <BlockTitle>Inset</BlockTitle>
    <Block strong inset>
      <p>
        Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie
        velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis
        felis.{' '}
      </p>
    </Block>

    <BlockTitle>Tablet Inset</BlockTitle>
    <Block strong mediumInset>
      <p>
        Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie
        velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis
        felis.{' '}
      </p>
    </Block>

    <BlockTitle>With Header & Footer</BlockTitle>
    <Block>
      <BlockHeader>Block Header</BlockHeader>
      <p>
        Here comes paragraph within content block. Donec et nulla auctor massa pharetra
        adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit
        amet quam mollis, vulputate turpis vel, sagittis felis.{' '}
      </p>
      <BlockFooter>Block Footer</BlockFooter>
    </Block>

    <BlockHeader>Block Header</BlockHeader>
    <Block>
      <p>
        Here comes paragraph within content block. Donec et nulla auctor massa pharetra
        adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit
        amet quam mollis, vulputate turpis vel, sagittis felis.{' '}
      </p>
    </Block>
    <BlockFooter>Block Footer</BlockFooter>

    <Block strong>
      <BlockHeader>Block Header</BlockHeader>
      <p>
        Here comes paragraph within content block. Donec et nulla auctor massa pharetra
        adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit
        amet quam mollis, vulputate turpis vel, sagittis felis.{' '}
      </p>
      <BlockFooter>Block Footer</BlockFooter>
    </Block>

    <BlockHeader>Block Header</BlockHeader>
    <Block strong>
      <p>
        Here comes paragraph within content block. Donec et nulla auctor massa pharetra
        adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit
        amet quam mollis, vulputate turpis vel, sagittis felis.{' '}
      </p>
    </Block>
    <BlockFooter>Block Footer</BlockFooter>

    <BlockTitle large>Block Title Large</BlockTitle>
    <Block strong>
      <p>
        Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie
        velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis
        felis.{' '}
      </p>
    </Block>

    <BlockTitle medium>Block Title Medium</BlockTitle>
    <Block strong>
      <p>
        Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie
        velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis
        felis.{' '}
      </p>
    </Block>
  </Page>
    
  
);