iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
自我挑戰組

30 天來點 Design System 系列

用了一堆有的沒的 Design System, 有得概念OK,有的用的氣噗噗。
不如就做一個屬於自己的吧!
自己做的菜最好吃,難吃也是自己難吃

以 React 為基礎建置

鐵人鍊成 | 共 30 篇文章 | 5 人訂閱 訂閱系列文 RSS系列文 團隊想吃薑母鴨
DAY 21

Day 21 建立 MenuItem

建立側邊欄可以展開的 Items MenuItem import React from "react"; import styled fro...

2020-10-06 ‧ 由 Edmond 分享
DAY 22

Day 22 建立 Alert

Alert import React, { Fragment } from 'react'; import propTypes from 'prop-types...

2020-10-07 ‧ 由 Edmond 分享
DAY 23

Day 23 建立 Input

Input 的部分包含 label 以及 輸入匡本體 value 輸入值 reqired 是否為必填 disabled 禁止輸入 errorMessage 錯...

2020-10-08 ‧ 由 Edmond 分享
DAY 24

Day 24 建立 Radio & Checkbox

會有以下幾種狀態: reqired 是否為必填 disabled 禁止輸入 Checkbox 實作: import React, { Fragment }...

2020-10-09 ‧ 由 Edmond 分享
DAY 25

Day 25 建立 下拉選單

Select import React, { useState, Fragment, useRef } from "react"; impo...

2020-10-10 ‧ 由 Edmond 分享
DAY 26

Day 26 建立 導覽相關組件

包含: breadcrumbs 麵包屑 steps 步驟 Breadcrumbs 實作 import React, { Fragment } from &q...

2020-10-11 ‧ 由 Edmond 分享
DAY 27

Day 27 建立 Switch

實作 import React, { useState } from 'react'; import propTypes from 'prop-types';...

2020-10-12 ‧ 由 Edmond 分享
DAY 28

Day 28 建立 RWD media query breakpoint

建立 RWD 的判斷斷點 const mediaXS = "@media only screen and (min-width: 360px)&quo...

2020-10-13 ‧ 由 Edmond 分享
DAY 29

Day 29 部署 package

註冊帳號 首先要註冊 npm 帳號 註冊頁面 註冊完後,登入你的帳號 npm login 成功後會顯示 logged in as {account} on h...

2020-10-14 ‧ 由 Edmond 分享
DAY 30

Day 30 建立 Dashboard 與部屬 storybook

完成後來試著用這些組建建立一個基本的 Dashbord 看起來還有很多要調整的地方... 在使用上 styled-jss 時有發現一些順序上的限制以及使用上的...

2020-10-15 ‧ 由 Edmond 分享