Panorama-板

From Valve Developer Community
Jump to: navigation, search
English (en)Русский (ru)中文 (zh)Translate (Translate)

一部分板可以被用在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" />
Note.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>
Note.png注意:每个下拉列表中的元素都必须具有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" />