iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Modern Web

Follow me! 來一場前端技能樹之旅系列 第 27

[Day 27 - 小試身手] Todolist with React (2)

在上一章Todolist with React (1),建立了專案環境、並且拆離 UI 設定好所有 Component 後,現在就讓我們使用套件 Styled-components 來為組件添加樣式。

上面是目前的畫面

這是預計實現的樣式

App Component

首先是最外層的 App Component,要設定

  • Wrapper:包覆內部所有元素,設定背景和大小。
  • Title:Todolist 標題樣式

App.js

import TaskList from "./TaskList";
import AddTask from "./AddTask";

function App() {
  return (
    <Wrapper>
      <Title>Todolist</Title>
      <AddTask />
      <TaskList />
    </Wrapper>
  );
}
import styled from "styled-components";

const Wrapper = styled.div`
  background-color: #3c5d95;
  height: 100vh;
  padding-top: 70px;
`;

const Title = styled.h1`
  margin: 0;
  text-align: center;
  font-weight: bold;
  font-size: 28px;
  letter-spacing: 2px;
  color: #ffc236;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
`;

清除 body margin / 設定字體

在 App.js 引入 CSS 檔 app.css ,清除 body 預設的 margin,並且設定網頁統一的字型樣式。

import "./app.css";

app.css

body {
  margin: 0;
  font-family: "Noto Sans TC", sans-serif;
}

AddTask Component

新增任務的區塊 AddTask Component,要設定:

  • Wrapper:包覆內部所有元素,指定元素的排列規則。
  • Input:輸入框區塊,&::placeholder 可以設定預設顯示文字的字體顏色。
  • AddBtn:新增按鈕區塊,利用巢狀寫法一定設定內部的圖片樣式。

AddTask.js

import addIcon from "../assets/icon/add.png";

function AddTask() {
  return (
    <Wrapper>
        <Input
          name="addtask"
          type="text"
          placeholder={"add new task ..."}
        />
      <AddBtn>
        <img src={addIcon} alt=""/>
      </AddBtn>
    </Wrapper>
  );
}
import styled from "styled-components";

const Wrapper = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 300px;
  margin: 25px auto 40px;
`;

const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  background-color: inherit;
  border: none;
  border-bottom: 2px solid #333;
  width: 300px;
  font-size: 16px;
  letter-spacing: 0.05em;

  &::placeholder {
    color: #333;
  }
`;

const AddBtn = styled.button`
  padding: 0;
  border: none;
  height: 27px;
  width: 27px;
  background-color: inherit;

  img {
    cursor: pointer;
  }
`;

TaskList Component

列出待辦事項,包含篩選器跟清單的 TaskList Component,要設定:

  • Wrapper:設定寬度,控制內部元素的範圍。
  • TaskItemContainer:任務清單區塊,設定任務 TaskItem 的排列方式。

TaskList.js

import Filter from "./Filter";
import TaskItem from "./TaskItem";

function TaskList() {
  return (
    <Wrapper>
      <Filter />
      <TaskItemContainer>
          <TaskItem />
          <TaskItem />
          <TaskItem />
      </TaskItemContainer>
    </Wrapper>
  );
}
import styled from "styled-components";

const Wrapper = styled.div`
  margin: 0 auto;
  width: 80%;
  max-width: 600px;
  min-width: 300px;
`;

const TaskItemContainer = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 30px 0;
  background-color: #f8f8f8;
`;

Filter Component

再來是篩選器 Filter Component,要設定:

  • ButtonContainer:設定內部按鈕的排列方式。
  • Button:指定按鈕樣式,&:hover 可以設定滑鼠移至按鈕的樣式。

Filter.js

function Filter() {
return (
    <ButtonContainer>
      <Button>ALL</Button>
      <Button>TODO</Button>
      <Button>DONE</Button>
    </ButtonContainer>
  );
}
import styled from "styled-components";

const ButtonContainer = styled.div`
  display: flex;
`;

const Button = styled.div`
  width: min-content;
  padding: 5px 10px;
  margin-right: 10px;
  background-color: #bebebe;
  border: none;
  border-bottom: 2px solid #3c5d95;
  border-radius: 3px 3px 0 0;
  color: white;
  letter-spacing: 0.1em;
  text-align: center;
  cursor: pointer;

  &:hover {
    background-color: #ffc236;
  }
`;

TaskItem Components

代表每個任務的 TaskItem Component,要設定:

  • Wrapper:設定整個任務方塊的大小和內部元素的排列方式
  • CheckBox:勾選框的樣式
  • TaskName:設定任務文字樣式
  • Button:刪除任務的按鈕樣式

TaskItem.js

function TaskItem() {
  return (
    <Wrapper>
      <CheckBox type="checkbox"/>
      <TaskName>NEW TASK</TaskName>
      <Button>Delete</Button>
    </Wrapper>
  );
}
import styled from "styled-components";

const Wrapper = styled.div`
  background-color: white;
  width: 80%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: 0.05em;
  padding: 0 20px;
`;

const CheckBox = styled.input.attrs({ type: 'checkbox' })`
  width: 18px;
  height: 18px;
  cursor: pointer;
`;

const TaskName = styled.div`
  flex-grow: 1;
  margin: 0 20px;
`;

const Button = styled.div`
  background-color: #bebebe;
  border: none;
  border-radius: 3px;
  padding: 5px 10px;
  width: min-content;
  color: white;
  letter-spacing: 0.05em;
  cursor: pointer;

  &:hover {
    background-color: #F5727E;
  }
`;


小結

這樣就完成了所有的樣式設定,建議大家在做的過程中,可以一段一段去觀察每個樣式會對網頁造成什麼樣的改變,進而去熟悉使用各式各樣的樣式。在下一篇文章,就來在 React 中加入 Redux,使用 React-redux 動態產生任務清單,那我們就明天見囉!

範例程式碼

如果文章中有錯誤的地方,要麻煩各位大大不吝賜教;喜歡的話,也要記得幫我按讚訂閱喔❤️


上一篇
[Day 26 - 小試身手] Todolist with React (1)
下一篇
[Day 28 - 小試身手] Todolist with React (3)
系列文
Follow me! 來一場前端技能樹之旅30

尚未有邦友留言

立即登入留言