Googleで検索し、セマンティックUIのドキュメントと問題のページ内で検索し、stackoverflow内で検索しました。答えが見つかりませんでした。
Semantic-ui-react内で、コンテンツが画面に固定されているサイドバーを作成するにはどうすればよいですか?私が現在持っているのはこれです:
<Sidebar.Pushable as={Segment}>
<Sidebar
id="sidebar"
as={Menu}
animation="overlay"
direction="right"
visible={this.state.visible}
vertical
inverted
>
{this.getMenuItems()}
</Sidebar>
<Sidebar.Pusher>
<Route path="/" component={Filler} />
</Sidebar.Pusher>
</Sidebar.Pushable>
Semantic-ui-reactのドキュメントにはWordが含まれていないようで、Sidebar.Pushable、Sidebar、またはメニュー項目のいずれかをposition:fixed;にしています。どちらも機能していないようです。
私はこれの助けを借りて粘着性のサイドバーを達成することができました answer 。
基本的に、無限スクロールページに固定されたサイドバーを作成するには、親コンテナの変換属性を削除する必要があると記載されています。その理由は、変換によって配置コンテキストがビューポートから回転した要素に変更されるためです。その結果、「固定」の子要素は、「絶対」の位置にあるかのように動作します。
これをsidebar.overridesファイルに追加しました
/* Page Context */
.pushable:not(body) {
transform: none;
}
.pushable:not(body) > .ui.sidebar,
.pushable:not(body) > .fixed,
.pushable:not(body) > .pusher:after {
position: fixed;
}
このソリューションは、基本のセマンティックUIライブラリを対象としています。 Semantic-ui-reactにはsemantic-uiが必要なため、これはsemantic-ui-reactサイドバーでも機能することになります。
以下のコードで試してみてください。
<Sidebar as={Menu} animation='overlay' icon='labeled' inverted vertical visible width='wide'>
<Menu.Item as={Link} to="/admin">
<Icon name='building' />
Rubykraft
</Menu.Item>
<Menu.Item as='a'>
<Icon name='user' />
Shan
</Menu.Item>
<Menu.Item as='a'>
<Icon name='user' />
Vishnu
</Menu.Item>
</Sidebar>
すべてが簡単です!
<Sidebar.Pusher style={{overflow: 'scroll', height: '100%'}}>
なぜこれが機能するのか、あなた自身が理解していると思います。
CSS/SCSSを使用して手動で行う必要があります。基本的に、高さを固定値に設定する必要があります。
@media only screen and (max-width: 768px) {
.ui.wide.left.sidebar, .ui.wide.right.sidebar {
height: 100vh !important;
position: absolute;
}
.pusher {
margin-left: 20px;
}
}
.pushable {
min-height: 100vh;
}
.ui.wide.left.sidebar, .ui.wide.right.sidebar {
height: 100vh;
position: fixed !important;
bottom: 0px !important;
top: 0px !important;
}
semantic-ui
のSidebar
モジュールのクラスを使用して、目的の固定サイドバーを作成しました。より多くのComponent
(ish)コードが必要な場合は、pusher
クラスを対応するSidebar.Pusher
コンポーネントに置き換える必要があります。
これが私のコードです:
import React, { Component } from 'react'
import { Dropdown, Icon, Input, Menu } from 'semantic-ui-react'
export default class MySidebar extends Component {
state = {}
handleItemClick = (e, { name }) => this.setState({ activeItem: name })
componentDidMount() {}
render() {
const { activeItem } = this.state
return(
<div className='pusher'>
<div className='full height'>
<div className='toc'>
<Menu className='inverted vertical left fixed'>
<Menu.Item>
Home
<Icon name='dashboard' />
<Menu.Menu>
<Menu.Item name='search' active={activeItem === 'search'} onClick={this.handleItemClick}>
Search
</Menu.Item>
<Menu.Item name='add' active={activeItem === 'add'} onClick={this.handleItemClick}>
Add
</Menu.Item>
<Menu.Item name='about' active={activeItem === 'about'} onClick={this.handleItemClick}>
Remove
</Menu.Item>
</Menu.Menu>
</Menu.Item>
<Menu.Item name='browse' active={activeItem === 'browse'} onClick={this.handleItemClick}>
<Icon name='grid layout' />
Browse
</Menu.Item>
<Menu.Item name='messages' active={activeItem === 'messages'} onClick={this.handleItemClick}>
Messages
</Menu.Item>
<Dropdown item text='More'>
<Dropdown.Menu>
<Dropdown.Item icon='edit' text='Edit Profile' />
<Dropdown.Item icon='globe' text='Choose Language' />
<Dropdown.Item icon='settings' text='Account Settings' />
</Dropdown.Menu>
</Dropdown>
</Menu>
</div>
<div className='article'>
<div>Content</div>
</div>
</div>
</div>
)
}
}
そしてスタイル:
.toc {
width: 200px;
}
.article {
margin-left: 210px;
}