Add docs for lock screen widgets

Strezless1 · Jul 18, 2022 · 8a2cfbc · 8a2cfbc
1 parent 4d467d5
commit 8a2cfbc
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 0 deletions.
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
@@ -80,6 +80,7 @@
   - [布局](home-widget/layout.md)
   - [属性](home-widget/modifiers.md)
   - [方法](home-widget/method.md)
+  - [锁屏小组件](home-widget/lock-screen.md)
 
 - Today 小组件（已过时）
   - [前言](widget/intro.md)

diff --git a/docs/data/constant.md b/docs/data/constant.md
@@ -410,5 +410,10 @@ const $widgetFamily = {
   medium: 1,
   large: 2,
   xLarge: 3, // iPadOS 15
+
+  // iOS 16 lock screen sizes
+  accessoryCircular: 4,
+  accessoryRectangular: 5,
+  accessoryInline: 6,
 };
 ```
diff --git a/docs/en/_sidebar.md b/docs/en/_sidebar.md
@@ -80,6 +80,7 @@
   - [Layout](en/home-widget/layout.md)
   - [Modifiers](en/home-widget/modifiers.md)
   - [Method](en/home-widget/method.md)
+  - [Lock Screen Widgets](en/home-widget/lock-screen.md)
 
 - Today Widget (Deprecated)
   - [Intro](en/widget/intro.md)

diff --git a/docs/en/data/constant.md b/docs/en/data/constant.md
@@ -410,5 +410,10 @@ const $widgetFamily = {
   medium: 1,
   large: 2,
   xLarge: 3, // iPadOS 15
+
+  // iOS 16 lock screen sizes
+  accessoryCircular: 4,
+  accessoryRectangular: 5,
+  accessoryInline: 6,
 };
 ```
diff --git a/docs/en/home-widget/lock-screen.md b/docs/en/home-widget/lock-screen.md
@@ -0,0 +1,40 @@
+# Lock Screen Widgets (Beta)
+
+In iOS 16 Beta, lock screen can also have widgets, and JSBox supports building them as well (currently in TestFlight).
+
+## Building Lock Screen Widgets
+
+Lock screen widgets are essentially just widgets that you're familiar with on your home screen, with two major differences.
+
+### Vibrant Colors
+
+In lock screen, widgets are rendered with vibrant colors instead of full colors.
+
+You're encouraged to use full-alpha colors, such as white or black to build lock screen widgets. Translucent color will be mixed with the wallpaper and the result will not be readable.
+
+### Smaller Sizes
+
+There are three new sizes compared to widgets on home screen:
+
+```js
+const $widgetFamily = {
+  // small, medium, large, xLarge
+  accessoryCircular: 4,
+  accessoryRectangular: 5,
+  accessoryInline: 6,
+}
+```
+
+- `accessoryCircular`: 1 * 1 circular
+- `accessoryRectangular`: 1 * 2 rectangular
+- `accessoryInline`: one line info right after the date
+
+To detect the current running environment, check [here](en/home-widget/timeline.md?id=render).
+
+## In-app Preview
+
+The in-app preview built for widgets currently doesn't support lock screen widgets previewing, please stay tuned for upcoming updates.
+
+## Example Scripts
+
+Please check out this [GitHub repo](https://github.com/cyanzhong/jsbox-widgets) for reference.
diff --git a/docs/home-widget/lock-screen.md b/docs/home-widget/lock-screen.md
@@ -0,0 +1,40 @@
+# 锁屏小组件 (Beta)
+
+在 iOS 16 Beta 中，锁屏界面也可以有小组件，JSBox 也支持构建它们（目前在 TestFlight 版本）。
+
+## 构建锁屏小组件
+
+锁屏小组件本质上就是您熟悉的桌面小组件，有两个主要区别。
+
+### 明亮的颜色
+
+在锁屏状态下，小组件是用明亮的颜色而不是全色来呈现的。
+
+您应该使用没有透明度的颜色，如纯白或纯黑来构建锁屏小组件。半透明的颜色将与墙纸混合，结果将无法阅读。
+
+### 更小的尺寸
+
+与桌面小组件相比，锁屏小组件有三种新的尺寸：
+
+```js
+const $widgetFamily = {
+  // small, medium, large, xLarge
+  accessoryCircular: 4,
+  accessoryRectangular: 5,
+  accessoryInline: 6,
+}
+```
+
+- `accessoryCircular`: 1 * 1 圆形
+- `accessoryRectangular`: 1 * 2 长方形
+- `accessoryInline`: 在日期后面的一行信息
+
+要检测当前的运行环境，请参考[这里](home-widget/timeline.md?id=render)。
+
+## 应用内预览
+
+为小组件提供的应用内预览目前不支持锁屏小组件的预览，请继续关注即将到来的更新。
+
+## 样例代码
+
+请参考这个 [GitHub 仓库](https://github.com/cyanzhong/jsbox-widgets) 以了解更多。