TIL/20210727

7622 ワード
TIL テキストリンク

今日やったこと


ワイヤフレームベースのビールリストページ,ビール詳細ページUIを作成した.
そして本プロジェクトで使用するRedux Toolkitについて学びました.
設計作業を繰り返し、cssの感覚を徐々に熟知していく.

学習内容記録


1.react-slickによる分類処理
モバイルビューでは合計9つのカテゴリを一度に表示するのは難しいと思います.
カテゴリリストをslick-carouselでスライド処理した.
リストで特定のカテゴリをクリックすると、そのページにアクセスできます.

import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

const BeerType = ({ items, setIs_Search }) => {
    const settings = {
        infinite: false,
        speed: 200,
        slidesToShow: 5,
        slidesToScroll: 3,
        variableWidth: true,
        arrows: false,
    };

    return (
        <Container>
            <StyledSlider {...settings}>
                {true && items?.map((item, idx) => (
                    <div 
                        onClick={() => {
				 history.push(`/beer/list/${item._id}`)
                        }} key={idx}>
                        {item.name}
                    </div>
                ))}
            </StyledSlider>
        </Container>
    );
}

export default React.memo(BeerType);
2.ボタンをクリックするかどうかを識別し、異なる視覚設計を適用するために、
ボタンラベルにfocusを適用できます.
ネイバーや三星(サムスン)ネットワークなどのブラウザや手首の保護は不可能だという点をさらに考慮しなければならない.
const ButtonContainer = styled.div`
    button {
        :focus {
            border: none;
            border-bottom: 2px solid #eee;
        };
    }
`;
3.特定のボタン以外に適用したい場合は、使用しないでください.
:IE規格に合わなくても使いにくいです.
button {
        :not(:first-child, :last-child):focus {
            background: #f56f98;
            border: 1px solid #f56f98;
            color: #fff;
    }
20.12.04-10日
[Phothon]ポンキモン