カスタムポートレット内でのレイアウトの作成
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。
レイアウトテンプレートは、サイトページでのポートレットとコンテンツの整理方法を指定します。 代わりに、ポートレットのコンテンツを整理したい場合はどうしますか？ <aui> タグを使用すると、ポートレット内でBootstrapを使用してレイアウトを作成できます。 このチュートリアルでは、このプロセスについて説明します。
次の手順を実行します：
-
ポートレットのJSPを開き、まだ含まれていない場合はAUI taglib宣言を含めます。
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %> -
ポートレットのコンテンツを
<aui:container>タグラップします。 ポートレットのコンテンツの一部のみをレイアウトに含める場合は、その部分を<aui:container>タグでラップします。 -
<aui:container>...</aui:container>タグの間に、ポートレットのレイアウトで必要な行ごとに<aui:row>タグ セットを追加します。 -
行に含める列ごとに
<aui:col>タグ セットを追加します。 レイアウトの各行に対してこの手順を繰り返します。
完全な例を以下に示します。
<aui:container>
<aui:row>
<aui:col md="12">
<h1>My Custom Layout Portlet</h1>
</aui:col>
</aui:row>
<aui:row>
<aui:col md="4" sm="6">
<h2>Column One</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer eget pulvinar quam. Vivamus ornare leo libero, sed
mollis urna aliquam ac. Duis porta sapien non felis varius, in
iaculis orci fermentum. Etiam quis molestie elit, in tempor
risus. Morbi varius elementum lectus at feugiat. Quisque
dapibus orci ac dui eleifend, ut ullamcorper nulla sagittis.
Ut ac scelerisque sem.
</p>
</aui:col>
<aui:col md="8" sm="6">
<h2>Column Two</h2>
<p>
Aliquam hendrerit augue sed nisl ullamcorper pulvinar. Donec
tristique congue erat ac condimentum. Suspendisse vehicula
nunc vel velit imperdiet dapibus. In hac habitasse platea
dictumst. Morbi eleifend arcu sit amet magna faucibus, vitae
posuere erat finibus. Sed hendrerit convallis ipsum id luctus.
Aliquam aliquam consequat turpis eu vulputate. Nulla vitae
libero lorem. Proin nec lacus et nunc laoreet posuere.
Vestibulum euismod vestibulum faucibus. Vivamus dolor justo,
malesuada ac libero ac, feugiat varius leo. Integer viverra
nisi vel fringilla aliquam.
</p>
<p>
Suspendisse potenti. Mauris neque nisl, hendrerit a sem at,
rutrum dictum arcu. Ut aliquet tortor vel tortor interdum
dictum. Sed non sapien quam. Nunc aliquet in massa elementum
aliquam. Cras convallis tristique ante ut ultrices. Aenean
quis congue nulla. Integer in lacus lectus. Mauris maximus,
nibh sit amet pharetra laoreet, sem dolor eleifend metus, non
semper sem justo vel mauris. Praesent tristique quis risus
vulputate faucibus. Nullam feugiat diam vel elit pharetra, id
porta velit fringilla. Pellentesque metus justo, dictum et
dolor venenatis, pretium egestas massa. Donec risus nisi,
elementum in lectus id, imperdiet blandit mauris.
</p>
</aui:col>
</aui:row>
</aui:container>
2行目の列は、Bootstrapのグリッドクラスを利用してレスポンシブレイアウトを作成します。 中サイズのビューポートでは、 列-1 は幅33.33％、 列-2 は幅66.66％ですが、小サイズのビューポートでは 列-1 と 列-2 両方が50％幅です。
AUIレイアウトタグの属性
このセクションには、各タグで使用可能な属性のリストとその目的の簡単な説明が含まれています。
AUIコンテナー
<aui:container> タグは、 <aui:row> コンポーネントをラップして追加のスタイリングを提供するコンテナ <div> タグを作成します。
次の属性をサポートしています。
| 属性 | タイプ | 説明 |
|---|---|---|
| cssClass | ひも | コンポーネントをスタイリングするためのCSSクラス |
| dynamicAttributes | 地図<String, Object> | コンテナの データ 属性のマップ |
| 流体 | boolean | コンテナがビューポートの幅全体に広がるようにするかどうか。 デフォルト値はtrue |
| id | ひも | コンポーネントインスタンスのID |
AUI行
<aui:row> タグは、 <aui:col> コンポーネントを保持する行を作成します。
次の属性をサポートしています。
| 属性 | タイプ | 説明 |
|---|---|---|
| cssClass | ひも | コンポーネントをスタイリングするためのCSSクラス |
| id | ひも | コンポーネントインスタンスのID |
AUI Col
<aui:col> タグは、 <aui:row> コンポーネントのコンテンツを表示する列を作成します。
次の属性をサポートしています。
| 属性 | タイプ | 説明 |
|---|---|---|
| cssClass | ひも | コンポーネントのスタイルを設定するためのCSSクラス。 |
| id | ひも | コンポーネントインスタンスのID。 |
| lg | ひも | Boostrapグリッド col-lg-使用される1〜12の数字のカンマ区切り文字列 |
| md | ひも | Boostrapグリッド col-md-使用されるコンマ区切りの数字1〜12の文字列 |
| sm | ひも | Boostrapグリッド col-sm-使用されるカンマ区切りの数字1〜12の文字列 |
| xs | ひも | Boostrapグリッド col-xs-使用されるコンマ区切りの数字1〜12の文字列 |
| スパン | int | 含まれる行の列の幅（小数12）。 たとえば、スパンが4の場合、列の幅は含まれる行の合計幅の4/12（または1/3）になります。 |
| 幅 | int | 含まれる行の列の幅（パーセンテージ）。span属性をオーバーライドします。 次に、幅は（（width / 100）x 12）で表されるスパンに変換され、最も近い整数に丸められます。 たとえば、幅33は3.96に変換され、スパン値4に切り上げられます。 |
これで、ポートレット内にレイアウトを作成する方法がわかりました。