Tauri 애플리케이션에서 기본 모양과 느낌을 만들기 위한 8가지 팁
Tauri로 만든 앱은 당연히 네이티브 앱입니다. 그러나 UI 부분은 WebView에서 실행되므로 모양과 느낌이 웹 앱과 같은 경향이 있습니다. 나는 가능한 한 네이티브 앱처럼 동작하도록 Jomai를 설계했기 때문에 여기에 요약하겠습니다.
Jomai는 현재 macOS에서만 사용할 수 있으므로 이 문서도 macOS용입니다.
환경:
내용물
비입력 필드의 키 입력 시 비프음 제거
A beep sounds when keystrokes are made while the focus is on a non-input item other than<input> or <textarea> . This issue occurs in WebView on macOS and has a GitHub issue, which has not been resolved as of October 6, 2022.https://github.com/tauri-apps/tauri/issues/2626
preventDefault() 이벤트에서 keydown를 호출하여 비프음을 억제할 수 있지만, 이 또한 <input>에 대한 모든 입력을 비활성화하는 등, 선택적으로 억제할 필요가 있습니다.Jomai는 다음 코드를 사용합니다.
export const useKey = (callback: UseKeyCallback) => {
const onKeydown = useCallback(
(event: KeyboardEvent) => {
// callback should return true if processed
const consumed = callback(event.code, {
ctrl: event.ctrlKey,
shift: event.shiftKey,
});
const e = event.composedPath()[0];
if (
!(e instanceof HTMLInputElement || e instanceof HTMLAreaElement)
|| consumed
) {
// preventDefault() if it is not an input item
// also preventDefault() if it was handled by a callback
applyBeepSoundWorkaround(event);
}
},
[callback],
);
useEffect(() => {
window.addEventListener('keydown', onKeydown);
return () => {
window.removeEventListener('keydown', onKeydown);
};
}, [onKeydown]);
};
이벤트 소스가
preventDefault() 또는 HTMLInputElement가 아닌 경우 HTMLAreaEelement를 호출하면 대부분의 문제가 해결됩니다. 그러나 이러한 입력 항목 중 하나에 포커스가 있을 때 키보드 단축키를 사용하여 입력되지 않은 항목으로 포커스를 이동하면(예, 쉽지 않습니다) 소리가 들립니다. 그래서 문제를 해결하기 위해 더 많은 작업을 수행했습니다.UI의 텍스트를 선택할 수 없도록 설정
While it is normal to be able to select text on a web page, this is generally not the case in native apps. To avoid unintentional text selection when trying to manipulate the UI, use user-select: none at the base of DOM elements such as <body> .
body {
user-select: none;
}
마우스 커서를 기본값으로 설정
Since the previous section has limited the operation of UI elements to button pressing, etc., let's express it that way for the mouse cursor as well.
body {
cursor: default;
}
cursor: default prevents I-beam when hovering text, for example. The cursor attribute should be explicitly specified if the UI element is manipulatable, such as a button.
button {
cursor: pointer;
}
전체 화면을 스크롤하지 마십시오
When content is larger than the size of the screen, it's usual for web pages to scroll the entire screen. In native apps, it is natural to display fixed UI components and make only some scrollable.
In Jomai, tabs and forms at the top of the screen are always visible, and only the content part at the bottom is scrollable.
직접 확인하십시오.
이를 위해서는 전체 화면에 대해
overflow: hidden를 설정하고 스크롤 영역에 대해 overflow: scroll 및 height를 설정합니다..page {
overflow: hidden;
}
.contents {
overflow: scroll;
height: calc(100vh - 40px)
}
화면에서 바운스 스크롤 억제
Bounce scrolling is that thing that makes a spring-like motion when scrolling to the edge of the screen. By default, the entire screen is scrollable with the bounce motion. See this video.
바운스 스크롤링은 스크롤 가능성과 관련이 있으므로 전체 화면을 스크롤할 수 없는 경우 억제해야 합니다.
body {
overflow: hidden;
}
나만의 메뉴 준비
Tauri provides a basic menu by default.
사용자 지정이 필요한 경우 이러한 메뉴를 직접 빌드해야 하는데 이는 다소 번거로운 작업입니다. 참고로
tauri::Menu::os_default를 참조하십시오.나만의 키보드 단축키 준비
Be careful when using your own keyboard shortcuts on web pages, as they can confuse users, but be proactive about introducing them in native apps.
다크 모드 지원
I am a fan of dark mode and would like to see dark mode support in apps I use regularly.
Tauri has appWindow.theme() to get the current theme and appWindow.onThemeChanged() to monitor change events. Using these, you can change the app to match the OS theme settings.
Here is an example implementation in React.
import { appWindow, Theme } from '@tauri-apps/api/window';
export const useTheme = () => {
const [theme, setTheme] = useState<'light' | 'dark'>('light');
useEffect(() => {
let unlisten: UnlistenFn | undefined;
(async () => {
setTheme(await appWindow.theme());
unlisten = await appWindow.onThemeChanged(({ payload: theme }) => {
console.log(`theme changed to ${theme}`);
setTheme(theme);
});
})();
return () => {
if (unlisten != null) {
unlisten();
}
};
}, []);
return theme;
};
요약
이번 글에서는 Tauri가 만든 앱을 좀 더 네이티브처럼 만드는 몇 가지 팁을 소개했습니다. 약간의 노력으로 앱의 사용성이 향상됩니다. 도움이 되셨기를 바랍니다.
전반적으로 Tauri와 함께 개발하는 것은 좋은 경험이었고 Tauri와 함께 더 많은 앱을 만들 수 있기를 기대합니다.
이러한 기술을 사용하여 개발 중인 Jomai 도 확인하십시오.
Reference
이 문제에 관하여(Tauri 애플리케이션에서 기본 모양과 느낌을 만들기 위한 8가지 팁), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/akr/8-tips-for-creating-a-native-look-and-feel-in-tauri-applications-3loe텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
