Safe Area

[qeeqez]

TMA V8: Safe Area

Implemented Safe Area scope

Signals

• inset: SafeAreaInset
• contentInset: SafeAreaInset
• state: State

Types

type SafeAreaInset = { 
  top: number, 
  bottom: number, 
  left: number, 
  right: number 
};

interface State {
  inset: SafeAreaInset;
  contentInset: SafeAreaInset;
}

BindCssVars

if (bindCssVars.isAvailable()) {
  bindCssVars();
}

// --tg-safe-area-inset-top: 0px;
// --tg-safe-area-inset-bottom: 30px;
// --tg-safe-area-inset-left: 40px;
// --tg-safe-area-inset-right: 40px;

// --tg-content-safe-area-inset-top: 40px;
// --tg-content-safe-area-inset-bottom: 0px;
// --tg-content-safe-area-inset-left: 0px;
// --tg-content-safe-area-inset-right: 0px;

Custom BindCssVars

if (bindCssVars.isAvailable()) {
  bindCssVars((component, property) => `--my-prefix-${component}-${property}`);
}

// --my-prefix-safeArea-top: 0px;
// --my-prefix-safeArea-bottom: 30px;
// --my-prefix-safeArea-bottom: 40px;
// --my-prefix-safeArea-right: 40px;
 
// --my-prefix-contentSafeArea-top: 40px;
// --my-prefix-contentSafeArea-bottom: 0px;
// --my-prefix-contentSafeArea-left: 0px;
// --my-prefix-contentSafeArea-right: 0px;

[changeset-bot]

🦋 Changeset detected

Latest commit: 0f1ebe3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
@telegram-apps/bridge	Minor
@telegram-apps/sdk	Minor
@telegram-apps/navigation	Patch
@telegram-apps/sdk-react	Patch
@telegram-apps/sdk-solid	Patch
@telegram-apps/sdk-svelte	Patch
@telegram-apps/sdk-vue	Patch
svelte-template	Patch
vue-template	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 23, 2024 1:46am

[qeeqez]

@singerxt check CSS vars pls, I've checked only exported signals and state with it.

UPD: CSS binding fixed and tested, works as expected now