Адаптивный макет с использованием Flexbox и Tachyons - PullRequest
Новая
       42

Адаптивный макет с использованием Flexbox и Tachyons

2 голосов
/ 25 апреля 2019

Я хотел бы создать макет, подобный этому:

enter image description here

Я хотел бы использовать React и Flex .

Для этого я использую Тахионы и это медиа-запросы:

  • ns = не маленький -> @media screen and (min-width: 30em) = [0, 30em]
  • m = средний -> @media screen and (min-width: 30em) and (max-width: 60em) = [30em, 60em]
  • l = большой -> @media screen and (min-width: 60em) = [60em, ∞]

Макет должен быть адаптивным.По сути, макет состоит из двух столбцов (на рабочем столе) или двух строк (на мобильном телефоне / планшете).В первый раз есть один столбец / строка (серый), когда пользователь щелкает по нему, появляется второй столбец / строка.

Это , что я пытаюсь.

Как видите, на рабочем столе все работает хорошо, у меня есть две колонки.На мобильном телефоне / планшете это не работает:

enter image description here

Тогда как я могу изменить макет события onClick? 

function App() {
  return (
    <div
      className="ba b--red bw1 w-100 h-100 flex flex-wrap flex-auto flex-row-l flex-column"
     >
      <div className="flex justify-center items-center bg-purple w-100 w-50-l h-100-l order-1"/>
      <div className="bg-orange flex flex-column justify-center w-100 w-50-l h-100-l order-2 pb4"/>
      </div> 
  )
}

const app = <App />;
const root = document.getElementById("react-root");
ReactDOM.render(app, root);
body, html {
    height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.9.0/tachyons.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react-root" className="h-100" style="height:100%"></div>

1 Ответ

1 голос
/ 25 апреля 2019

Вместо использования w-100 и w-50-l вы можете использовать flex-grow-1 на обоих внутренних делениях.И аналогично тому, что вы сделали с шириной, вы можете сделать с order , чтобы установить порядок как в мобильном, так и в настольном режиме - см. Упрощенную демонстрацию: 

body,html { height: 100%;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.9.0/tachyons.min.css" rel="stylesheet" />
<div id="react-root" class="h-100" style="height:100%">
  <div class="ba b--red bw1 w-100 h-100 flex flex-wrap flex-auto flex-row-l flex-column">
    <div class="flex justify-center items-center bg-purple h-100-l order-1-l order-2 flex-grow-1"></div>
    <div class="bg-orange flex flex-column justify-center h-100-l order-2-l order-1 flex-grow-1 pb4-l"></div>
  </div>
</div>

Теперь для реактивной части - вы можете переключаться между flex-grow-1 и flex-grow-0 красной секции при нажатиидругого раздела - см. демонстрацию ниже: 

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {toggle: false};
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(state => ({toggle: !state.toggle}));
  }
  render() {
    return (
      <div className="ba b--red bw1 w-100 h-100 flex flex-wrap flex-auto flex-row-l flex-column">
          <div className="flex justify-center items-center bg-purple h-100-l order-1-l order-2 flex-grow-1" onClick={this.handleClick}></div>
          <div className={`bg-orange flex flex-column justify-center h-100-l order-2-l order-1 pb4-l ${this.state.toggle ? 'flex-grow-1' : 'flex-grow-0'}`}></div>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById("react-root"));
html,body{height:100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.9.0/tachyons.min.css" rel="stylesheet" />
<div id="react-root" class="h-100"></div>
...