Zenn
⭐️

【Polaris和訳】Components/Overlays④

2021/10/29に公開
Shopify
#
polaris
tech

この記事について

この記事は、Polaris/Components/Overlaysの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Overlays（続き）

Popover with lazy loaded list

スクロールしたり、矢印で下に移動したりすると、より多くのアイテムを動的に読み込むリストをマーチャントに提示するために使用します。

React
React
function PopoverLazyLoadExample() {
  const [popoverActive, setPopoverActive] = useState(true);
  const [visibleStaffIndex, setVisibleStaffIndex] = useState(5);
  const staff = [
    'Abbey Mayert',
    'Abbi Senger',
    'Abdul Goodwin',
    'Abdullah Borer',
    'Abe Nader',
    'Abigayle Smith',
    'Abner Torphy',
    'Abraham Towne',
    'Abraham Vik',
    'Ada Fisher',
    'Adah Pouros',
    'Adam Waelchi',
    'Adan Zemlak',
    'Addie Wehner',
    'Addison Wexler',
    'Alex Hernandez',
  ];

  const togglePopoverActive = useCallback(
    () => setPopoverActive((popoverActive) => !popoverActive),
    [],
  );

  const handleScrolledToBottom = useCallback(() => {
    const totalIndexes = staff.length;
    const interval =
      visibleStaffIndex + 3 < totalIndexes
        ? 3
        : totalIndexes - visibleStaffIndex;

    if (interval > 0) {
      setVisibleStaffIndex(visibleStaffIndex + interval);
    }
  }, [staff.length, visibleStaffIndex]);

  const handleResourceListItemClick = useCallback(() => {}, []);

  const activator = (
    <Button onClick={togglePopoverActive} disclosure>
      View staff
    </Button>
  );

  const staffList = staff.slice(0, visibleStaffIndex).map((name) => ({
    name,
    initials: getInitials(name),
  }));

  return (
    <Card sectioned>
      <div style={{height: '280px'}}>
        <Popover
          sectioned
          active={popoverActive}
          activator={activator}
          onClose={togglePopoverActive}
          ariaHaspopup={false}
        >
          <Popover.Pane onScrolledToBottom={handleScrolledToBottom}>
            <ResourceList items={staffList} renderItem={renderItem} />
          </Popover.Pane>
        </Popover>
      </div>
    </Card>
  );

  function renderItem({name, initials}) {
    return (
      <ResourceList.Item
        id={name}
        media={<Avatar size="medium" name={name} initials={initials} />}
        onClick={handleResourceListItemClick}
      >
        {name}
      </ResourceList.Item>
    );
  }

  function getInitials(name) {
    return name
      .split(' ')
      .map((surnameOrFamilyName) => {
        return surnameOrFamilyName.slice(0, 1);
      })
      .join('');
  }
}
HTML
HTML
<div>
  <div class="Polaris-Card">
    <div class="Polaris-Card__Section">
      <div style="height: 280px;">
        <div><button class="Polaris-Button" type="button" tabindex="0" aria-controls="Polarispopover16" aria-owns="Polarispopover16" aria-expanded="true" aria-haspopup="false"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">View staff</span><span class="Polaris-Button__Icon">
                <div class=""><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                      <path d="m5 8 5 5 5-5H5z"></path>
                    </svg></span></div>
              </span></span></button></div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="popover-Polarisportal8">
      <div class="Polaris-PositionedOverlay Polaris-Popover__PopoverOverlay Polaris-Popover__PopoverOverlay--open" style="top: 64px; left: 0px;">
        <div class="Polaris-Popover" data-polaris-overlay="true">
          <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
          <div style="--p-background:rgba(246, 246, 247, 1); --p-background-hovered:rgba(241, 242, 243, 1); --p-background-pressed:rgba(237, 238, 239, 1); --p-background-selected:rgba(237, 238, 239, 1); --p-surface:rgba(255, 255, 255, 1); --p-surface-neutral:rgba(228, 229, 231, 1); --p-surface-neutral-hovered:rgba(219, 221, 223, 1); --p-surface-neutral-pressed:rgba(201, 204, 208, 1); --p-surface-neutral-disabled:rgba(241, 242, 243, 1); --p-surface-neutral-subdued:rgba(246, 246, 247, 1); --p-surface-subdued:rgba(250, 251, 251, 1); --p-surface-disabled:rgba(250, 251, 251, 1); --p-surface-hovered:rgba(246, 246, 247, 1); --p-surface-pressed:rgba(241, 242, 243, 1); --p-surface-depressed:rgba(237, 238, 239, 1); --p-surface-search-field:rgba(241, 242, 243, 1); --p-backdrop:rgba(0, 0, 0, 0.5); --p-overlay:rgba(255, 255, 255, 0.5); --p-shadow-from-dim-light:rgba(0, 0, 0, 0.2); --p-shadow-from-ambient-light:rgba(23, 24, 24, 0.05); --p-shadow-from-direct-light:rgba(0, 0, 0, 0.15); --p-hint-from-direct-light:rgba(0, 0, 0, 0.15); --p-border:rgba(140, 145, 150, 1); --p-border-neutral-subdued:rgba(186, 191, 195, 1); --p-border-hovered:rgba(153, 158, 164, 1); --p-border-disabled:rgba(210, 213, 216, 1); --p-border-subdued:rgba(201, 204, 207, 1); --p-border-depressed:rgba(87, 89, 89, 1); --p-border-shadow:rgba(174, 180, 185, 1); --p-border-shadow-subdued:rgba(186, 191, 196, 1); --p-divider:rgba(225, 227, 229, 1); --p-icon:rgba(92, 95, 98, 1); --p-icon-hovered:rgba(26, 28, 29, 1); --p-icon-pressed:rgba(68, 71, 74, 1); --p-icon-disabled:rgba(186, 190, 195, 1); --p-icon-subdued:rgba(140, 145, 150, 1); --p-text:rgba(32, 34, 35, 1); --p-text-disabled:rgba(140, 145, 150, 1); --p-text-subdued:rgba(109, 113, 117, 1); --p-interactive:rgba(44, 110, 203, 1); --p-interactive-disabled:rgba(189, 193, 204, 1); --p-interactive-hovered:rgba(31, 81, 153, 1); --p-interactive-pressed:rgba(16, 50, 98, 1); --p-icon-interactive:rgba(44, 110, 203, 1); --p-focused:rgba(69, 143, 255, 1); --p-surface-selected:rgba(242, 247, 254, 1); --p-surface-selected-hovered:rgba(237, 244, 254, 1); --p-surface-selected-pressed:rgba(229, 239, 253, 1); --p-icon-on-interactive:rgba(255, 255, 255, 1); --p-text-on-interactive:rgba(255, 255, 255, 1); --p-action-secondary:rgba(255, 255, 255, 1); --p-action-secondary-disabled:rgba(255, 255, 255, 1); --p-action-secondary-hovered:rgba(246, 246, 247, 1); --p-action-secondary-pressed:rgba(241, 242, 243, 1); --p-action-secondary-depressed:rgba(109, 113, 117, 1); --p-action-primary:rgba(0, 128, 96, 1); --p-action-primary-disabled:rgba(241, 241, 241, 1); --p-action-primary-hovered:rgba(0, 110, 82, 1); --p-action-primary-pressed:rgba(0, 94, 70, 1); --p-action-primary-depressed:rgba(0, 61, 44, 1); --p-icon-on-primary:rgba(255, 255, 255, 1); --p-text-on-primary:rgba(255, 255, 255, 1); --p-text-primary:rgba(0, 123, 92, 1); --p-text-primary-hovered:rgba(0, 108, 80, 1); --p-text-primary-pressed:rgba(0, 92, 68, 1); --p-surface-primary-selected:rgba(241, 248, 245, 1); --p-surface-primary-selected-hovered:rgba(179, 208, 195, 1); --p-surface-primary-selected-pressed:rgba(162, 188, 176, 1); --p-border-critical:rgba(253, 87, 73, 1); --p-border-critical-subdued:rgba(224, 179, 178, 1); --p-border-critical-disabled:rgba(255, 167, 163, 1); --p-icon-critical:rgba(215, 44, 13, 1); --p-surface-critical:rgba(254, 211, 209, 1); --p-surface-critical-subdued:rgba(255, 244, 244, 1); --p-surface-critical-subdued-hovered:rgba(255, 240, 240, 1); --p-surface-critical-subdued-pressed:rgba(255, 233, 232, 1); --p-surface-critical-subdued-depressed:rgba(254, 188, 185, 1); --p-text-critical:rgba(215, 44, 13, 1); --p-action-critical:rgba(216, 44, 13, 1); --p-action-critical-disabled:rgba(241, 241, 241, 1); --p-action-critical-hovered:rgba(188, 34, 0, 1); --p-action-critical-pressed:rgba(162, 27, 0, 1); --p-action-critical-depressed:rgba(108, 15, 0, 1); --p-icon-on-critical:rgba(255, 255, 255, 1); --p-text-on-critical:rgba(255, 255, 255, 1); --p-interactive-critical:rgba(216, 44, 13, 1); --p-interactive-critical-disabled:rgba(253, 147, 141, 1); --p-interactive-critical-hovered:rgba(205, 41, 12, 1); --p-interactive-critical-pressed:rgba(103, 15, 3, 1); --p-border-warning:rgba(185, 137, 0, 1); --p-border-warning-subdued:rgba(225, 184, 120, 1); --p-icon-warning:rgba(185, 137, 0, 1); --p-surface-warning:rgba(255, 215, 157, 1); --p-surface-warning-subdued:rgba(255, 245, 234, 1); --p-surface-warning-subdued-hovered:rgba(255, 242, 226, 1); --p-surface-warning-subdued-pressed:rgba(255, 235, 211, 1); --p-text-warning:rgba(145, 106, 0, 1); --p-border-highlight:rgba(68, 157, 167, 1); --p-border-highlight-subdued:rgba(152, 198, 205, 1); --p-icon-highlight:rgba(0, 160, 172, 1); --p-surface-highlight:rgba(164, 232, 242, 1); --p-surface-highlight-subdued:rgba(235, 249, 252, 1); --p-surface-highlight-subdued-hovered:rgba(228, 247, 250, 1); --p-surface-highlight-subdued-pressed:rgba(213, 243, 248, 1); --p-text-highlight:rgba(52, 124, 132, 1); --p-border-success:rgba(0, 164, 124, 1); --p-border-success-subdued:rgba(149, 201, 180, 1); --p-icon-success:rgba(0, 127, 95, 1); --p-surface-success:rgba(174, 233, 209, 1); --p-surface-success-subdued:rgba(241, 248, 245, 1); --p-surface-success-subdued-hovered:rgba(236, 246, 241, 1); --p-surface-success-subdued-pressed:rgba(226, 241, 234, 1); --p-text-success:rgba(0, 128, 96, 1); --p-decorative-one-icon:rgba(126, 87, 0, 1); --p-decorative-one-surface:rgba(255, 201, 107, 1); --p-decorative-one-text:rgba(61, 40, 0, 1); --p-decorative-two-icon:rgba(175, 41, 78, 1); --p-decorative-two-surface:rgba(255, 196, 176, 1); --p-decorative-two-text:rgba(73, 11, 28, 1); --p-decorative-three-icon:rgba(0, 109, 65, 1); --p-decorative-three-surface:rgba(146, 230, 181, 1); --p-decorative-three-text:rgba(0, 47, 25, 1); --p-decorative-four-icon:rgba(0, 106, 104, 1); --p-decorative-four-surface:rgba(145, 224, 214, 1); --p-decorative-four-text:rgba(0, 45, 45, 1); --p-decorative-five-icon:rgba(174, 43, 76, 1); --p-decorative-five-surface:rgba(253, 201, 208, 1); --p-decorative-five-text:rgba(79, 14, 31, 1); --p-border-radius-base:0.4rem; --p-border-radius-wide:0.8rem; --p-border-radius-full:50%; --p-card-shadow:0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light); --p-popover-shadow:-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light); --p-modal-shadow:0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light); --p-top-bar-shadow:0 2px 2px -1px var(--p-shadow-from-direct-light); --p-button-drop-shadow:0 1px 0 rgba(0, 0, 0, 0.05); --p-button-inner-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.2); --p-button-pressed-inner-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.15); --p-override-none:none; --p-override-transparent:transparent; --p-override-one:1; --p-override-visible:visible; --p-override-zero:0; --p-override-loading-z-index:514; --p-button-font-weight:500; --p-non-null-content:&quot;&quot;; --p-choice-size:2rem; --p-icon-size:1rem; --p-choice-margin:0.1rem; --p-control-border-width:0.2rem; --p-banner-border-default:inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued); --p-banner-border-success:inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued); --p-banner-border-highlight:inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued); --p-banner-border-warning:inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued); --p-banner-border-critical:inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued); --p-badge-mix-blend-mode:luminosity; --p-thin-border-subdued:0.1rem solid var(--p-border-subdued); --p-text-field-spinner-offset:0.2rem; --p-text-field-focus-ring-offset:-0.4rem; --p-text-field-focus-ring-border-radius:0.7rem; --p-button-group-item-spacing:-0.1rem; --p-duration-1-0-0:100ms; --p-duration-1-5-0:150ms; --p-ease-in:cubic-bezier(0.5, 0.1, 1, 1); --p-ease:cubic-bezier(0.4, 0.22, 0.28, 1); --p-range-slider-thumb-size-base:1.6rem; --p-range-slider-thumb-size-active:2.4rem; --p-range-slider-thumb-scale:1.5; --p-badge-font-weight:400; --p-frame-offset:0px; color: rgb(32, 34, 35);">
            <div class="Polaris-Popover__Wrapper">
              <div id="Polarispopover16" tabindex="-1" class="Polaris-Popover__Content" style="height: 255px;">
                <div class="Polaris-Popover__Pane Polaris-Scrollable Polaris-Scrollable--vertical Polaris-Scrollable--hasBottomShadow Polaris-Scrollable--verticalHasScrolling" data-polaris-scrollable="true">
                  <div class="Polaris-ResourceList__ResourceListWrapper">
                    <ul class="Polaris-ResourceList" aria-live="polite">
                      <li class="Polaris-ResourceItem__ListItem">
                        <div class="Polaris-ResourceItem__ItemWrapper">
                          <div class="Polaris-ResourceItem"><button class="Polaris-ResourceItem__Button" aria-label="View details for item" tabindex="0"></button>
                            <div class="Polaris-ResourceItem__Container" id="Abbey Mayert">
                              <div class="Polaris-ResourceItem__Owned">
                                <div class="Polaris-ResourceItem__Media"><span aria-label="Abbey Mayert" role="img" class="Polaris-Avatar Polaris-Avatar--sizeMedium Polaris-Avatar--styleOne"><span class="Polaris-Avatar__Initials"><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40"><text x="50%" y="50%" dy="0.35em" fill="currentColor" font-size="20" text-anchor="middle">AM</text></svg></span></span></div>
                              </div>
                              <div class="Polaris-ResourceItem__Content">Abbey Mayert</div>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li class="Polaris-ResourceItem__ListItem">
                        <div class="Polaris-ResourceItem__ItemWrapper">
                          <div class="Polaris-ResourceItem"><button class="Polaris-ResourceItem__Button" aria-label="View details for item" tabindex="0"></button>
                            <div class="Polaris-ResourceItem__Container" id="Abbi Senger">
                              <div class="Polaris-ResourceItem__Owned">
                                <div class="Polaris-ResourceItem__Media"><span aria-label="Abbi Senger" role="img" class="Polaris-Avatar Polaris-Avatar--sizeMedium Polaris-Avatar--styleOne"><span class="Polaris-Avatar__Initials"><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40"><text x="50%" y="50%" dy="0.35em" fill="currentColor" font-size="20" text-anchor="middle">AS</text></svg></span></span></div>
                              </div>
                              <div class="Polaris-ResourceItem__Content">Abbi Senger</div>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li class="Polaris-ResourceItem__ListItem">
                        <div class="Polaris-ResourceItem__ItemWrapper">
                          <div class="Polaris-ResourceItem"><button class="Polaris-ResourceItem__Button" aria-label="View details for item" tabindex="0"></button>
                            <div class="Polaris-ResourceItem__Container" id="Abdul Goodwin">
                              <div class="Polaris-ResourceItem__Owned">
                                <div class="Polaris-ResourceItem__Media"><span aria-label="Abdul Goodwin" role="img" class="Polaris-Avatar Polaris-Avatar--sizeMedium Polaris-Avatar--styleOne"><span class="Polaris-Avatar__Initials"><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40"><text x="50%" y="50%" dy="0.35em" fill="currentColor" font-size="20" text-anchor="middle">AG</text></svg></span></span></div>
                              </div>
                              <div class="Polaris-ResourceItem__Content">Abdul Goodwin</div>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li class="Polaris-ResourceItem__ListItem">
                        <div class="Polaris-ResourceItem__ItemWrapper">
                          <div class="Polaris-ResourceItem"><button class="Polaris-ResourceItem__Button" aria-label="View details for item" tabindex="0"></button>
                            <div class="Polaris-ResourceItem__Container" id="Abdullah Borer">
                              <div class="Polaris-ResourceItem__Owned">
                                <div class="Polaris-ResourceItem__Media"><span aria-label="Abdullah Borer" role="img" class="Polaris-Avatar Polaris-Avatar--sizeMedium Polaris-Avatar--styleOne"><span class="Polaris-Avatar__Initials"><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40"><text x="50%" y="50%" dy="0.35em" fill="currentColor" font-size="20" text-anchor="middle">AB</text></svg></span></span></div>
                              </div>
                              <div class="Polaris-ResourceItem__Content">Abdullah Borer</div>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li class="Polaris-ResourceItem__ListItem">
                        <div class="Polaris-ResourceItem__ItemWrapper">
                          <div class="Polaris-ResourceItem"><button class="Polaris-ResourceItem__Button" aria-label="View details for item" tabindex="0"></button>
                            <div class="Polaris-ResourceItem__Container" id="Abe Nader">
                              <div class="Polaris-ResourceItem__Owned">
                                <div class="Polaris-ResourceItem__Media"><span aria-label="Abe Nader" role="img" class="Polaris-Avatar Polaris-Avatar--sizeMedium Polaris-Avatar--styleOne"><span class="Polaris-Avatar__Initials"><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40"><text x="50%" y="50%" dy="0.35em" fill="currentColor" font-size="20" text-anchor="middle">AN</text></svg></span></span></div>
                              </div>
                              <div class="Polaris-ResourceItem__Content">Abe Nader</div>
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="Polaris-PositionedOverlay Polaris-Popover__PopoverOverlay Polaris-Popover__PopoverOverlay--open" style="top: 64px; left: 0px;">
  <div class="Polaris-Popover" data-polaris-overlay="true">
    <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
    <div style="--p-background:rgba(246, 246, 247, 1); --p-background-hovered:rgba(241, 242, 243, 1); --p-background-pressed:rgba(237, 238, 239, 1); --p-background-selected:rgba(237, 238, 239, 1); --p-surface:rgba(255, 255, 255, 1); --p-surface-neutral:rgba(228, 229, 231, 1); --p-surface-neutral-hovered:rgba(219, 221, 223, 1); --p-surface-neutral-pressed:rgba(201, 204, 208, 1); --p-surface-neutral-disabled:rgba(241, 242, 243, 1); --p-surface-neutral-subdued:rgba(246, 246, 247, 1); --p-surface-subdued:rgba(250, 251, 251, 1); --p-surface-disabled:rgba(250, 251, 251, 1); --p-surface-hovered:rgba(246, 246, 247, 1); --p-surface-pressed:rgba(241, 242, 243, 1); --p-surface-depressed:rgba(237, 238, 239, 1); --p-surface-search-field:rgba(241, 242, 243, 1); --p-backdrop:rgba(0, 0, 0, 0.5); --p-overlay:rgba(255, 255, 255, 0.5); --p-shadow-from-dim-light:rgba(0, 0, 0, 0.2); --p-shadow-from-ambient-light:rgba(23, 24, 24, 0.05); --p-shadow-from-direct-light:rgba(0, 0, 0, 0.15); --p-hint-from-direct-light:rgba(0, 0, 0, 0.15); --p-border:rgba(140, 145, 150, 1); --p-border-neutral-subdued:rgba(186, 191, 195, 1); --p-border-hovered:rgba(153, 158, 164, 1); --p-border-disabled:rgba(210, 213, 216, 1); --p-border-subdued:rgba(201, 204, 207, 1); --p-border-depressed:rgba(87, 89, 89, 1); --p-border-shadow:rgba(174, 180, 185, 1); --p-border-shadow-subdued:rgba(186, 191, 196, 1); --p-divider:rgba(225, 227, 229, 1); --p-icon:rgba(92, 95, 98, 1); --p-icon-hovered:rgba(26, 28, 29, 1); --p-icon-pressed:rgba(68, 71, 74, 1); --p-icon-disabled:rgba(186, 190, 195, 1); --p-icon-subdued:rgba(140, 145, 150, 1); --p-text:rgba(32, 34, 35, 1); --p-text-disabled:rgba(140, 145, 150, 1); --p-text-subdued:rgba(109, 113, 117, 1); --p-interactive:rgba(44, 110, 203, 1); --p-interactive-disabled:rgba(189, 193, 204, 1); --p-interactive-hovered:rgba(31, 81, 153, 1); --p-interactive-pressed:rgba(16, 50, 98, 1); --p-icon-interactive:rgba(44, 110, 203, 1); --p-focused:rgba(69, 143, 255, 1); --p-surface-selected:rgba(242, 247, 254, 1); --p-surface-selected-hovered:rgba(237, 244, 254, 1); --p-surface-selected-pressed:rgba(229, 239, 253, 1); --p-icon-on-interactive:rgba(255, 255, 255, 1); --p-text-on-interactive:rgba(255, 255, 255, 1); --p-action-secondary:rgba(255, 255, 255, 1); --p-action-secondary-disabled:rgba(255, 255, 255, 1); --p-action-secondary-hovered:rgba(246, 246, 247, 1); --p-action-secondary-pressed:rgba(241, 242, 243, 1); --p-action-secondary-depressed:rgba(109, 113, 117, 1); --p-action-primary:rgba(0, 128, 96, 1); --p-action-primary-disabled:rgba(241, 241, 241, 1); --p-action-primary-hovered:rgba(0, 110, 82, 1); --p-action-primary-pressed:rgba(0, 94, 70, 1); --p-action-primary-depressed:rgba(0, 61, 44, 1); --p-icon-on-primary:rgba(255, 255, 255, 1); --p-text-on-primary:rgba(255, 255, 255, 1); --p-text-primary:rgba(0, 123, 92, 1); --p-text-primary-hovered:rgba(0, 108, 80, 1); --p-text-primary-pressed:rgba(0, 92, 68, 1); --p-surface-primary-selected:rgba(241, 248, 245, 1); --p-surface-primary-selected-hovered:rgba(179, 208, 195, 1); --p-surface-primary-selected-pressed:rgba(162, 188, 176, 1); --p-border-critical:rgba(253, 87, 73, 1); --p-border-critical-subdued:rgba(224, 179, 178, 1); --p-border-critical-disabled:rgba(255, 167, 163, 1); --p-icon-critical:rgba(215, 44, 13, 1); --p-surface-critical:rgba(254, 211, 209, 1); --p-surface-critical-subdued:rgba(255, 244, 244, 1); --p-surface-critical-subdued-hovered:rgba(255, 240, 240, 1); --p-surface-critical-subdued-pressed:rgba(255, 233, 232, 1); --p-surface-critical-subdued-depressed:rgba(254, 188, 185, 1); --p-text-critical:rgba(215, 44, 13, 1); --p-action-critical:rgba(216, 44, 13, 1); --p-action-critical-disabled:rgba(241, 241, 241, 1); --p-action-critical-hovered:rgba(188, 34, 0, 1); --p-action-critical-pressed:rgba(162, 27, 0, 1); --p-action-critical-depressed:rgba(108, 15, 0, 1); --p-icon-on-critical:rgba(255, 255, 255, 1); --p-text-on-critical:rgba(255, 255, 255, 1); --p-interactive-critical:rgba(216, 44, 13, 1); --p-interactive-critical-disabled:rgba(253, 147, 141, 1); --p-interactive-critical-hovered:rgba(205, 41, 12, 1); --p-interactive-critical-pressed:rgba(103, 15, 3, 1); --p-border-warning:rgba(185, 137, 0, 1); --p-border-warning-subdued:rgba(225, 184, 120, 1); --p-icon-warning:rgba(185, 137, 0, 1); --p-surface-warning:rgba(255, 215, 157, 1); --p-surface-warning-subdued:rgba(255, 245, 234, 1); --p-surface-warning-subdued-hovered:rgba(255, 242, 226, 1); --p-surface-warning-subdued-pressed:rgba(255, 235, 211, 1); --p-text-warning:rgba(145, 106, 0, 1); --p-border-highlight:rgba(68, 157, 167, 1); --p-border-highlight-subdued:rgba(152, 198, 205, 1); --p-icon-highlight:rgba(0, 160, 172, 1); --p-surface-highlight:rgba(164, 232, 242, 1); --p-surface-highlight-subdued:rgba(235, 249, 252, 1); --p-surface-highlight-subdued-hovered:rgba(228, 247, 250, 1); --p-surface-highlight-subdued-pressed:rgba(213, 243, 248, 1); --p-text-highlight:rgba(52, 124, 132, 1); --p-border-success:rgba(0, 164, 124, 1); --p-border-success-subdued:rgba(149, 201, 180, 1); --p-icon-success:rgba(0, 127, 95, 1); --p-surface-success:rgba(174, 233, 209, 1); --p-surface-success-subdued:rgba(241, 248, 245, 1); --p-surface-success-subdued-hovered:rgba(236, 246, 241, 1); --p-surface-success-subdued-pressed:rgba(226, 241, 234, 1); --p-text-success:rgba(0, 128, 96, 1); --p-decorative-one-icon:rgba(126, 87, 0, 1); --p-decorative-one-surface:rgba(255, 201, 107, 1); --p-decorative-one-text:rgba(61, 40, 0, 1); --p-decorative-two-icon:rgba(175, 41, 78, 1); --p-decorative-two-surface:rgba(255, 196, 176, 1); --p-decorative-two-text:rgba(73, 11, 28, 1); --p-decorative-three-icon:rgba(0, 109, 65, 1); --p-decorative-three-surface:rgba(146, 230, 181, 1); --p-decorative-three-text:rgba(0, 47, 25, 1); --p-decorative-four-icon:rgba(0, 106, 104, 1); --p-decorative-four-surface:rgba(145, 224, 214, 1); --p-decorative-four-text:rgba(0, 45, 45, 1); --p-decorative-five-icon:rgba(174, 43, 76, 1); --p-decorative-five-surface:rgba(253, 201, 208, 1); --p-decorative-five-text:rgba(79, 14, 31, 1); --p-border-radius-base:0.4rem; --p-border-radius-wide:0.8rem; --p-border-radius-full:50%; --p-card-shadow:0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light); --p-popover-shadow:-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light); --p-modal-shadow:0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light); --p-top-bar-shadow:0 2px 2px -1px var(--p-shadow-from-direct-light); --p-button-drop-shadow:0 1px 0 rgba(0, 0, 0, 0.05); --p-button-inner-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.2); --p-button-pressed-inner-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.15); --p-override-none:none; --p-override-transparent:transparent; --p-override-one:1; --p-override-visible:visible; --p-override-zero:0; --p-override-loading-z-index:514; --p-button-font-weight:500; --p-non-null-content:&quot;&quot;; --p-choice-size:2rem; --p-icon-size:1rem; --p-choice-margin:0.1rem; --p-control-border-width:0.2rem; --p-banner-border-default:inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued); --p-banner-border-success:inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued); --p-banner-border-highlight:inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued); --p-banner-border-warning:inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued); --p-banner-border-critical:inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued); --p-badge-mix-blend-mode:luminosity; --p-thin-border-subdued:0.1rem solid var(--p-border-subdued); --p-text-field-spinner-offset:0.2rem; --p-text-field-focus-ring-offset:-0.4rem; --p-text-field-focus-ring-border-radius:0.7rem; --p-button-group-item-spacing:-0.1rem; --p-duration-1-0-0:100ms; --p-duration-1-5-0:150ms; --p-ease-in:cubic-bezier(0.5, 0.1, 1, 1); --p-ease:cubic-bezier(0.4, 0.22, 0.28, 1); --p-range-slider-thumb-size-base:1.6rem; --p-range-slider-thumb-size-active:2.4rem; --p-range-slider-thumb-scale:1.5; --p-badge-font-weight:400; --p-frame-offset:0px; color: rgb(32, 34, 35);">
      <div class="Polaris-Popover__Wrapper">
        <div id="Polarispopover16" tabindex="-1" class="Polaris-Popover__Content" style="height: 255px;">
          <div class="Polaris-Popover__Pane Polaris-Scrollable Polaris-Scrollable--vertical Polaris-Scrollable--hasBottomShadow Polaris-Scrollable--verticalHasScrolling" data-polaris-scrollable="true">
            <div class="Polaris-ResourceList__ResourceListWrapper">
              <ul class="Polaris-ResourceList" aria-live="polite">
                <li class="Polaris-ResourceItem__ListItem">
                  <div class="Polaris-ResourceItem__ItemWrapper">
                    <div class="Polaris-ResourceItem"><button class="Polaris-ResourceItem__Button" aria-label="View details for item" tabindex="0"></button>
                      <div class="Polaris-ResourceItem__Container" id="Abbey Mayert">
                        <div class="Polaris-ResourceItem__Owned">
                          <div class="Polaris-ResourceItem__Media"><span aria-label="Abbey Mayert" role="img" class="Polaris-Avatar Polaris-Avatar--sizeMedium Polaris-Avatar--styleOne"><span class="Polaris-Avatar__Initials"><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40"><text x="50%" y="50%" dy="0.35em" fill="currentColor" font-size="20" text-anchor="middle">AM</text></svg></span></span></div>
                        </div>
                        <div class="Polaris-ResourceItem__Content">Abbey Mayert</div>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="Polaris-ResourceItem__ListItem">
                  <div class="Polaris-ResourceItem__ItemWrapper">
                    <div class="Polaris-ResourceItem"><button class="Polaris-ResourceItem__Button" aria-label="View details for item" tabindex="0"></button>
                      <div class="Polaris-ResourceItem__Container" id="Abbi Senger">
                        <div class="Polaris-ResourceItem__Owned">
                          <div class="Polaris-ResourceItem__Media"><span aria-label="Abbi Senger" role="img" class="Polaris-Avatar Polaris-Avatar--sizeMedium Polaris-Avatar--styleOne"><span class="Polaris-Avatar__Initials"><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40"><text x="50%" y="50%" dy="0.35em" fill="currentColor" font-size="20" text-anchor="middle">AS</text></svg></span></span></div>
                        </div>
                        <div class="Polaris-ResourceItem__Content">Abbi Senger</div>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="Polaris-ResourceItem__ListItem">
                  <div class="Polaris-ResourceItem__ItemWrapper">
                    <div class="Polaris-ResourceItem"><button class="Polaris-ResourceItem__Button" aria-label="View details for item" tabindex="0"></button>
                      <div class="Polaris-ResourceItem__Container" id="Abdul Goodwin">
                        <div class="Polaris-ResourceItem__Owned">
                          <div class="Polaris-ResourceItem__Media"><span aria-label="Abdul Goodwin" role="img" class="Polaris-Avatar Polaris-Avatar--sizeMedium Polaris-Avatar--styleOne"><span class="Polaris-Avatar__Initials"><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40"><text x="50%" y="50%" dy="0.35em" fill="currentColor" font-size="20" text-anchor="middle">AG</text></svg></span></span></div>
                        </div>
                        <div class="Polaris-ResourceItem__Content">Abdul Goodwin</div>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="Polaris-ResourceItem__ListItem">
                  <div class="Polaris-ResourceItem__ItemWrapper">
                    <div class="Polaris-ResourceItem"><button class="Polaris-ResourceItem__Button" aria-label="View details for item" tabindex="0"></button>
                      <div class="Polaris-ResourceItem__Container" id="Abdullah Borer">
                        <div class="Polaris-ResourceItem__Owned">
                          <div class="Polaris-ResourceItem__Media"><span aria-label="Abdullah Borer" role="img" class="Polaris-Avatar Polaris-Avatar--sizeMedium Polaris-Avatar--styleOne"><span class="Polaris-Avatar__Initials"><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40"><text x="50%" y="50%" dy="0.35em" fill="currentColor" font-size="20" text-anchor="middle">AB</text></svg></span></span></div>
                        </div>
                        <div class="Polaris-ResourceItem__Content">Abdullah Borer</div>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="Polaris-ResourceItem__ListItem">
                  <div class="Polaris-ResourceItem__ItemWrapper">
                    <div class="Polaris-ResourceItem"><button class="Polaris-ResourceItem__Button" aria-label="View details for item" tabindex="0"></button>
                      <div class="Polaris-ResourceItem__Container" id="Abe Nader">
                        <div class="Polaris-ResourceItem__Owned">
                          <div class="Polaris-ResourceItem__Media"><span aria-label="Abe Nader" role="img" class="Polaris-Avatar Polaris-Avatar--sizeMedium Polaris-Avatar--styleOne"><span class="Polaris-Avatar__Initials"><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40"><text x="50%" y="50%" dy="0.35em" fill="currentColor" font-size="20" text-anchor="middle">AN</text></svg></span></span></div>
                        </div>
                        <div class="Polaris-ResourceItem__Content">Abe Nader</div>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
  </div>
