Panorama-板

一部分板可以被用在Panorama UI 中。

你也可以通过Panorama Debugger(en)检视所有已有的板，了解它的构造。

或者通过JS API:Javascript API(en) 学习如何控制这些板。

基础板-panel

一个空的板元素。一般用于继承、布局和边界。和HTML中的“div”元素很像。

按钮-button

一个按钮而已。按钮本身不可见，但是可以通过添加子标签和图片，或者用CSS背景让它变得可见。

例子：

<Button id="ShuffleTeamAssignmentButton" onactivate="OnShufflePlayersPressed()">
	<Label text="#custom_game_team_select_shuffle" />
	<Image src="file://{images}/control_icons/shuffle.psd" />
</Button>

图片-Image

一个图片元素。所有游戏引擎支持的图片格式都被Panorama支持（PNG/PSD/TGA等等）。

例子：

<Image src="file://{images}/custom_game/my_image.png" />

注意：图片文件在content文件夹下，并且游戏树中会被自动编译为VTEX_C文件。因此在上面那个例子中，你的PNG文件应该放在这里：content/dota_addons/ADDON_NAME/panorama/images/my_image.png

Panaroma也支持一些别的定位和比例方式，在板范围内确定图片位置和大小。

• none
• stretch (the default)
• stretchx
• stretchy
• stretch-to-fit-preserve-aspect
• stretch-to-fit-x-preserve-aspect
• stretch-to-fit-y-preserve-aspect
• stretch-to-cover-preserve-aspect

例子:

<Image src="file://{images}/custom_game/my_image.png" scaling="stretch-to-fit-preserve-aspect" />

文本-Label

一个文本元素。 支持纯文本和HTML格式文本。强烈建议开发者们把所有字符放在本地化文件中，以便翻译成多语言文本。更多信息见：方言(en)

例子:

<Label text="Hello world!" />

HTML标签支持很多行内标签。受支持的属性如下：

• <b>Bold</b>
• <i>Italics</i>
• <em>Emphasis</em>
• <strong>Strong</strong>
• <h1>Heading 1</h1>
• <h2>Heading 2</h2>
• <br> - newline
• <p> - new paragraph
• <li>List Item</li>
• <a>Anchor</a> 多个属性受支持。这些属性可以是网页链接(例： "http://www.example.com"), 一个Panaroma事件 (例： "event:AddStyle( MyCustomClass )")详见事件(en), 或者一个JS代码函数 (例： "javascript:DoSomething()".
  • href - 点击anchor时切换
• <img src="file://{images}/custom_game/my_image.png">
• <span class="MyCustomClass">Some Text<span> - 推荐使用这个方法来处理单个标签（label）内不同的文本范围格式。参考类将从与XML文件相关的CSS文件中被加载。你也可以把 class="MyCustomClass" 放在其他范围的标签。 (例： <b>, <i>, <a>)
• <font color="#ff0000">Some Red Text<font> - 这个方法也是受支持的，但是最好还是通过类来处理标签范围。

例子:

<Label html="true" text="Click &lt;a href=&quot;http://www.example.com&quot;&gt;here&lt;a&gt;" />

文本入口

一个允许用户编辑的文本框。

例子:

<TextEntry id="MyEntry" maxchars="100" placeholder="在这里键入..." oninputsubmit="OnSubmitted()" />

下拉列表

在多个选项中选择一个。

例子：

<DropDown oninputsubmit="OnDropDownChanged()">
  <Label text="Entry 1" id="entry1"/>
  <Label text="Entry 2" id="entry2"/>
  <Label text="Entry 3" id="entry3"/>
  <Label text="Entry 4" id="entry4"/>
</DropDown>

注意：每个下拉列表中的元素都必须具有ID

切换按钮

一个按钮，在点击时切换其属性状态。经常以复选框的形式出现。

例子:

<ToggleButton checked="true" text="Checkbox 1" />
<ToggleButton text="Checkbox 2" />

单选按钮

同样具有一组选项，但同一时间只能选择一个。

例子:

<RadioButton checked="checked" group="Demo" id="Demo1" text="Radio button 1"/>
<RadioButton group="Demo" id="Demo2" text="Radio button 2"/>
<RadioButton group="Demo" id="Demo3" text="Radio button 3"/>

Dota英雄图标

属于图片类，但是会自动显示dota英雄的图标。

你可以通过英雄名或者Heroid(?)来选择显示哪个英雄。

在选择英雄图标格式时，有三种格式可以选择：

• landscape - 128x72, 用于计分板。
• portrait - 71x94, 用于英雄选择。
• icon - 32x32, 用于小地图。

<DOTAHeroImage heroid="5" />
<DOTAHeroImage heroname="npc_dota_hero_nevermore" />
<DOTAHeroImage heroname="npc_dota_hero_pudge" heroimagestyle="portrait" />

DOTA玩家头像

为玩家的Steam ID显示Steam头像

用 steamid="local" 来表示本地玩家，或者用完整的64位steamID来表示其他玩家。

例子:

<DOTAAvatarImage steamid="local" />

DOTA物品图标

例子:

<DOTAItemImage id="myitem" itemname="xxxxitemNamexxx" />

DOTA技能图标

例子:

<DOTAAbilityImage id="myability" abilityname="xxxxabilityNamexxx" />

DOTA用户名

根据玩家的SteamID显示steam用户名。

用 steamid="local" 来表示本地玩家，或者用完整的64位steamID来表示其他玩家。

例子:

<DOTAUserName steamid="local" />