kindle-ui v1.0.5

Kindle-UI

English Version | 简体中文

一个用于在浏览器中构建 Kindle 系统的组件库。

本项目是我高考前最后一个坑啦，欢迎 PR！

Amazon 官方已于今年八月陆续推送新版本的 UI。

🍊 特性

• 11 个交互式 Kindle 组件（对话框、按钮、列表、文本框、导航栏...）
• 夜间模式
• 原汁原味 Kindle OS 字体（可选）
• 100% TypeScript
• 多样式对话框
• Expermintal Browser App
• Font Setting App
• Unit test

npm i kindle-ui

App

App 是 kindle 中高度集成的应用程序，大多数情况下你无法对其进行编辑。 如果你在你的项目中使用它们，你可能还需要自己添加一个路由器。

实验性浏览器

🪟 组件

Navbar

Navbar 是一个集成的 Kindle 原生组件。 所有图标都是不可编辑的，但你仍然可以更改一些状态和回调函数，例如电池、设备名称等。

Container

如果你想使用 AmazonEmber 字体（约 106kb）和深色模式来获得更接近原生 Kindle 的 ui，你可以用Container 组件包裹你的 App，它添加了一个全局字体系列。

import { Container } from "kindyle";

function App() {
	return (
		<Container>
            {/* ... */}
		</Container>
	);
}

export default App;

Typography

使用Typography来呈现文章或其他富文本内容。

Button

List

	<List>
		<ListItem component={Link} to="/reader">
			<ListItemText primary="尘埃落定" second="阿来著" />
		</ListItem>
		<ListItem component="a" href="https://github.com">
			<ListItemText
				primary="The Adventure of Sherlok Holmoes (福尔摩斯探案集）"
				second="Arthur Conan Doyle"
			/>
			<ListItemIcon
				onClick={() => {
					alert("sdf");
				}}
			>
				<EllipsisVerticalIcon />
			</ListItemIcon>
		</ListItem>
	</List>

贡献

git clone https://gitee.com/rivertwilight/kindle-ui.git
npm run i-all
npm run dev

常见问题

I. 抛出“Can't resolve 'kindle-ui'...”之类的错误

请尝试以下三种解决方案：

1. 检查dist文件夹是否为空，如果是，运行npm run build构建生产包，然后运行npm run dev。

2. 检查playground/node_modules/kindle-ui是否存在并链接到根目录。 如果没有，你可能需要在 playgrpund 文件夹中手动运行 npm i ../ -save。

3. 如果 1 和 2 都不起作用，打开两个终端，在第一个终端运行npm run build-watch，在另一个终端运行npm run start-playground。

License

MIT

灵感来源于 这个博客