</div>

Props

activator (Required)
ReactElement
ポップオーバーを有効にする要素

activatorWrapper
string
アクティベーターを囲う要素タイプ

active (Required)
boolean
ポップオーバーの表示・非表示

ariaHaspopup
false | true | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree"
ポップオーバー要素の種類を示すのに使用される

autofocusTarget
"none" | "first-node" | "container"
オートフォーカスの対象をデフォルトでポップオーバーコンテナにする

children
React.ReactNode
ポップオーバー内に表示するコンテンツ

colorScheme
"light" | "dark" | "inverse"
ポップオーバーのコンテンツの配色を指定する

fixed
boolean
固定された位置に留まる

fluidContent
boolean
ポップオーバーのコンテンツがオーバーレイの幅と高さを決定できるようにする

fullHeight
boolean
ポップオーバーがコンテンツに合わせて縦に伸びるようにする

fullWidth
boolean
ポップオーバーがアクティベーターの幅いっぱいに伸びるようにする

hideOnPrint
boolean
印刷時にポップオーバーオーバーレイを非表示にすることができる。

preferInputActivator
boolean
アクティベーターのinput要素を使って、Popoverの位置を計算する

preferredAlignment
"left" | "right" | "center"
アクティベーターに対するポップオーバーの優先配置

