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

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

    ブロックコンポーネント

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

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

    ブロックのプロパティ

    PropTypeDefaultDescription
    <Block> properties
    insetbooleanブロックを挿入します。
    xsmallInsetbooleanアプリの幅が >= 480px のとき、ブロックを挿入します。
    smallInsetbooleanブロックを挿入します アプリの幅が >= 568px のときにブロックを挿入します
    mediumInsetbooleanブロックを挿入します アプリの幅が >= 768px の場合
    largeInsetbooleanブロックを挿入します アプリの幅が >= 1024px のときにブロックを挿入します
    xlargeInsetbooleanブロックの挿入を、アプリの幅が1200px以上の場合に行います。
    strongbooleanブロックコンテンツにハイライトとパディングを追加します。
    accordionListbooleanアコーディオンアイテム用のブロックラッパーの作成
    tabsboolean追加の "tobs" クラスを追加して、ブロックのタブラッパーとする
    tabbooleanブロックをタブとして使用する場合に、"tab "クラスを追加します。
    tabActivebooleanブロックがTabとして使われているときに "tab-active "クラスを追加して、アクティブなタブにする
    noHairlinesboolean外側の hairlines を削除する
    noHairlinesMdbooleanMDテーマの外側のhairlinesを削除した
    noHairlinesIosbooleaniOSテーマの外側のhairlinesが削除されました。
    noHairlinesAurorabooleanAuroraテーマの外側のhairlinesを削除しました。
    <BlockTitle> properties
    mediumbooleanブロックタイトルのサイズを中に変更
    largebooleanブロックタイトルのサイズを大にする

    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>
        
      
    );