Day 19 - UML x Component — Independent (上)

https://ithelp.ithome.com.tw/upload/images/20211004/201207543NH0ExSd94.png

前面把有依赖关系的 Component 都讲一讲之後,今天就来带过其他的 UI 元件吧,因为想介绍的元件还有点多,因此会区分成两天,今天主要讲的是 Navigation 类型的。

Breadcrumb

展示当前页面在整个网页的层级关系,其实就是把你的网址具现化,并给予更语义化的命名

https://ithelp.ithome.com.tw/upload/images/20211004/20120754fgX7HSQw40.png

使用起来会像这样:

https://ithelp.ithome.com.tw/upload/images/20211004/20120754Du4l0v855i.png

冷知识:breadcrumb 这个词的意思是面包屑,会这样取名其实是来自於童话故事「糖果屋」中的兄妹透过洒下面包屑来找到回家的路,而对应到网页则是能让你清楚你在网页中深入到哪里了,不会迷失在复杂的路由当中。

Stepper / Steps

网页中的路由 (Routing) 除了单纯的上下层级关系之外,也有很多是「步骤式」的,这时候就可以使用 Stepper (或是 Steps)来呈现!

使用起来也很直觉,通常会定义出 Stepper 作为容器,而在底下把 Step 给 map 出来。

同时可以再透过现在是处於哪个阶段来 Render 各阶段所要显示的内容。

https://ithelp.ithome.com.tw/upload/images/20211004/20120754gWsKhWAK0U.png

const steps = [
	'Select master blaster campaign settings',
	'Create an ad group',
	'Create an ad',
];

<Stepper activeStep={activeStep} alternativeLabel>
  {steps.map((label) => (
    <Step key={label}>
      <StepLabel>{label}</StepLabel>
    </Step>
  ))}
</Stepper>
// 下略

Tabs

Tabs 通常是在一个东西有多种种类或子项目时可以使用。
而 Tabs 要注意的是如果因应效能考量,希望 Tab Pane / Content 动态载入,而不是只是先被隐藏起来的话,需要做很多处理,也可能没办法那麽直觉地使用,API 的开法真的是有不少种,那这边就先把 Material-UI 跟
Ant Design 的实作方式都列出来,更详细的脉络跟实作会在 Day 27 时再跟大家说明清楚!

Material-UI

https://ithelp.ithome.com.tw/upload/images/20211004/20120754bGuMe9R1Hx.png

Ant Design

https://ithelp.ithome.com.tw/upload/images/20211004/20120754gM5lNXAGDp.png

<Tabs
  activeKey={1}
  onChange={onChangeHandler}
>
  <TabPane
    key="1"
    tab={(<Tab>Tab 1</Tab>)}
  >
    TabPane 1
  </TabPane>
  <TabPane
    key="2"
    tab={(<Tab disabled>Tab 2</Tab>)}
  >
    TabPane 2
  </TabPane>
  <TabPane
    key="3"
    tab={(<Tab>Tab 3</Tab>)}
  >
    TabPane 3
  </TabPane>
</Tabs>

而实际使用 Tabs 的情境可以是如下要来呈现不同的时间状态:

https://ithelp.ithome.com.tw/upload/images/20211004/20120754EFBbtBNGpH.png

Card

Card 其实没什麽好说的,挺简单也挺直觉的,就是像卡片一样用方形去呈现你的资讯,像这些都是卡片的使用情境:

https://ithelp.ithome.com.tw/upload/images/20211004/20120754RWZ82yvBVx.png

<Card title="Default size card" extra={<a href="#">More</a>}>
  <p>Card content</p>
  <p>Card content</p>
  <p>Card content</p>
</Card>

https://ithelp.ithome.com.tw/upload/images/20211004/20120754SCvaGtfyNg.png

Menu

Menu 其实也可以说是一个底层的 Component,它如其名就是选项的「菜单」,是用来呈现选项的 UI,而会用到 Menu 的有 Dropdown(下拉式选单)、 Select 和 SideMenu 等等。

https://ithelp.ithome.com.tw/upload/images/20211004/20120754dvNqvFcUXX.png

<div>
  <Button
    id="basic-button"
    aria-controls="basic-menu"
    aria-haspopup="true"
    aria-expanded={open ? 'true' : undefined}
    onClick={handleClick}
  >
    Dashboard
  </Button>
  <Menu
    id="basic-menu"
    anchorEl={anchorEl}
    open={open}
    onClose={handleClose}
    MenuListProps={{
      'aria-labelledby': 'basic-button',
    }}
  >
    <MenuItem onClick={handleClose}>Profile</MenuItem>
    <MenuItem onClick={handleClose}>My account</MenuItem>
    <MenuItem onClick={handleClose}>Logout</MenuItem>
  </Menu>
  </div>

小结

今天主要就是介绍导航相关的和几个额外的 UI 元件了,没什麽好总结的,明天会接着把我认为在网页中应该要知道的 UI 元件也介绍完。

那就明天见啦!


<<:  DAY22: 为甚麽要模组化?

>>:  Angular 客制弹出视窗

D11 - 如何用 Apps Script 寄出客制化的表单并搜集分散在 Google Sheet 中的回应?(ㄧ)复制并客制你的 Google Form

今日目标 很多时候我们会需要搜集些不同的资料。像是 Marketing 在做大规模但针对不同组织的调...

[DAY 19] 验算得分的理由及注意事项

上一次讲完了回应试算表 接下来要说说验算得分的部分 为什麽要验算得分 你可能会问 将google f...

Day 09 CORS 跨来源资源共用

阿修的说文解字 何谓 CORS? MDN 大大表示: CORS(Cross-Origin Resou...

[PoEAA] Data Source Architectural Pattern - Data Mapper

本篇同步发布於个人Blog: [PoEAA] Data Source Architectural P...

AE霓虹灯练习3-Day18

继昨天的练习,今天要完成 1.接下来制作灯管亮光的部分,将LOGO图层复制一层,并将最上方的图层改名...