preferredPosition
"above" | "below" | "mostSpace"
ポップオーバーを開く際の優先方向

preventFocusOnClose
boolean
ポップオーバーが非活性化されたときに、アクティベーターまたは次のフォーカス可能な要素のフォーカスを防ぐ

sectioned
boolean
セクション内にラップコンテンツを自動的に追加

zIndexOverride
number
デフォルトのz-indexを 400 に上書きする

onClose (Required)
(source: PopoverCloseSource) => void
ポップオーバーが閉じられたときのコールバック

アクセシビリティ

ポップオーバーは通常、オプションリストやアクションリストを含みますが、他のコントロールやコンテンツを含むこともできます。

ポップオーバーには、さまざまな種類のコンテンツを含めることができます。それがメニューであろうと、グリッドであろうと、全く異なるものであろうと。aria-expandedが要素に適用されている場合、aria-haspopupのデフォルトはmenuになります。スクリーンリーダーを補助するためには、PopoverにariaHaspopupを渡す必要があります。

キーボード対応
  • ポップオーバーが開くと、フォーカスは最初のフォーカス可能な要素またはポップオーバーコンテナに移動します。
  • ポップオーバーにフォーカスが移動すると、マーチャントはtabキー（およびshift＋tab逆方向）と標準的なキーストロークを使用してポップオーバー内のコントロールにアクセスし、対話することができます。
  • マーチャントは、タブでポップオーバーを閉じるか、escキーを押すか、ポップオーバーの外側をクリックすることで、ポップオーバーを閉じることができます。
  • ポップオーバーが閉じられると、フォーカスはポップオーバーを起動した要素に戻ります。
