web-dev-qa-db-ja.com

antdで要素を非表示にする（Ant Design Grid）

特定のブレークポイントに到達したときにいくつかのdivを非表示にしたいのですが、bootstrap v4には次のようなものがあります：hidden-sm-down

グリッドのドキュメントを読んだ後、<Col xs={0}></Col>を設定することが解決策になる場合があります

これが私の例です： http://codepen.io/kossel/pen/BQgzNg?editors=011

ただし、xs={0}のみで期待されると、XSビューでサイドバーが非表示になりますが、すべての画面サイズで非表示になります。解決策/ハックは、sm={1}のような別のブレークポイントを追加して期待どおりに機能させることです。

これを行う正しい方法は何ですか？

antd
9
Yichaoz

私は自分の質問に答えるべきだった。これはバグではなく、意図された設計です。

読んだ後 https://github.com/roylee0704/react-flexbox-grid/issues/1

「xsのときに要素を非表示にする」という考え方は、実際にはレスポンシブデザインのアンチパターンです。アイデアは「smサイズを超える場合に表示する」である必要があります

「モバイルファースト」を念頭に置く必要があります。つまり、デフォルトでメニューを非表示にし（モバイルでは非表示にする必要があるため）、画面サイズに応じて表示する必要があります。

.sidebar { display: none; }そして

<Col sm={4}></Col>

しかし、本当に便利なものが必要な場合は、これもミックスインに追加しました。

@media (min-width: @screen-sm-min) {
  .visible-sm      { display: block !important; }
  .row.visible-sm  { display: flex !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: -webkit-box !important;
    display: flex!important; }
  table.visible-sm { display: table !important; }
  tr.visible-sm    { display: table-row !important; }
  th.visible-sm,
  td.visible-sm    { display: table-cell !important; }
  .flex-column-sm   {flex-direction: column; }
}
@media (min-width: @screen-md-min) {
  .visible-md      { display: block !important; }
  .row.visible-md  { display: flex !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: -webkit-box !important;
    display: flex!important; }
  table.visible-md { display: table !important; }
  tr.visible-md    { display: table-row !important; }
  th.visible-md,
  td.visible-md    { display: table-cell !important; }
  .flex-column-md   {flex-direction: column; }
}
@media (min-width: @screen-lg-min) {
  .visible-lg      { display: block !important; }
  .row.visible-lg  { display: flex !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: -webkit-box !important;
    display: flex!important; }
  table.visible-lg { display: table !important; }
  tr.visible-lg    { display: table-row !important; }
  th.visible-lg,
  td.visible-lg    { display: table-cell !important; }
  .flex-column-lg   {flex-direction: column; }
}
@media (min-width: @screen-xl-min) {
  .visible-xl      { display: block !important; }
  .row.visible-xl  { display: flex !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: -webkit-box !important;
    display: flex!important; }
  table.visible-xl { display: table !important; }
  tr.visible-xl    { display: table-row !important; }
  th.visible-xl,
  td.visible-xl    { display: table-cell !important; }
  .flex-column-xl   {flex-direction: column; }
}

@media (min-width: @screen-md-min) { .hidden-md { display: none !important; } }
@media (min-width: @screen-lg-min) { .hidden-lg { display: none !important; } }
@media (min-width: @screen-xl-min) { .hidden-xl { display: none !important; } }
/** utilities **/

.center-block {
  margin-right: auto !important;
  margin-left: auto !important;
  display:block;
}
5
Yichaoz

バグを見つけたかもしれません-または少なくとも、期待される結果を得るために複数のブレークポイントスパンを指定する必要があります。ただし、これはグリッド列を非表示にする有効な方法のようです。

AntdはCSSをReactと一緒に生成されたclassName値とともに使用します。コンポーネントを表示および非表示にする以外にグリッドを実際に使用していないため、メディアを使用して独自のクラスを作成することをお勧めしますクエリを実行し、classNameプロパティを介してコンポーネントに追加します。

これは、Form.Itemコンポーネントのコードの例です。

@media (max-width: @screen-sm-max) {
  .@{ant-prefix}-col-sm-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout();
  }
}

https://github.com/ant-design/ant-design/blob/6b8eeb79d11a53df3ff47bc525d0b7db714a8a2c/components/form/style/index.less#L274

LESSまたはCSSファイルでそのようなものを定義し、それをReactコンポーネントにインポートできます。LESSを使用して@ screen-sm-max変数にアクセスできます。次のようになります。

@import "~antd/lib/style/themes/default.less"

@media (min-width: @screen-sm-min) {
  .class-name-to-show-mobile-hide-desktop {
    display: none;
  }
}
@media (max-width: @screen-sm) {
  .class-name-to-show-desktop-hide-mobile {
    display: none;
  }
}

テーマ変数のカスタマイズに関する注意事項も参照してください。 https://ant.design/docs/react/customize-theme

ブートストラップのように再利用できる既存のユーティリティコンポーネントやクラスは見当たりませんでした。

1
rmarscher