Skip to content

Latest commit

 

History

History
137 lines (89 loc) · 4.1 KB

app-bar-ja.md

File metadata and controls

137 lines (89 loc) · 4.1 KB
Raw
title components
App Bar コンポーネント
AppBar, Toolbar, Menu

App Bar

App Barには、現在の画面に関する情報と操作が表示されます。

top App Bar は、現在の画面に関連するコンテンツとアクションを提供します。 ブランディング、画面タイトル、ナビゲーション、およびアクションに使用されます。

It can transform into a contextual action bar or be used as a navbar.

シンプルなアプリバー

{{"demo": "pages/components/app-bar/ButtonAppBar.js", "bg": true}}

基本的な検索フィールド付きApp Bar

基本的な検索バー

{{"demo": "pages/components/app-bar/PrimarySearchAppBar.js", "bg": true}}

メニュー付き App Bar

{{"demo": "pages/components/app-bar/MenuAppBar.js", "bg": true}}

検索フィールド付きApp Bar

サイド検索バー

{{"demo": "pages/components/app-bar/SearchAppBar.js", "bg": true}}

Dense App Bar (デスクトップのみ)

{{"demo": "pages/components/app-bar/DenseAppBar.js", "bg": true}}

Prominent

A prominent app bar.

{{"demo": "pages/components/app-bar/ProminentAppBar.js", "bg": true}}

下部アプリバー

{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 400}}

ラベルの配置

アプリバーの位置を固定してレンダリングすると、要素の寸法はページの残りの部分に影響しません。 これにより、コンテンツの一部がアプリバーの背後で見えなくなる可能性があります。 以下に3つの解決策を示します。

  1. fixed の代わりに position="sticky" を使用できます。 ⚠️ stickyはIE 11ではサポートされていません。
  2. 2番目の <Toolbar /> コンポーネントをレンダリングできます:
function App() {
  return (
    <React.Fragment>
      <AppBar position="fixed">
        <Toolbar>{/* content */}</Toolbar>
      </AppBar>
      <Toolbar />
    </React.Fragment>
  );
}
  1. You can use theme.mixins.toolbar CSS:
const useStyles = makeStyles(theme => ({
  offset: theme.mixins.toolbar,
}))

function App() {
  const classes = useStyles();
  return (
    <React.Fragment>
      <AppBar position="fixed">
        <Toolbar>{/* content */}</Toolbar>
      </AppBar>
      <div className={classes.offset} />
    </React.Fragment>
  )
};

スクロール

useScrollTrigger() hookを使用して、ユーザーのスクロールアクションに 対応できます。

App Barを隠す

アプリバーは下にスクロールすると非表示になり、読み込めるスペースが増えます。

{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true}}

App Barを固定する

アプリバーはスクロール時に上昇し、ユーザーがページの上部にいないことを伝えます。

{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true}}

トップへ戻る

スクロール時にフローティングアクションボタンが表示され、ページの上部に簡単に戻ることができます。

{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true}}

useScrollTrigger([options]) => trigger

引数

  1. オプション (オプジェクト [任意]):
  • options.disableHysteresis (ブール値 [任意]): デフォルト値 false. ヒステリシスを無効にします。 trigger 値を決定するときにスクロール方向を無視します。
  • options.target (ノード [任意]): デフォルト地 window.
  • options.threshold (Number [optional]): デフォルトは100. 垂直スクロールがこのしきい値(排他的) を厳密に超えたときにtrigger 値を変更します。

戻り値

trigger：スクロール位置が基準に合っていますか？

例

import useScrollTrigger from '@material-ui/core/useScrollTrigger';

function HideOnScroll(props) {
  const trigger = useScrollTrigger();
  return (
    <Slide in={!trigger}>
      <div>Hello</div>
    </Slide>
  );
}