Android

アクションリストのある Popover

一連のアクションを開示可能なメニューで提示する場合に使用します。

コンテンツとアクションのある Popover

現在のページにとって重要性が低い、または二次的なタスクのために、コンテンツ、指示、およびアクションの組み合わせをパネルで提示するために使用します。このような使い方をすると、ポップオーバーはマーチャントを圧倒することなく、関連する機能への便利なエントリーポイントとなります。

アクセシビリティ

Android のアクセシビリティについては、Material Design と開発ドキュメントをご覧ください。

iOS

アクションリストのある Popover

一連のアクションを開示可能なメニューで提示する場合に使用します。

コンテンツとアクションのある Popover

現在のページにとって重要性が低い、または二次的なタスクのために、コンテンツ、指示、およびアクションの組み合わせをパネルで提示するために使用します。このような使い方をすると、ポップオーバーはマーチャントを圧倒することなく、関連する機能への便利なエントリーポイントとなります。

アクションシート

ページ全体に影響するアクションが少ない場合に使用します。アクションシートは、アイコンや付加情報に対応していません。

アクセシビリティ

iOS のアクセシビリティについては、Apple の Human Interface Guidelines や API のドキュメントをご覧ください。

ベストプラクティス

ポップオーバーは、次のようなものでなければなりません。

  • ポップオーバーは、ボタンやその他のインターフェース要素の隣に配置してください。
  • マーチャントがトリガーを押すまで隠れているため、二次的な情報や重要性の低いアクションに使用する。
  • 互いに関連性のあるナビゲーションやアクションを含む。
  • 明確にラベル付けされたボタンで起動されること

