dropdown 检查器类型用于从一组预定义选项中进行单项选择。下拉和设置属性的选项列表可以是静态的或动态的。静态选项通过属性定义的 options 元素来定义。
public function defineProperties()
{
return [
'unit' => [
'title' => 'Unit',
'type' => 'dropdown',
'default' => 'imperial',
'placeholder' => 'Select units',
'options' => ['metric' => 'Metric', 'imperial' => 'Imperial']
]
];
}生成的输出是一个字符串值,对应于所选选项,例如:
"unit": "metric"以下 配置值 常用。
| Property | Description |
|---|---|
| title | title for the property. |
| description | a brief description of the property, optional. |
| default | specifies a default string value, optional. |
| options | array of options for dropdown properties, optional if defining a get*PropertyName*Options method. |
选项列表可以在 Inspector 显示时从服务器动态获取。如果在下拉列表或集合属性定义中省略了 options 参数 选项列表被视为动态的。组件类必须定义一个返回选项列表的方法。该方法应具有以下格式的名称:get*PropertyName*Options,其中 Property 是属性名称,例如:getCountryOptions。该方法返回一个选项数组 以选项值作为键和以选项标签作为值。动态下拉列表定义的示例。
public function defineProperties()
{
return [
'country' => [
'title' => 'Country',
'type' => 'dropdown',
'default' => 'us'
]
];
}
public function getCountryOptions()
{
return ['us' => 'United states', 'ca' => 'Canada'];
}动态下拉列表和集合列表可以依赖其他属性。例如,州列表可以依赖于所选国家。依赖项使用属性定义中的 depends 参数声明。下一个示例定义了两个动态下拉属性,并且州列表依赖于国家。
public function defineProperties()
{
return [
'country' => [
'title' => 'Country',
'type' => 'dropdown',
'default' => 'us'
],
'state' => [
'title' => 'State',
'type' => 'dropdown',
'default' => 'dc',
'depends' => ['country'],
'placeholder' => 'Select a state'
]
];
}为了加载州列表,您应该知道 Inspector 中当前选择了哪个国家。 Inspector 将所有属性值 POST 到 getPropertyOptions 处理程序,因此您可以执行以下操作。
public function getStateOptions()
{
// Load the country property value from POST
$countryCode = post('country');
$states = [
'ca' => ['ab' => 'Alberta', 'bc' => 'British columbia'],
'us' => ['al' => 'Alabama', 'ak' => 'Alaska']
];
return $states[$countryCode];
}有时组件需要创建到网站页面的链接。例如,博客文章列表包含到博客文章详情页面的链接。在这种情况下,组件应该知道文章详情页的文件名(然后它可以使用 page Twig 过滤器)。October 包含一个用于创建动态下拉页面列表的助手。以下示例定义了 postPage 属性,该属性显示页面列表:
public function defineProperties()
{
return [
'postPage' => [
'title' => 'Post page',
'type' => 'dropdown',
'default' => 'blog/post'
]
];
}
public function getPostPageOptions()
{
return Page::sortBy('baseFileName')->lists('baseFileName', 'baseFileName');
}