シートを整理するために、UIElements は要素のスタイリングの方法として BEM を採用しています。BEM の使用は必須ではありませんが、推奨されます。
BEM は Block Element Modifier の略です。BEM はシンプルなシステムで、構造化され、あいまいでない、メンテナンスが簡単なセレクターを作成するのに役立ちます。BEM では、要素にクラスを割り当て、それらのクラスをスタイルシートのセレクターとして使用します。
BEM クラスには最大 3 つのコンポーネントがあります。
menu
、button
、list-view
menu**item
、 button**icon
、list-view__item
menu--disabled
、menu**item--disabled
、button--small
、list-view**item--selected
名前の各部分は、アルファベット文字、数字、ダッシュで構成されます。名前の各部分は、ダブルアンダースコア __
またはダブルダッシュ --
でつながれます。
次の例は、 メニューの XML コードを示しています。
<VisualElement class="menu">
<Label class="menu__item" text="Banana" />
<Label class="menu__item" text="Apple" />
<Label class="menu**item menu**item--disabled" text="Orange" />
</VisualElement>
各要素はその役割と外観を説明するクラスを備えているため、ほとんどのセレクターは 1 つのクラス名で作成できます。
.menu {
}
.menu__item {
}
.menu__item--disabled {
}
1 つのクラス名を使用して要素のスタイルが設定可能です。ただし、場合によっては、複雑なセレクターを使用する必要があります。例えば、 要素のスタイルがそのブロックのモディファイアに依存する場合は、複雑なセレクターを使用します。
.button {
}
.button__icon {
}
.button--small {
}
.button--small .button__icon {
}
長いセレクターを指定しないように注意してください。セレクターが長いと、UI のグラフィックデザインに矛盾がある可能性があります。また、BEM セレクターで型名 (Button
、Label
) や要素名 (#my-button
) を使用しないでください。
VisualElement
を BEM 対応にするUIElements は BEM に準拠しています。各ビジュアル要素には、必要なクラス名が設定されています。例えば、すべての TextElement
には unity-text-element
クラスがあります。TextElement
から派生した Button
の各インスタンスには、unity-button
クラスと unity-text-element
クラスを含むクラスリストがあります。
VisualElement
またはその子孫の 1 つから新しい要素を派生させる場合は、以下のガイドラインに従って、BEM 手法を使用して要素のスタイルを簡単に設定できます。
AddToClassList()
を使用して、関連する USS クラスを要素インスタンスに追加します。my-block**first-child
、my-block**other-child
Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.