コンテンツガイドライン

Popover コンテンツ

Popover にアクションが含まれている場合、そのアクションは

  • 明確かつ予測可能であること：マーチャントは、アクションアイテムをクリックしたときに何が起こるかを予測できなければなりません。アクションのラベルを間違えてマーチャントを欺いてはいけません。

アクション主導であること：ボタンは常にアクションを促す強い動詞でリードすべきです。マーチャントに十分なコンテクストを与えるために、Save、Close、Cancel、OK などの一般的なアクションの場合を除き、ボタンには{動詞}+{名詞}のフォーマットを使用してください。

特に、ポップオーバーにアクションやオプションのリストが含まれている場合は、スキャン可能にしてください。「the」、「an」、「a」などの不要な単語や冠詞は避けてください。

Popover に一連のナビゲーションリンクが含まれている場合、各項目は以下の通りです。

  • 簡潔でありながら、マーチャントが目的のパスを簡単に見つけ、正確にナビゲートできるように十分な情報を提供すること。

関連コンポーネント

Sheet

シートとは、マーチャントのトリガーによって画面の端から入ってくる大きなコンテナのことです。シートは、マーチャントにページのコンテキストに応じたアクションや情報を提供するために使用されます。モーダルのようにマーチャントの流れを妨げることはありません。

