优步基础图库-组件库
Atlassian mCp集成：\ 该项目与Atlassian mCp连接，以增强文档和工作流支持。 - Atlassian mCp门户 - 确保您有访问权限和有效连接。 - 如果您在访问时遇到问题，请验证您的凭据 https://junojo.atlassian.net.
该项目包含基于Uber Base Gallery Figma设计系统构建的UI组件。
组件
1.按钮组件
一个最小的药丸形状的按钮，具有悬停和活动状态。
2.带开关组件的列表项
带有标签、段落和切换开关的iOS样式列表项。包括活动状态和禁用状态。
3.简单列表项组件
具有单个标签和底部分隔符的基本列表项组件。支持仅显示和交互模式（使用单击）。功能包括悬停和聚焦状态、键盘导航和响应式设计。非常适合简单的菜单、导航列表和选项选择。
4.卡片组件
一个多功能的卡片组件，包括媒体、标题、段落、尾随艺术品和动作按钮。具有带有骨架占位符和微光动画的加载状态。
4.消息卡组件
带有深色背景、艺术品、标题、段落、带箭头的第三个按钮和可选取消按钮的宣传或信息卡。非常适合发布公告和特别优惠。
5.代码输入组件
PIN码、验证码和OTP（一次性密码）输入的专用输入字段。每个数字都有单独的插槽，具有安全模式、多种状态（启用、活动、错误、只读、按下）、键盘导航和粘贴支持。
6.无线电列表项组件
带有集成单选按钮控件的列表项，用于从一组互斥选项中选择一个选项。功能启用、选择、禁用、悬停和按下状态，具有完全的辅助功能支持。
7.文本输入组件
一个多功能的文本输入字段，支持多种类型（文本、电子邮件、密码、电话、网址）、验证、图标和各种状态。具有密码可见性切换、清晰的输入选项和全面的可访问性支持。
8.媒体卡组件
一种用于显示媒体内容（视频、音频、图像）的专用卡组件，带有居中的播放按钮覆盖层。具有标题、段落、尾随艺术品（徽章/图标）、带播放按钮的媒体区域和操作按钮。非常适合教程、播客、网络研讨会和宣传视频内容。
9.横幅付款组件
金黄色背景、装饰性圆形元素和交互式行动号召的装饰性支付横幅。突出显示付款金额并鼓励用户操作。非常适合结账页面和付款流程。
10.分隔器组件
最小水平分隔线组件有两种变体：全宽（跨越整个宽度）和半宽（从偏移开始）。非常适合分隔部分、列表项或内容块。遵循优步的设计体系，采用微妙的灰色。
11.底部导航组件
移动应用程序的底部导航组件，主导航部分有图标和标签。具有活动状态指示、键盘导航和屏幕阅读器支持。非常适合具有3-5个主导航部分的移动优先应用程序。
12.搜索栏组件
一个双功能搜索栏，在一个紧凑的组件中结合了位置搜索和时间选择。具有突出的搜索部分，其中包含占位符文本和辅助时间选择器按钮。非常适合叫车、送货和预订应用程序。
13.横幅旋转木马组件
带有自动旋转和交互式分页点的促销横幅旋转木马。显示多个带有图像、标题、行动呼吁按钮和装饰背景的横幅。非常适合展示服务、促销活动或具有自动幻灯片功能的特色内容。
14.骑行选项组件
一个显示车辆信息、定价、等待时间和特殊徽章的乘车选择选项组件。具有带边框突出显示的选定状态、用于快速选项的“更快”徽章以及对原始/折扣定价的支持。非常适合网约车预订屏幕和车辆选择界面。
15.滤波器芯片组件
一种药丸形状的交互式芯片，用于在搜索界面中快速过滤和选择。显示带有可选图标和下拉箭头的标签。支持活动状态（黑色背景），非常适合时间选择、行程类型、乘客计数和其他快速过滤器。
16.位置列表项目组件
一个列表项组件，用于显示带有圆形图标、标题和副标题的位置选项。支持多种图标类型（星形、引脚、主页、工作）、可选分隔符和箭头指示器。非常适合搜索结果、最近位置和保存的地点列表。
17.模态表组件
一个底部表格模态组件，顶部有艺术品，专为信息对话框、确认和详细的内容演示而设计。具有流畅的动画、点击关闭的背景、Escape键支持和防身体滚动功能。非常适合需要优雅模态演示的移动优先应用程序。
18.进度步骤组件
一个水平步进器组件，显示多步过程的进度。用复选标记显示已完成的步骤，用数字显示当前步骤，用灰色显示即将进行的步骤。功能包括可配置的步骤数、可定制的标签、响应式设计和完全的可访问性支持。非常适合结账流程、入职培训、向导和多步骤表单。
19.横幅组件
用于显示重要消息、警报、警告、成功通知或一般公告的信息横幅组件。具有可定制的样式（警告、信息、成功、错误）、图标/插图支持、标题和段落文本。非常适合系统通知、用户反馈、促销信息和上下文信息。
图标库
从Uber UI设计系统中提取的完整SVG图标库，包含4个图标：
- 家：用于导航的房屋图标
- 服务：类别/服务的3x3网格图标
- 活动：带有活动/订单书签的文档/收据图标
- 账户：帐户部分的用户配置文件图标
所有图标都支持颜色和大小自定义。
import { IconHome, IconServices, IconActivity, IconAccount } from './components/Icons';
看 图标库指南 以获取完整的文档。
组件文件
图标库
src/components/Icons.jsx-所有图标组件src/components/Icons.css-图标实用程序样式guidelines/icons.md-完整的图标文档
按钮
src/components/Button.jsx-React组件src/components/Button.css-组件样式guidelines/button.md-完整的文档
带开关的列表项
src/components/ListItem.jsx-React组件src/components/ListItem.css-组件样式guidelines/list-item.md-完整的文档
简单列表项
src/components/SimpleListItem.jsx-React组件src/components/SimpleListItem.css-组件样式guidelines/simple-list-item.md-完整的文档
卡
src/components/Card.jsx-React组件src/components/Card.css-组件样式guidelines/card.md-完整的文档
留言卡
src/components/MessageCard.jsx-React组件src/components/MessageCard.css-组件样式guidelines/message-card.md-完整的文档
代码输入
src/components/CodeInput.jsx-React组件src/components/CodeInput.css-组件样式guidelines/code-input.md-完整的文档
无线电列表项
src/components/RadioListItem.jsx-React组件src/components/RadioListItem.css-组件样式guidelines/radio-list-item.md-完整的文档
文本输入
src/components/TextInput.jsx-React组件src/components/TextInput.css-组件样式guidelines/text-input.md-完整的文档
媒体卡
src/components/MediaCard.jsx-React组件src/components/MediaCard.css-组件样式guidelines/media-card.md-完整的文档
横幅付款
src/components/BannerPayment.jsx-React组件src/components/BannerPayment.css-组件样式guidelines/banner-payment.md-完整的文档
分隔线
src/components/Divider.jsx-React组件src/components/Divider.css-组件样式guidelines/divider.md-完整的文档
底部导航
src/components/BottomNavigation.jsx-React组件src/components/BottomNavigation.css-组件样式guidelines/bottom-navigation.md-完整的文档
搜索栏
src/components/SearchBar.jsx-React组件src/components/SearchBar.css-组件样式guidelines/search-bar.md-完整的文档
横幅旋转木马
src/components/BannerCarousel.jsx-React组件src/components/BannerCarousel.css-组件样式guidelines/banner-carousel.md-完整的文档
骑行选项
src/components/RideOption.jsx-React组件src/components/RideOption.css-组件样式guidelines/ride-option.md-完整的文档
滤波器芯片
src/components/FilterChip.jsx-React组件src/components/FilterChip.css-组件样式guidelines/filter-chip.md-完整的文档
位置列表项
src/components/LocationListItem.jsx-React组件src/components/LocationListItem.css-组件样式guidelines/location-list-item.md-完整的文档
模式表
src/components/ModalSheet.jsx-React组件src/components/ModalSheet.css-组件样式guidelines/modal-sheet.md-完整的文档
进度步骤
src/components/ProgressSteps.jsx-React组件src/components/ProgressSteps.css-组件样式guidelines/progress-steps.md-完整的文档
横幅
src/components/Banner.jsx-React组件src/components/Banner.css-组件样式guidelines/banner.md-完整的文档
设计规范
基于Figma节点 21149:269422:
- 背景:
#000000（反向/背景/背景反向初级） - 文本:
#FFFFFF（反向/内容/内容反向初级） - 字体：优步移动文本中，12像素，行高16像素
- 圆角半径：8像素
- 最小宽度：52像素
- 填充：水平8像素，垂直6像素
用法
按钮组件
import Button from './components/Button';
function App() {
return (
console.log('Clicked!')}
/>
);
}道具：
label（string）：按钮文本，默认为“标签”onClick（功能）：点击处理程序className（string）：其他CSS类
列表项目组件
import ListItem from './components/ListItem';
function App() {
return (
console.log('Toggle:', checked)}
/>
);
}道具：
label（字符串）：主标签文本paragraph（string）：次要描述性文本defaultChecked（boolean）：初始开关状态disabled（boolean）：禁用开关onChange（功能）：开关切换时回调className（string）：其他CSS类
简单列表项组件
import SimpleListItem from './components/SimpleListItem';
function App() {
return (
{/* Non-interactive list item */}
{/* Interactive list item */}
console.log('Profile clicked')}
/>
{/* Disabled interactive item */}
console.log('Clicked')}
disabled={true}
/>
);
}道具：
label（string）：要显示的文本内容（默认：“标签”）onClick（函数）：点击项目时可选回调。使项目具有交互性disabled（boolean）：是否禁用该项（默认值：false，仅在提供单击时适用）className（string）：其他CSS类
特征：
- 非交互式（仅显示）和交互式模式
- 交互式时的全键盘导航（Tab、Enter、Space）
- 视觉反馈（悬停、活动、聚焦状态）
- 带压痕的自动底部分隔器
- 符合WCAG 2.1 AA级标准
- 屏幕阅读器可访问
- 响应式设计
卡片组件
import Card from './components/Card';
function App() {
const [isLoading, setIsLoading] = useState(false);
return (
console.log('Button clicked!')}
/>
);
}道具：
heading（string）：主标题文本paragraph（string）：描述文本buttonLabel（字符串）：按钮文本mediaUrl（string）：顶部媒体图像的URLtrailingArtworkUrl（string）：尾随图标/徽章的URLonButtonClick（功能）：点击按钮时回调isLoading（boolean）：是否显示加载状态minLoadingTime（number）：最小加载持续时间（毫秒）（默认值：2000）disabled（boolean）：卡片是否已禁用className（string）：其他CSS类
备注：Card组件使用Figma自己的按钮设计，这与独立的不同 Button.jsx 组件。它们有不同的尺寸和风格，用于不同的目的。消息卡组件
import MessageCard from './components/MessageCard';
function App() {
const [showCard, setShowCard] = useState(true);
if (!showCard) return null;
return (
console.log('Learn more clicked')}
onDismiss={() => setShowCard(false)}
/>
);
}道具：
heading（字符串）：主标题文本（深色背景上的白色）paragraph（string）：描述文本（白色）buttonLabel（字符串）：按钮文本（箭头→ 自动附加）artworkUrl（string）：顶部艺术品/插图的URLonButtonClick（函数）：点击操作按钮时回调onDismiss（功能）：点击解除按钮时回调（提供解除按钮时启用）disabled（boolean）：卡片是否已禁用className（string）：其他CSS类ariaLabel（string）：卡片的自定义咏叹调标签
备注：消息卡具有深蓝色背景上的第三种按钮样式（仅带箭头的文本），与库中的其他按钮组件不同。
代码输入组件
import CodeInput from './components/CodeInput';
function App() {
const [code, setCode] = useState('');
const [error, setError] = useState(false);
const handleComplete = (value) => {
if (!validateCode(value)) {
setError(true);
} else {
console.log('Code validated:', value);
}
};
return (
);
}道具：
length（number）：数字槽数（默认值：4）label（string）：在输入上方标记文本hint（string）：输入下方的辅助文本showLabel（boolean）：显示/隐藏标签（默认值：true）showHint（boolean）：显示/隐藏提示（默认值：true）secure（布尔值）：安全模式显示点而不是字符（默认值：true）state（字符串）：视觉状态-“启用”、“活动”、“错误”、“只读”、“已按下”（默认值：“启用”）value（string）：受控值onChange（函数）：值更改时回调：(value: string) => voidonComplete（函数）：当所有槽位都被填满时进行回调：(value: string) => voiderrorMessage（string）：自定义错误消息disabled（boolean）：禁用输入（默认值：false）autoFocus（boolean）：自动聚焦第一个插槽（默认值：false）className（string）：其他CSS类
特征：
- 输入时自动前进到下一个插槽
- Backspace移动到上一个插槽
- 箭头键导航（←→）
- 粘贴对完整代码的支持
- 符合WCAG 2.1 AA级标准
- 键盘可访问
- 屏幕阅读器友好
- 暗模式支持
- 高对比度模式支持
- 减少运动支撑
无线电列表项组件
import RadioListItem from './components/RadioListItem';
function App() {
const [selectedOption, setSelectedOption] = useState('standard');
return (
{/* Radio Group */}
setSelectedOption(value)}
/>
setSelectedOption(value)}
/>
{/* Disabled option */}
);
}道具：
label（字符串）：主标签文本paragraph（string）：次要描述性文本name（string）：相关单选按钮的组名（默认值：“单选组”）value（string）：此单选选项的唯一值defaultSelected（boolean）：非受控模式的初始选定状态（默认值：false）selected（boolean）：受控选定状态（默认值：null）disabled（boolean）：是否禁用收音机（默认值：false）onChange（函数）：选中时回调，接收值：(value: string) => voidclassName（string）：其他CSS类
特征：
- 受控和非受控模式
- 群体内相互排斥的选择
- 全键盘导航（Tab、Space、Enter）
- 清晰的视觉反馈（悬停、按下、聚焦状态）
- 符合WCAG 2.1 AAA级标准
- 具有ARIA属性的屏幕阅读器支持
- 高对比度模式支持
- 减少运动支撑
- 触摸友好（64px宽的控制区域）
文本输入组件
import TextInput from './components/TextInput';
function App() {
const [email, setEmail] = useState('');
const [emailError, setEmailError] = useState('');
const validateEmail = (email) => {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
};
const handleEmailBlur = () => {
if (email && !validateEmail(email)) {
setEmailError('Please enter a valid email address');
} else {
setEmailError('');
}
};
return (
setEmail(e.target.value)}
onBlur={handleEmailBlur}
state={emailError ? 'error' : 'enabled'}
errorMessage={emailError}
required
/>
);
}道具：
label（string）：输入的标签文本（默认值：'Label'）hint（string）：输入下方的辅助文本（默认：“提示文本”）errorMessage（string）：要显示的错误消息（默认值：“”）placeholder（string）：占位符文本（默认值：''）value（字符串）：受控值（默认值：“”）type（字符串）：输入类型-“文本”、“电子邮件”、“密码”、“电话”、“网址”（默认值：“文本”）state（字符串）：视觉状态-“启用”、“活动”、“错误”、“只读”、“禁用”（默认值：“启用”）showLabel（boolean）：显示/隐藏标签（默认值：true）showHint（boolean）：显示/隐藏提示文本（默认值：true）required（boolean）：将字段标记为必填项（默认值：false）disabled（boolean）：禁用输入（默认值：false）autoFocus（boolean）：自动聚焦于挂载（默认值：false）maxLength（数字）：最大字符长度leftIcon（字符串）：左侧的图标/表情符号rightIcon（字符串）：右侧的图标/表情符号clearable（boolean）：有值时显示清除按钮（默认值：false）onChange（函数）：更改事件处理程序：(event) => voidonFocus（函数）：焦点事件处理程序：(event) => voidonBlur（函数）：模糊事件处理程序：(event) => voidonClear（功能）：清除按钮点击处理程序：() => voidclassName（string）：其他CSS类
特征：
- 具有特定类型行为的多种输入类型
- 密码可见性切换（显示/隐藏）
- X按钮可清晰输入
- 图标支持（左和右）
- 带错误消息的内联验证
- 必填字段指示符（\*）
- 符合WCAG 2.1 AA级标准
- 全键盘导航
- ARIA支持屏幕阅读器
- 触摸友好（最小高度48px）
- 高对比度模式支持
- 减少运动支撑
- 响应式设计
媒体卡组件
import MediaCard from './components/MediaCard';
function App() {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
// Simulate data loading
setTimeout(() => setIsLoading(false), 2000);
}, []);
return (
console.log('Play video')}
onButtonClick={() => console.log('View tutorial')}
/>
);
}道具：
heading（字符串）：主标题文本（默认：“heading”）paragraph（字符串）：描述文本（默认：“段落”）buttonLabel（字符串）：操作按钮文本（默认：“按钮”）mediaUrl（字符串）：媒体/视频缩略图的URL（默认值：“”）trailingArtworkUrl（string）：右上角徽章/图标的URL（默认值：''）onPlayClick（功能）：点击播放按钮时回调onButtonClick（函数）：点击操作按钮时回调isLoading（boolean）：是否用骨架显示加载状态（默认值：false）minLoadingTime（number）：最小加载持续时间（毫秒）（默认值：2000）disabled（boolean）：卡片是否禁用（默认值：false）className（string）：其他CSS类
特征：
- 媒体上的播放按钮覆盖视频/音频内容
- 右上角的尾随艺术品（徽章/图标）
- 使用动画骨架占位符加载状态
- 全键盘导航支持
- 符合WCAG 2.1 AA级标准
- 屏幕阅读器可访问
- 触摸友好型控制
- 高对比度模式支持
- 减少运动支撑
- 响应式设计
备注：媒体卡是专门为媒体内容（视频、播客、教程）设计的，带有突出的播放按钮。对于没有介质的一般内容卡，请使用标准 Card 组件。横幅支付组件
import BannerPayment from './components/BannerPayment';
function CheckoutPage() {
const [totalAmount, setTotalAmount] = useState('$89.99');
const handlePayment = async (amount) => {
console.log('Processing payment:', amount);
// Payment processing logic
};
return (
);
}道具：
amount（字符串）：要显示的付款金额（默认值：'₹170.71')currency（字符串）：货币符号（默认值：'₹')label（字符串）：金额上方的标签文本（默认值：“完成付款：”）actionLabel（字符串）：操作按钮文本（默认值：“支付”）onActionClick（函数）：点击动作时回调，接收金额作为参数className（string）：其他CSS类
特征：
- 带有圆形元素的金黄色装饰背景
- 突出显示付款金额
- 带箭头的交互式行动呼吁
- 全键盘导航（Tab、Enter、Space）
- 符合WCAG 2.1 AA级标准
- 屏幕阅读器可访问
- 触摸友好型操作按钮
- 高对比度模式支持
- 减少运动支撑
- 响应式设计
备注：横幅支付旨在用于结账和支付流程，以突出显示支付金额并鼓励用户采取行动。
分隔器组件
import Divider from './components/Divider';
function App() {
return (
{/* Full-width divider */}
Content section 1
Content section 2
{/* Half divider in list */}
User Name
User Name 2
);
}道具：
type（string）：分隔符类型-“全”或“半”（默认值：“全”）className（string）：其他CSS类
特征：
- 两种变体：全宽和半宽（带偏移）
- 可访问性的语义分隔符角色
- 响应式：适应移动屏幕
- 简约设计：1px高度，微妙的灰色（#E2E2E2）
- 符合WCAG 2.1 AA级标准
- 与屏幕阅读器配合使用
- 非常适合列表、部分和内容块
- 无需JavaScript
横幅旋转木马组件
import BannerCarousel from './components/BannerCarousel';
function App() {
const banners = [
{
title: 'Comfortable sedan\nrides',
backgroundColor: '#927023',
decorativeCircle: '#9a7a3a',
imageUrl: '/images/sedan.png',
imageAlt: 'Sedan car',
action: {
label: 'Book Premier',
onClick: () => console.log('Book Premier clicked')
}
},
{
title: 'Eco-friendly\noptions',
backgroundColor: '#2d7a2e',
decorativeCircle: '#3a8a3b',
imageUrl: '/images/electric.png',
imageAlt: 'Electric car',
action: {
label: 'Go Green',
onClick: () => console.log('Go Green clicked')
}
}
];
return (
console.log('Slide:', index)}
/>
);
}道具：
banners（array）：带有标题、背景色、装饰圈、imageUrl、imageAlt和动作的横幅对象数组autoPlayInterval（number）：幻灯片之间的间隔（毫秒）（默认值：5000）enableAutoPlay（boolean）：启用自动旋转（默认值：true）pauseOnHover（布尔值）：悬停时暂停旋转（默认值：true）showDots（布尔值）：显示分页点（默认值：true）onSlideChange（功能）：幻灯片更改时回调，接收索引className（string）：其他CSS类
特征：
- 可配置间隔的自动旋转
- 悬停时暂停以获得更好的用户体验
- 交互式分页点（单击导航）
- 全键盘导航（Tab、Enter、Space）
- 符合WCAG 2.1 AA级标准
- 屏幕阅读器可访问
- 触摸友好型控制
- 高对比度模式支持
- 减少运动支撑
- 响应式设计
备注横幅旋转木马专为自动旋转的促销内容而设计。每个横幅都可以有一个自定义背景、图像和行动呼吁按钮。
模态表组件
import ModalSheet from './components/ModalSheet';
import { useState } from 'react';
function App() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
setIsOpen(true)}>
Open Modal
setIsOpen(false)}
onClose={() => setIsOpen(false)}
/>
);
}道具：
title（字符串）：工作表标题中的标题文本（默认值：“Title”）artworkUrl（string）：艺术品/图像的URL（200px高）content（string）：主要内容文本（可以是多行）buttonLabel（字符串）：操作按钮文本（默认值：“完成”）onButtonClick（功能）：点击按钮时回调onClose（功能）：当工作表应该关闭时进行回调（背景点击或Escape键）isOpen（boolean）：模态表是否可见（默认值：false）className（string）：其他CSS类
特征：
- 打开时平滑向上滑动动画（轻松0.3秒）
- 动画中的背景淡入淡出
- 通过背景点击、退出键或按钮关闭
- 打开时防止车身滚动
- 全键盘导航支持
- 符合WCAG 2.1 AA级标准
- 屏幕阅读器可访问
- 触摸友好型控制
- 高对比度模式支持
- 减少运动支撑
- 响应式设计（最大宽度375px，最大高度90vh）
备注：ModalSheet专为移动优先的应用程序而设计，在中小型屏幕上效果最佳。它会自动防止身体滚动，并提供流畅的动画。
进度步骤组件
import ProgressSteps from './components/ProgressSteps';
import { useState } from 'react';
function CheckoutFlow() {
const [currentStep, setCurrentStep] = useState(0);
const steps = [
{ label: 'Cart' },
{ label: 'Delivery' },
{ label: 'Payment' },
{ label: 'Confirmation' }
];
const handleNext = () => {
if (currentStep {
if (currentStep > 0) {
setCurrentStep(currentStep - 1);
}
};
return (
{/* Step content here */}
{currentStep > 0 && (
Back
)}
{currentStep Next
)}
);
}道具：
steps（array）：具有以下参数的步骤对象数组label财产（必填）currentStep（number）：当前活动步骤的索引，从0开始（默认值：0）className（string）：其他CSS类
特征：
- 带有编号步骤的水平步进器
- 已完成的步骤显示为选中标记图标
- 当前步骤以数字突出显示
- 即将到来的步骤以灰色显示
- 台阶之间的连接线
- 响应式设计（适用于移动设备）
- 全键盘导航支持
- 符合WCAG 2.1 AA级标准
- 可通过进度条角色访问屏幕阅读器
- 触摸友好型控制
- 高对比度模式支持
- 减少运动支撑
- 支持3-8个步骤以实现最佳用户体验
备注：“进度步骤”组件是一个仅用于显示的组件。步骤之间的导航应由具有单独控件（按钮、窗体等）的父组件处理。
横幅组件
import Banner from './components/Banner';
function App() {
return (
{/* Warning Banner (default) */}
{/* Info Banner with custom artwork */}
{/* Success Banner */}
{/* Error Banner without paragraph */}
);
}道具：
heading（布尔值）：显示/隐藏标题（默认值：true）paragraph（boolean）：显示/隐藏段落（默认值：true）headingText（字符串）：标题文本（默认：“标题文本”）paragraphText（string）：段落文本（默认：“段落文本”）style（字符串）：横幅样式-“警告”、“信息”、“成功”、“错误”（默认值：“警告”）artworkUrl（字符串）：自定义艺术品/图标URL（默认：基于样式的图标）className（string）：其他CSS类
特征：
- 四种样式变体：警告（黄色）、信息（蓝色）、成功（绿色）、错误（红色）
- 基于样式的自定义或默认图标
- 灵活的内容（显示/隐藏标题或段落）
- 响应式设计（适应集装箱宽度）
- 符合WCAG 2.1 AA级标准
- 屏幕阅读器可访问
- 高对比度模式支持
- 手机触摸友好
- 圆角（12像素）打造现代外观
备注：横幅组件会根据所选样式自动显示相应的图标。自定义艺术品可以通过以下方式覆盖默认图标 artworkUrl 道具。底部导航组件
import BottomNavigation from './components/BottomNavigation';
function App() {
const [activeTab, setActiveTab] = useState('home');
const items = [
{ id: 'home', label: 'Home', active: activeTab === 'home' },
{ id: 'services', label: 'Services', active: activeTab === 'services' },
{ id: 'activity', label: 'Activity', active: activeTab === 'activity' },
{ id: 'account', label: 'Account', active: activeTab === 'account' }
];
const handleNavigation = (item) => {
setActiveTab(item.id);
console.log('Navigate to:', item.id);
};
return (
);
}道具：
items（array）：导航项数组id,label，以及active属性onItemClick（函数）：点击项目时回调，接收点击的项目className（string）：其他CSS类
内置图标：
- 家：房子图标（Figma节点：10:249）
- 服务：3x3网格图标（图节点：10:293）
- 活动：带书签的文档/收据图标（图节点：10:319）
- 账户：用户配置文件图标（图节点：10:316）
特征：
- 移动应用程序的固定底部导航
- 基于Figma设计系统的内置SVG图标
- 活动状态指示（黑色表示活动，灰色#afafaf表示非活动）
- 全键盘导航支持
- 符合WCAG 2.1 AA级标准
- 可通过语义导航访问屏幕阅读器
- 触摸友好，有足够的触摸目标（32x32px图标）
- 响应式：适应移动屏幕
- 高对比度模式支持
- 减少运动支撑
快速演示
打开 index.html 在浏览器中查看所有组件的交互示例：
- 按钮组件 -带有点击计数器的基本按钮
- 带开关的列表项 -切换不同状态的开关
- 简单列表项组件 -交互式和非交互式模式下的简单列表项
- 卡片组件 -具有加载状态和重新加载功能的卡
- 消息卡组件 -带有取消按钮的促销卡
- 代码输入组件 -具有各种配置的PIN/OTP输入
- 无线电列表项组件 -多组电台选择
- 文本输入组件 -各种输入类型和验证状态
- 媒体卡组件 -带有播放按钮和加载状态的卡
- 搜索栏组件 -使用时间选择器进行位置搜索
- 横幅支付组件 -多种货币的支付横幅
- 分隔器组件 -全宽和半宽分隔带
- 图标库 -所有可用的图标都有大小和颜色变化
- 底部导航 -具有活动状态的移动导航
- 横幅旋转木马 -带分页功能的自动旋转横幅
- 骑行选项组件 -车辆选择，包括定价和等待时间
- 滤波器芯片组件 -搜索界面的快速过滤器
- 位置列表项目组件 -带有图标和详细信息的位置选项
- 模态表组件 -带有艺术作品和动画的底图模式
- 进度步骤组件 -用于多步骤过程的水平步进器
- 横幅组件 -具有多种风格变体的信息横幅
- 简单列表项组件 -简单的导航和菜单列表项
演示页面
展示组件使用的完整示例页面：
- index.html -带有交互式演示的主要组件库：
- 按钮组件（交互式） - 带开关的列表项（切换功能） - 卡片组件（带加载骨架） - 消息卡组件（可撤销通知） - 代码输入组件（PIN/OTP输入） - 无线电列表项组件（选择组） - 文本输入组件（验证和状态） - 媒体卡组件（视频/音频卡） - 搜索栏组件（位置+时间选择器） - 横幅付款组件（付款提示） - 横幅旋转木马组件（自动旋转幻灯片） - 分隔器组件（全宽和半宽） - 图标库（所有设计系统图标） - 底部导航（移动导航栏） - 模态表组件（底部模板） - 进度步骤组件（多步骤向导） - 横幅组件（信息性警报）
- booking.html -带地图、底部表格和骑行选择的骑行预订屏幕
- 搜索.html -带有过滤器、地址输入和位置列表的搜索/计划骑行屏幕
- uber-home.html -优步主页娱乐
- uber-page.html -其他优步用户界面示例
- divider-demo.html -分流器组件演示
- modal-sheet-demo.html -具有各种用例的ModalSheet组件演示
- progress-steps-demo.html -带有交互式示例的进度步骤组件演示
发展
对于完整的React设置，请使用：
# With Vite
npm create vite@latest . -- --template react
# With Create React App
npx create-react-app .
# Then copy the component files and styles备注
- 优步Move Text字体是专有的。组件回退到系统字体以实现更广泛的兼容性。
- 所有组件均完全符合Figma的设计规范。
- 包括交互式状态（悬停、活动、聚焦），以获得更好的用户体验和可访问性。
- 组件遵循WAI-ARIA的可访问性指南。
文档
有关详细的组件规范、设计标记、可访问性指南和最佳实践，请参阅 guidelines/ 文件夹：
- 图标库指南 - 新
- 简单列表项组件指南 - 新
- 滤波器芯片组件指南 - 新
- 进度步骤组件指南 - 新
- 横幅组件指南 - 新