Я пытаюсь использовать раскрывающийся компонент семантической реакции пользовательского интерфейса внутри компонента меню (приложение Meteor). Компонент всегда остается открытым и, что наиболее важно, полностью отображается внутри компонента меню.
а вот код:
render() {
const {
documents, columns, loading, className,
} = this.props;
const options = [
{
key: 'default',
value: 'default',
text: 'Default grid',
},
{
key: 'edit',
value: 'edit',
text: 'Edit grid',
},
];
return (
!loading ? (
<div className = "eb-list" >
<div className = "eb-list-toolbar" >
<Menu borderless icon = "labeled" >
<Menu.Item name = "add" onClick = {this.addDocument}><Icon name = "add" />Nuovo</Menu.Item>
<Menu.Item name = "edit" onClick = {this.editDocument}><Icon name = "edit" />Modifica</Menu.Item>
<Menu.Item name = "copy"><Icon name = "copy" />Duplica</Menu.Item>
<Menu.Item name = "mass"><Icon name = "tasks" />Modifica di massa</Menu.Item>
<Menu.Item name = "delete" onClick = {this.removeDocuments}><Icon name = "delete" />Elimina</Menu.Item>
<Menu.Item position = "right" header name = "className" >{className}</Menu.Item>
<Dropdown item icon = "" open = {false} trigger = {<Icon name = "grid layout" />} options = {options} />
</Menu>
</div>
<div className = "eb-list-content" >
<AutoSizer defaultHeight = {200} defaultWidth = {500} >
{({ height, width }) => (
<Table
data = {documents}
columns = {columns}
ref = {(t) => { this.handleTable = t; }}
onDoubleClickHandler = {this.handleDoubleClick}
height = {height}
width = {width}
/>
)}
</AutoSizer>
</div>
</div>) : <Loading />
CSS:
.eb-list {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
display: flex;
flex-direction: column;
}
.eb-list > .eb-list-content {
flex: 1 1 auto;
}
.eb-list > .eb-list-toolbar {
padding-bottom: 5px;
}
Я не могу понять, что делаю не так. Я наблюдаю такое же поведение с подкомпонентным API.
Кто-нибудь может мне помочь?





Решено!
Я забыл включить определение раскрывающегося списка в custom.semantic.json
{
"definitions" : {
"site": true,
"menu": true,
"icon": true,
"dropdown": true,
"modal": true,
"list": true
},
"themes": {
"amazon" : false,
"basic" : true,
"bookish" : false,
"bootstrap3" : false,
"chubby" : false,
"classic" : false,
"default" : true
}
}
Теперь все работает как положено!