例

シートのデフォルトオプションとして使用します。

React
React
function SheetExample() {
  const [sheetActive, setSheetActive] = useState(true);
  const [title, setTitle] = useState('Big yellow socks');
  const [description, setDescription] = useState(
    "They’re big, yellow socks. What more could you possibly want from socks? These socks will change your life.\n\nThey’re made from light, hand-loomed cotton that’s so soft, you'll feel like you are walking on a cloud.",
  );
  const [salesChannels, setSalesChannels] = useState([
    {value: 'onlineStore', label: 'Online Store'},
    {value: 'facebook', label: 'Facebook'},
    {value: 'googleShopping', label: 'Google shopping'},
    {value: 'facebookMarketing', label: 'Facebook Marketing'},
  ]);
  const [selected, setSelected] = useState([]);

  const toggleSheetActive = useCallback(
    () => setSheetActive((sheetActive) => !sheetActive),
    [],
  );
  const handleSelectedChange = useCallback((value) => setSelected(value), []);
  const handleTitleChange = useCallback((value) => setTitle(value), []);
  const handleDescriptionChange = useCallback(
    (value) => setDescription(value),
    [],
  );

  const selectedSalesChannels = selected.map((key) => {
    return salesChannels.reduce((accumulator, current) => {
      accumulator[current.value] = current.label;
      return accumulator;
    }, {})[key];
  });
  const hasSelectedSalesChannels = selectedSalesChannels.length > 0;

  const salesChannelsCardMarkup = hasSelectedSalesChannels ? (
    <List>
      {selectedSalesChannels.map((channel, index) => (
        <List.Item key={index}>{channel}</List.Item>
      ))}
    </List>
  ) : (
    <div
      style={{
        alignItems: 'center',
        display: 'flex',
        justifyContent: 'space-between',
        width: '100%',
      }}
    >
      <p>No sales channels selected</p>
      <Button onClick={toggleSheetActive}>Manage sales channels</Button>
    </div>
  );

  const salesChannelAction = hasSelectedSalesChannels
    ? [
        {
          onAction: toggleSheetActive,
          content: 'Manage sales channels',
        },
      ]
    : null;

  return (
    <Page narrowWidth>
      <Card
        sectioned
        subdued
        title="Product availability"
        actions={salesChannelAction}
      >
        {salesChannelsCardMarkup}
      </Card>
      <Sheet
        open={sheetActive}
        onClose={toggleSheetActive}
        accessibilityLabel="Manage sales channels"
      >
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            height: '100%',
          }}
        >
          <div
            style={{
              alignItems: 'center',
              borderBottom: '1px solid #DFE3E8',
              display: 'flex',
              justifyContent: 'space-between',
              padding: '1.6rem',
              width: '100%',
            }}
          >
            <Heading>Manage sales channels</Heading>
            <Button
              accessibilityLabel="Cancel"
              icon={MobileCancelMajor}
              onClick={toggleSheetActive}
              plain
            />
          </div>
          <Scrollable style={{padding: '1.6rem', height: '100%'}}>
            <ChoiceList
              title="Select a sales channel"
              name="salesChannelsList"
              choices={salesChannels}
              selected={selected}
              titleHidden
              allowMultiple
              onChange={handleSelectedChange}
            />
          </Scrollable>
          <div
            style={{
              alignItems: 'center',
              borderTop: '1px solid #DFE3E8',
              display: 'flex',
              justifyContent: 'space-between',
              padding: '1.6rem',
              width: '100%',
            }}
          >
            <Button onClick={toggleSheetActive}>Cancel</Button>
            <Button primary onClick={toggleSheetActive}>
              Done
            </Button>
          </div>
        </div>
      </Sheet>
    </Page>
  );
}
HTML
HTML
<div>
  <div class="Polaris-Page Polaris-Page--narrowWidth">
    <div class="Polaris-Page__Content">
      <div class="Polaris-Card Polaris-Card--subdued">
        <div class="Polaris-Card__Header">
          <h2 class="Polaris-Heading">Product availability</h2>
        </div>
        <div class="Polaris-Card__Section">
          <div style="align-items: center; display: flex; justify-content: space-between; width: 100%;">
            <p>No sales channels selected</p><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Manage sales channels</span></span></button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="sheet-Polarisportal2">
      <div class="Polaris-Sheet__Container" data-polaris-layer="true" data-polaris-overlay="true">
        <div>
          <div role="dialog" aria-modal="true" tabindex="-1" class="Polaris-Sheet focus-visible" aria-label="Manage sales channels" data-focus-visible-added="">
            <div style="display: flex; flex-direction: column; height: 100%;">
              <div style="align-items: center; border-bottom: 1px solid rgb(223, 227, 232); display: flex; justify-content: space-between; padding: 1.6rem; width: 100%;">
                <h2 class="Polaris-Heading">Manage sales channels</h2><button class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly" aria-label="Cancel" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                          <path d="m11.414 10 6.293-6.293a1 1 0 1 0-1.414-1.414L10 8.586 3.707 2.293a1 1 0 0 0-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 1 0 1.414 1.414L10 11.414l6.293 6.293A.998.998 0 0 0 18 17a.999.999 0 0 0-.293-.707L11.414 10z"></path>
                        </svg></span></span></span></button>
              </div>
              <div class="Polaris-Scrollable Polaris-Scrollable--vertical Polaris-Scrollable--verticalHasScrolling" data-polaris-scrollable="true" style="padding: 1.6rem; height: 100%;">
                <fieldset class="Polaris-ChoiceList Polaris-ChoiceList--titleHidden" id="salesChannelsList[]" aria-invalid="false">
                  <legend class="Polaris-ChoiceList__Title">Select a sales channel</legend>
                  <ul class="Polaris-ChoiceList__Choices">
                    <li><label class="Polaris-Choice" for="PolarisCheckbox1"><span class="Polaris-Choice__Control"><span class="Polaris-Checkbox"><input id="PolarisCheckbox1" name="salesChannelsList[]" type="checkbox" class="Polaris-Checkbox__Input" aria-invalid="false" role="checkbox" aria-checked="false" value="onlineStore"><span class="Polaris-Checkbox__Backdrop"></span><span class="Polaris-Checkbox__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                  <path d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
                                </svg></span></span></span></span><span class="Polaris-Choice__Label">Online Store</span></label></li>
                    <li><label class="Polaris-Choice" for="PolarisCheckbox2"><span class="Polaris-Choice__Control"><span class="Polaris-Checkbox"><input id="PolarisCheckbox2" name="salesChannelsList[]" type="checkbox" class="Polaris-Checkbox__Input" aria-invalid="false" role="checkbox" aria-checked="false" value="facebook"><span class="Polaris-Checkbox__Backdrop"></span><span class="Polaris-Checkbox__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                  <path d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
                                </svg></span></span></span></span><span class="Polaris-Choice__Label">Facebook</span></label></li>
                    <li><label class="Polaris-Choice" for="PolarisCheckbox3"><span class="Polaris-Choice__Control"><span class="Polaris-Checkbox"><input id="PolarisCheckbox3" name="salesChannelsList[]" type="checkbox" class="Polaris-Checkbox__Input" aria-invalid="false" role="checkbox" aria-checked="false" value="googleShopping"><span class="Polaris-Checkbox__Backdrop"></span><span class="Polaris-Checkbox__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                  <path d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
                                </svg></span></span></span></span><span class="Polaris-Choice__Label">Google shopping</span></label></li>
                    <li><label class="Polaris-Choice" for="PolarisCheckbox4"><span class="Polaris-Choice__Control"><span class="Polaris-Checkbox"><input id="PolarisCheckbox4" name="salesChannelsList[]" type="checkbox" class="Polaris-Checkbox__Input" aria-invalid="false" role="checkbox" aria-checked="false" value="facebookMarketing"><span class="Polaris-Checkbox__Backdrop"></span><span class="Polaris-Checkbox__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                                  <path d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
                                </svg></span></span></span></span><span class="Polaris-Choice__Label">Facebook Marketing</span></label></li>
                  </ul>
                </fieldset>
              </div>
              <div style="align-items: center; border-top: 1px solid rgb(223, 227, 232); display: flex; justify-content: space-between; padding: 1.6rem; width: 100%;"><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Cancel</span></span></button><button class="Polaris-Button Polaris-Button--primary" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Done</span></span></button></div>
            </div>
          </div>
        </div>
      </div>
      <div class="Polaris-Backdrop Polaris-Backdrop--transparent"></div>
    </div>
  </div>
