Section header(セクションヘッダー)

セクションの先頭にタイトルや短い段落を表示したい場合は、以下をチェックしてください 👇

<section class="section">
    <div class="container">
        <div class="section-inner">
 
            <div class="section-header">
                <div class="container-xs">
                    <!-- Section title -->
                    <h2 class="mt-0 mb-16">Section title</h2>
                    <!-- Section paragraph -->
                    <p class="m-0">Section paragraph that can be longer.</p>
                </div>
            </div>
 
            <!-- Section content -->
 
        </div>
    </div>
</section>

セクションヘッダー用の React コンポーネントと Vue コンポーネントもあります。 /src/components/sections/partials の下にあり、このように使用できます 👇

<c-generic-section>
    <c-section-header :data="headerData" />
    <!-- Section content -->
</c-generic-section>

ご覧のとおり、コンポーネントはいくつかのデータ (つまり、タイトルとタイトル) を渡す必要があります…ここに例があります 👇

<script>
export default {
    // ... more required stuff
    data() {
        return {
            headerData: {
                title: "Section title",
                paragraph: "Section paragraph that can be longer."
            }
        };
    }
};
</script>

オブジェクトのプロパティ (タイトル、段落など) の 1 つを省略または空のままにして、表示されないようにすることができます。

Changing the title heading tag(タイトル見出しタグの変更)

tag prop を使用して、デフォルトのセクションタイトル <h2> を別の見出しに変更できます。

<c-generic-section>
    <c-section-header tag="h1" :data="headerData" />
    <!-- Section content -->
</c-generic-section>

属性一覧

React

Prop	Type	Default	Accepted values
`data`	object	–	Object should contain a `title` and a `paragraph`
`tag`	string	`h2`	`h1`, `h2`, `h3`

vue

Prop	Type	Default	Accepted values
`data`	object	–	Object should contain a `title` and a `paragraph`
`tag`	string	`h2`	`h1`, `h2`, `h3`

セクション分割パターン