前面把有依赖关系的 Component 都讲一讲之後,今天就来带过其他的 UI 元件吧,因为想介绍的元件还有点多,因此会区分成两天,今天主要讲的是 Navigation 类型的。
展示当前页面在整个网页的层级关系,其实就是把你的网址具现化,并给予更语义化的命名
使用起来会像这样:
冷知识:breadcrumb 这个词的意思是面包屑,会这样取名其实是来自於童话故事「糖果屋」中的兄妹透过洒下面包屑来找到回家的路,而对应到网页则是能让你清楚你在网页中深入到哪里了,不会迷失在复杂的路由当中。
网页中的路由 (Routing) 除了单纯的上下层级关系之外,也有很多是「步骤式」的,这时候就可以使用 Stepper (或是 Steps)来呈现!
使用起来也很直觉,通常会定义出 Stepper 作为容器,而在底下把 Step 给 map 出来。
同时可以再透过现在是处於哪个阶段来 Render 各阶段所要显示的内容。
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 要注意的是如果因应效能考量,希望 Tab Pane / Content 动态载入,而不是只是先被隐藏起来的话,需要做很多处理,也可能没办法那麽直觉地使用,API 的开法真的是有不少种,那这边就先把 Material-UI 跟
Ant Design 的实作方式都列出来,更详细的脉络跟实作会在 Day 27 时再跟大家说明清楚!
<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 的情境可以是如下要来呈现不同的时间状态:
Card 其实没什麽好说的,挺简单也挺直觉的,就是像卡片一样用方形去呈现你的资讯,像这些都是卡片的使用情境:
<Card title="Default size card" extra={<a href="#">More</a>}>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
Menu 其实也可以说是一个底层的 Component,它如其名就是选项的「菜单」,是用来呈现选项的 UI,而会用到 Menu 的有 Dropdown(下拉式选单)、 Select 和 SideMenu 等等。
<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 元件也介绍完。
那就明天见啦!
今日目标 很多时候我们会需要搜集些不同的资料。像是 Marketing 在做大规模但针对不同组织的调...
上一次讲完了回应试算表 接下来要说说验算得分的部分 为什麽要验算得分 你可能会问 将google f...
阿修的说文解字 何谓 CORS? MDN 大大表示: CORS(Cross-Origin Resou...
本篇同步发布於个人Blog: [PoEAA] Data Source Architectural P...
继昨天的练习,今天要完成 1.接下来制作灯管亮光的部分,将LOGO图层复制一层,并将最上方的图层改名...