</div>
<div class="Polaris-Sheet__Container" data-polaris-layer="true" data-polaris-overlay="true">
  <div>
    <div role="dialog" aria-modal="true" tabindex="-1" class="Polaris-Sheet focus-visible" aria-label="Manage sales channels" data-focus-visible-added="">
      <div style="display: flex; flex-direction: column; height: 100%;">
        <div style="align-items: center; border-bottom: 1px solid rgb(223, 227, 232); display: flex; justify-content: space-between; padding: 1.6rem; width: 100%;">
          <h2 class="Polaris-Heading">Manage sales channels</h2><button class="Polaris-Button Polaris-Button--plain Polaris-Button--iconOnly" aria-label="Cancel" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                    <path d="m11.414 10 6.293-6.293a1 1 0 1 0-1.414-1.414L10 8.586 3.707 2.293a1 1 0 0 0-1.414 1.414L8.586 10l-6.293 6.293a1 1 0 1 0 1.414 1.414L10 11.414l6.293 6.293A.998.998 0 0 0 18 17a.999.999 0 0 0-.293-.707L11.414 10z"></path>
                  </svg></span></span></span></button>
        </div>
        <div class="Polaris-Scrollable Polaris-Scrollable--vertical Polaris-Scrollable--verticalHasScrolling" data-polaris-scrollable="true" style="padding: 1.6rem; height: 100%;">
          <fieldset class="Polaris-ChoiceList Polaris-ChoiceList--titleHidden" id="salesChannelsList[]" aria-invalid="false">
            <legend class="Polaris-ChoiceList__Title">Select a sales channel</legend>
            <ul class="Polaris-ChoiceList__Choices">
              <li><label class="Polaris-Choice" for="PolarisCheckbox1"><span class="Polaris-Choice__Control"><span class="Polaris-Checkbox"><input id="PolarisCheckbox1" name="salesChannelsList[]" type="checkbox" class="Polaris-Checkbox__Input" aria-invalid="false" role="checkbox" aria-checked="false" value="onlineStore"><span class="Polaris-Checkbox__Backdrop"></span><span class="Polaris-Checkbox__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                            <path d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
                          </svg></span></span></span></span><span class="Polaris-Choice__Label">Online Store</span></label></li>
              <li><label class="Polaris-Choice" for="PolarisCheckbox2"><span class="Polaris-Choice__Control"><span class="Polaris-Checkbox"><input id="PolarisCheckbox2" name="salesChannelsList[]" type="checkbox" class="Polaris-Checkbox__Input" aria-invalid="false" role="checkbox" aria-checked="false" value="facebook"><span class="Polaris-Checkbox__Backdrop"></span><span class="Polaris-Checkbox__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                            <path d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
                          </svg></span></span></span></span><span class="Polaris-Choice__Label">Facebook</span></label></li>
              <li><label class="Polaris-Choice" for="PolarisCheckbox3"><span class="Polaris-Choice__Control"><span class="Polaris-Checkbox"><input id="PolarisCheckbox3" name="salesChannelsList[]" type="checkbox" class="Polaris-Checkbox__Input" aria-invalid="false" role="checkbox" aria-checked="false" value="googleShopping"><span class="Polaris-Checkbox__Backdrop"></span><span class="Polaris-Checkbox__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                            <path d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
                          </svg></span></span></span></span><span class="Polaris-Choice__Label">Google shopping</span></label></li>
              <li><label class="Polaris-Choice" for="PolarisCheckbox4"><span class="Polaris-Choice__Control"><span class="Polaris-Checkbox"><input id="PolarisCheckbox4" name="salesChannelsList[]" type="checkbox" class="Polaris-Checkbox__Input" aria-invalid="false" role="checkbox" aria-checked="false" value="facebookMarketing"><span class="Polaris-Checkbox__Backdrop"></span><span class="Polaris-Checkbox__Icon"><span class="Polaris-Icon"><svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
                            <path d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"></path>
                          </svg></span></span></span></span><span class="Polaris-Choice__Label">Facebook Marketing</span></label></li>
            </ul>
          </fieldset>
        </div>
        <div style="align-items: center; border-top: 1px solid rgb(223, 227, 232); display: flex; justify-content: space-between; padding: 1.6rem; width: 100%;"><button class="Polaris-Button" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Cancel</span></span></button><button class="Polaris-Button Polaris-Button--primary" type="button"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Done</span></span></button></div>
      </div>
    </div>
  </div>
</div>
<div class="Polaris-Backdrop Polaris-Backdrop--transparent"></div>

Props

accessibilityLabel (Required)
string
シートの ARIA ラベル

activator
RefObject | ReactElement
シートを有効にする要素またはRefObject

children (Required)
React.ReactNode
シートでレンダリングする子要素

open (Required)
boolean
シートが開かれているかどうか

onClose (Required)
() => void
バックドロップがクリックされたとき、またはESCキーが押されたときのコールバック

onEntered
() => void
シートの入力が完了したときのコールバック

onExit
() => void
シートが終了し始めたときのコールバック

アクセシビリティ

シートは、マーチャントが現在のタスクについてさらに詳しく調べたり、現在のタスクのための情報に別の方法でアクセスしたりする機会を提供します。マーチャントは、シートのコンテンツとメインページのコンテンツを同時に見ることができますが、常にどちらか一方のみを操作するようにしてください。

キーボード対応
  • onCloseプロップを使用して、ボタンベースのコントロールだけでなく、escキーでもシートを閉じることができます。
  • ボタンを使ってシートを開く
  • シートが開くと、キーボードやスクリーンリーダーに依存するユーザーがアクセスできるように、シートにフォーカスが移動します。
  • 解除されるまでフォーカスはシートに保たれる
    シートが閉じると、起動したボタンにフォーカスが戻る

