粘土のデザインパターンの適用
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。
Liferay DXP 7.1は、Liferayの Lexicon Experience LanguageのWeb実装である Clay使用し
。 Lexicon Experience Languageは、アプリケーションUIのスタイルガイドラインとベストプラクティスを提供します。 ClayのCSS、HTML、およびJavaScriptコンポーネントにより、開発者は完全に実現されたUIを迅速かつ効果的に構築できます。 Liferay DXPの 互換性レイヤー 、 Clay CSSとともに Lexicon CSS マークアップを使用できます。
このセクションでは、ClayをHTMLマークアップに適用する方法を示します。 たとえば、これはLiferay Portal 6.2 Lunar Resortの予約フォームです。
<p>
Thanks for choosing to stay at the Liferay Lunar Resort! Please fill out the
form below to book your stay. We know you have a choice in where to stay on
the Moon...
oh wait no you don't. Thanks for picking us anyways. We'll see you soon on
the Moon!
</p>
<form class="form-horizontal">
<fieldset>
<legend>Reservation Form</legend>
<div class="control-group">
<label class="control-label" for="inputName">Name</label>
<div class="controls">
<input type="text" id="inputName"
placeholder="Enter your Name here" required="required">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="email" id="inputEmail"
placeholder="Enter your E-Mail here" required="required">
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn">Submit</button>
</div>
</div>
</fieldset>
</form>
<p style="padding-bottom:25px;">
Thanks again for booking with Liferay. When you book with Liferay, you
remember your stay. Please take a moment to fill out our guestbook below.
</p>
上記のHTMLコードは、Bootstrap 2のマークアップとCSSクラスを使用しています。 Lunar Resortフォームの更新されたClayマークアップは次のとおりです。
<p>
Thanks for choosing to stay at the Liferay Lunar Resort! Please fill out the
form below to book your stay. We know you have a choice in where to stay on
the Moon...
oh wait no you don't. Thanks for picking us anyways. We'll see you soon on
the Moon!
</p>
<form role="form-horizontal">
<fieldset>
<legend>Reservation Form</legend>
<div class="form-group">
<label for="inputName">Name</label>
<input type="text" id="inputName" class="form-control"
placeholder="Enter your Name here" required="required">
</div>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" id="inputEmail" class="form-control"
placeholder="Enter your E-Mail here" required="required">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit
</button>
</div>
</fieldset>
</form>
<p style="padding-bottom:25px;">Thanks again for booking with Liferay. When
you book with Liferay, you remember your stay. Please take a moment to fill
out our guestbook below.</p>
フォームに適用されるクレイの更新は次のとおりです。
コントロールグループクラスは、フォームグループクラスに更新されました。コントロールラベルクラスは、ラベル要素から削除されました。<div class=""controls>要素が削除されました。フォームコントロールクラスは、各入力要素に追加されました。- フォームの送信ボタンを強調するために、
btn-primaryクラスが追加されました。
テーマのHTMLファイルに同様のClayパターンを適用できます。
テーマをLiferay DXP 7.1 \に更新しました！ テーマプロジェクトから展開できます。 ユーザーは、アップグレードしたテーマで作成した視覚スタイルを引き続き楽しむことができます。