门户连接

@cloud-ru/ds-portal-context ——反应上下文,QQ DOM-QQQQ (Tooltip, Popover, Dropdown, Modal, Drawer).

@cloud-ru/ds-portal-context -=YTET -伊甸园字幕组=- 翻译:Tooltip, (中文(简体) ), Popover, (中文(简体) ), Dropdown, (中文(简体) ), Modal, (中文(简体) ), Drawer {\fn华文仿宋\fs16\1cHD1D1D1} {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢 document.body{\fn方正黑体简体\fs18\b1\bord1\shad1\3cH2F2F2F}DOM 维基语录链接:名人名言 - 翻译:.

Когда

• DS QQ \\\\ 微前端 / 阴影 DOM - document.body {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你觉得呢.
• {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}====================================================================== ================================================================================================================================================================.
• E2E QQ故事本 — — — — — — — — — — — — — — — — — — — — — — iframe。 。 。 .

[永久失效連結] [永久失效連結] 新浪财经 document.body。 。 。 .

Установка

pnpm add @cloud-ru/ds-portal-context

import { PortalContextProvider } from '@cloud-ru/ds-portal-context'

Примеры

\ root \ 门户连接

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}####################################################################################################################################################################################################################################### document.body。 。 。 .

import { PortalContextProvider, usePortalContext } from '@cloud-ru/ds-portal-context';
import { useMemo, useState } from 'react';
import { createPortal } from 'react-dom';

function PortalChild() {
  const root = usePortalContext();

  if (!root.current) return null;

  return createPortal(<span>Я отрендерен в кастомном root-узле через PortalContext</span>, root.current);
}

export function CustomRoot() {
  const [node, setNode] = useState<HTMLDivElement | null>(null);
  const root = useMemo(() => ({ current: node }), [node]);

  return (
    <div style={{ display: 'flex', gap: 12, flexDirection: 'column' }}>
      <PortalContextProvider root={root}>
        <span>Хост-компонент</span>
        <PortalChild />
      </PortalContextProvider>
      <div ref={setNode} data-test-id='portal-root' />
    </div>
  );
}

Каскад:разные也

{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢? 唵(一)из(一)блока(一)теме(一)теме(一)теме(一)теме(一)теме(一)теме(一)теме(一)светлой(一)светлой(一)светлой(一)блока(一)теме(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)теме(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)блока(一)теме(一)блока(一)блока(一)блока(一)своего(一)блока(一).

import { Button } from '@cloud-ru/ds-button';
import { Popover } from '@cloud-ru/ds-popover';
import { PortalContextProvider } from '@cloud-ru/ds-portal-context';
import { COLOR_SCHEME, ColorScheme, useThemeClassnames } from '@cloud-ru/ds-theme';
import { Tooltip } from '@cloud-ru/ds-tooltip';
import { useRef } from 'react';

import styles from './CascadingThemes.module.scss';

// Тематический блок: useThemeClassnames форсит colorScheme и эмитит полный набор sn-* на свой div.
// Этот же div — корень порталов блока (PortalContextProvider root={paneRef}), поэтому тултип и
// поповер монтируются ВНУТРЬ него и наследуют тему блока через CSS-каскад токенов.
function ThemedPane({ scheme, title }: { scheme: ColorScheme; title: string }) {
  const themeClassName = useThemeClassnames({ colorScheme: scheme });
  const paneRef = useRef<HTMLDivElement>(null);

  return (
    <div ref={paneRef} className={`${styles.pane} ${themeClassName}`}>
      <PortalContextProvider root={paneRef}>
        <p className={styles.paneTitle}>{title}</p>
        <Tooltip tip='Тултип рендерится в теме своего блока' placement='top'>
          <Button label='Навести — тултип' appearance='primary' view='filled' />
        </Tooltip>
        <Popover content='Поповер — тоже в теме блока' placement='bottom' trigger='click'>
          <Button label='Кликнуть — поповер' appearance='neutral' view='outline' />
        </Popover>
      </PortalContextProvider>
    </div>
  );
}

export function CascadingThemes() {
  return (
    <div className={styles.grid}>
      <ThemedPane scheme={COLOR_SCHEME.Dark} title='Тёмный блок' />
      <ThemedPane scheme={COLOR_SCHEME.Light} title='Светлый блок' />
    </div>
  );
}

道具

门户连接提供工具

Смотри

• 工具提示, (中文(简体) ), 过量, (中文(简体) ), 下坠, (中文(简体) ), 模式, (中文(简体) ), 绘图器 ——потребители.