レスポンシブな動き

画面サイズが小さい場合、シート部品は画面の下部からページに入ります。大きな画面では、画面の右端からシート部品が入ります。

ベストプラクティス

Sheet コンポーネントは、以下の点に注意してください。

  • More filters のように、シート内のアクションや情報を要約した見出しをつける。
  • リンクやボタンなどの明確なアクションで開くことができる。
  • Done、Xボタン、escキーなどの明確なアクションで閉じることができる。
  • 現在のタスクに関連した情報やアクションを含むこと
  • モーダルのようにマーチャントがタスクを完了するのを妨げないこと
  • 他のシートの中から開くことができない（一度に開けるのは 1 つのシートのみ）
  • 閉じても設定やアクションがリセットされず、状態が保持される。

Sheet コンポーネントは、マーチャントが背後の要素を確認する必要がある場合に最適で、そのために透明な背景を使用します。背景はフルスクリーンのオーバーレイで、押されると親のコンポーネントを閉じます。

関連コンポーネント

  • マーチャントがフローの次のステップに進む前にアクションを提供するには、Modal コンポーネントを使用します。
  • 少量のコンテンツやアクションメニューをノンブロッキングオーバーレイで表示するには、Popover コンポーネントを使用します。

Tooltip

ツールチップは、ユーザーインターフェース要素の機能を簡単に説明するフローティングラベルです。マーチャントがホバー、フォーカス、タップ、またはクリックしたときに表示されます。

例

Default tooltip

インターフェイス要素の説明に必要な場合のみ使用します。

React
React
<div style={{padding: '75px 0'}}>
  <Tooltip active content="This order has shipping labels.">
    <TextStyle variation="strong">Order #1001</TextStyle>
  </Tooltip>
</div>
HTML
HTML
<div>
  <div style="padding: 75px 0px;"><span tabindex="0" aria-describedby="PolarisTooltipContent2" data-polaris-tooltip-activator="true"><span class="Polaris-TextStyle--variationStrong">Order #1001</span></span></div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="tooltip-Polarisportal1">
      <div class="Polaris-PositionedOverlay" style="top: 102.2px; left: 0px;">
        <div class="Polaris-Tooltip-TooltipOverlay" data-polaris-layer="true">
          <div id="PolarisTooltipContent2" role="tooltip" class="Polaris-Tooltip-TooltipOverlay__Content" style="min-height: 48px;">This order has shipping labels.</div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="Polaris-PositionedOverlay" style="top: 102.2px; left: 0px;">
  <div class="Polaris-Tooltip-TooltipOverlay" data-polaris-layer="true">
    <div id="PolarisTooltipContent2" role="tooltip" class="Polaris-Tooltip-TooltipOverlay__Content" style="min-height: 48px;">This order has shipping labels.</div>
  </div>
</div>

Tooltip visible only with child interaction

ツールチップがアクティブなときに、フォーム入力などのインタラクティブ要素をオーバーレイするときに使用します。dismissOnMouseOutプロップは、マウスのホバーまたはフォーカスがchildrenから離れてツールチップのコンテンツに入ったときに、ツールチップがアクティブのままになるのを防ぎます。

React
React
<div style={{width: '200px'}}>
  <ButtonGroup segmented fullWidth>
    <Tooltip content="Bold" dismissOnMouseOut>
      <Button>B</Button>
    </Tooltip>
    <Tooltip content="Italic" dismissOnMouseOut>
      <Button>I</Button>
    </Tooltip>
    <Tooltip content="Underline" dismissOnMouseOut>
      <Button>U</Button>
    </Tooltip>
    <Tooltip content="Strikethrough" dismissOnMouseOut>
      <Button>S</Button>
    </Tooltip>
  </ButtonGroup>
  <TextField label="Product title" labelHidden multiline />
</div>
HTML
HTML
<div>
  <div style="width: 200px;">
    <div class="Polaris-ButtonGroup Polaris-ButtonGroup--segmented Polaris-ButtonGroup--fullWidth" data-buttongroup-segmented="true" data-buttongroup-full-width="true">
      <div class="Polaris-ButtonGroup__Item"><span><button class="Polaris-Button" type="button" tabindex="0" aria-describedby="PolarisTooltipContent7" data-polaris-tooltip-activator="true"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">B</span></span></button></span></div>
      <div class="Polaris-ButtonGroup__Item"><span><button class="Polaris-Button" type="button" tabindex="0" aria-describedby="PolarisTooltipContent8" data-polaris-tooltip-activator="true"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">I</span></span></button></span></div>
      <div class="Polaris-ButtonGroup__Item"><span><button class="Polaris-Button" type="button" tabindex="0" aria-describedby="PolarisTooltipContent9" data-polaris-tooltip-activator="true"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">U</span></span></button></span></div>
      <div class="Polaris-ButtonGroup__Item"><span><button class="Polaris-Button" type="button" tabindex="0" aria-describedby="PolarisTooltipContent10" data-polaris-tooltip-activator="true"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">S</span></span></button></span></div>
    </div>
    <div class="Polaris-Labelled--hidden">
      <div class="Polaris-Labelled__LabelWrapper">
        <div class="Polaris-Label"><label id="PolarisTextField2Label" for="PolarisTextField2" class="Polaris-Label__Text">Product title</label></div>
      </div>
      <div class="Polaris-Connected">
        <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
          <div class="Polaris-TextField Polaris-TextField--multiline"><textarea id="PolarisTextField2" class="Polaris-TextField__Input" aria-labelledby="PolarisTextField2Label" aria-invalid="false" aria-multiline="true" style="height: 34px;"></textarea>
            <div class="Polaris-TextField__Backdrop"></div>
            <div aria-hidden="true" class="Polaris-TextField__Resizer">
              <div class="Polaris-TextField__DummyInput"><br></div>
              <div class="Polaris-TextField__DummyInput"><br></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer">
    <div data-portal-id="tooltip-Polarisportal2"></div>
    <div data-portal-id="tooltip-Polarisportal3"></div>
    <div data-portal-id="tooltip-Polarisportal4"></div>
    <div data-portal-id="tooltip-Polarisportal5"></div>
  </div>
</div>,,,

Props

accessibilityLabel
string
スクリーンリーダーのための視覚的に隠されたテキスト

activatorWrapper
string
アクティベーターを囲む要素タイプ

active
boolean
ツールチップを表示するかどうかのトグル

children
React.ReactNode
ツールチップを有効にするための要素

content (Required)
React.ReactNode
ツールチップ内に表示するコンテンツ

dismissOnMouseOut
boolean
ツールチップの children を操作していないときにツールチップを閉じる

preferredPosition
"above" | "below" | "mostSpace"
ツールチップが表示される方向

ベストプラクティス

ツールチップは、次のようなものでなければなりません。

  • 有用な追加情報や説明を提供する。
  • ツールチップが指し示す要素を簡潔に説明し、拡張する。
  • アイコンのみのボタン、またはキーボードショートカットが関連付けられているボタンに提供する。
  • フォームのエラーやその他のインタラクションのフィードバックなど、重要な情報の伝達には使用しない。
  • リンクやボタンを含まない。
  • 控えめに使用すること。多くのツールチップを必要とするものを作っている場合は、デザインとエクスペリエンスにおける言語を明確にすることに取り組んでください。

コンテンツガイドライン

Basic tooltips

ツールチップは、次のようなものでなければなりません。

  • 文語体で書かれていること
  • 簡潔でスキャンしやすい文章であること
  • エラーメッセージや重要なアカウント情報の伝達には使用しない。

関連コンポーネント



GitHubでソースを編集する

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

ログインするとコメントできます