⭐️

【Polaris和訳】Components/Behavior

2021/10/29に公開

Shopify

polaris

tech

この記事について

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

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

Shopify アプリのご紹介

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

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

Behavior

Collapsible

Collapsible コンポーネントは、長いセクションの情報をブロックの下に配置し、マーチャントが展開または折りたたむことができるようにするために使用されます。

Web

例

より多くのコンテンツを表示する必要がある場合、基本的な「show more」インタラクションに使用します。

React

function CollapsibleExample() {
  const [open, setOpen] = useState(true);

  const handleToggle = useCallback(() => setOpen((open) => !open), []);

  return (
    <div style={{height: '200px'}}>
      <Card sectioned>
        <Stack vertical>
          <Button
            onClick={handleToggle}
            ariaExpanded={open}
            ariaControls="basic-collapsible"
          >
            Toggle
          </Button>
          <Collapsible
            open={open}
            id="basic-collapsible"
            transition={{duration: '500ms', timingFunction: 'ease-in-out'}}
            expandOnPrint
          >
            <TextContainer>
              <p>
                Your mailing list lets you contact customers or visitors who
                have shown an interest in your store. Reach out to them with
                exclusive offers or updates about your products.
              </p>
              <Link url="#">Test link</Link>
            </TextContainer>
          </Collapsible>
        </Stack>
      </Card>
    </div>
  );
}

HTML

<div>
  <div style="height: 200px;">
    <div class="Polaris-Card">
      <div class="Polaris-Card__Section">
        <div class="Polaris-Stack Polaris-Stack--vertical">
          <div class="Polaris-Stack__Item"><button class="Polaris-Button" type="button" aria-controls="basic-collapsible" aria-expanded="true"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Toggle</span></span></button></div>
          <div class="Polaris-Stack__Item">
            <div id="basic-collapsible" class="Polaris-Collapsible Polaris-Collapsible--expandOnPrint" aria-expanded="true" style="transition-duration: 500ms; transition-timing-function: ease-in-out; max-height: none; overflow: visible;">
              <div class="Polaris-TextContainer">
                <p>Your mailing list lets you contact customers or visitors who have shown an interest in your store. Reach out to them with exclusive offers or updates about your products.</p><a class="Polaris-Link" href="#" data-polaris-unstyled="true">Test link</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Props

children
React.ReactNode
コラプシブルの内部に表示するコンテンツです。

expandOnPrint
boolean
印刷時に折り畳み可能なコンテンツを表示するオプション

id (Required)
string
コラプシブルに一意の ID を割り当てます。アクセシビリティを確保するために、この ID をトリガーとなるコンポーネントの aria-controls プロップの値として渡します。

open (Required)
boolean
コラプシブルを展開するかどうかをトグルします。

transition

Object

duration
type: string
折りたたみ式アニメーションにトランジションデュレーションを割り当てます。

timingFunction
type: string
折りたたみ可能なアニメーションに遷移タイミング機能を割り当てる

Transition
コラプシブルにトランジション・プロパティを割り当てる

アクセシビリティ

Collapsible コンポーネントは、ボタンと組み合わせて使用します。折りたたみ可能なコンテンツを、それを制御するボタンの直後に配置することで、視覚や注意力に問題のあるマーチャントでも、どのコンテンツが影響を受けているかを簡単に確認できます。

Collapsible コンポーネントの required id prop を使用して、コンテンツに一意のid値を与えます。
ボタンコンポーネントのariaExpandedプロップを使用してaria-expanded属性を追加し、スクリーンリーダーのユーザーに展開または折りたたまれた状態を伝えます。
ボタンコンポーネントのariaControlsプロップを使用して、その値を Collapsible コンポーネントのid値に設定します。

Android

デフォルトの Collapsible コンポーネント

より多くのコンテンツを表示する必要がある場合、基本的な「show more」インタラクションに使用します。

アクセシビリティ

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

iOS

デフォルトの Collapsible コンポーネント

より多くのコンテンツを表示する必要がある場合、基本的な「show more」インタラクションに使用します。

アクセシビリティ

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

ベストプラクティス

折りたたみ可能なコンポーネントは

優先度の低い情報や、マーチャントが常に見る必要のない情報に使用する。
エラーメッセージや緊急を要する重要な情報を隠すためには使用しない。

コンテンツガイドライン

折りたたみ可能なコンテナは、拡張および折りたたみ可能な機能を持つカードで、カードのコンテンツガイドラインに従う必要があります。

Scrollable

scrollable コンポーネントは、利用規約などの長文コンテンツのためのコンテナで、スクロールが可能なため、マーチャントが読む際にはより多くのテキストを表示することができます。

例

Default scrollable container

ページ内のある領域を独立してスクロールできるようにする必要がある場合に使用します。これは、モーダルやその他のペインでよく使用され、コンテンツが折り返しの下や上にあることを示す視覚的な手がかりを提供するのに役立ちます。

React

<Card title="Terms of service" sectioned>
  <Scrollable shadow style={{height: '100px'}} focusable>
    <p>
      By signing up for the Shopify service (“Service”) or any of the services
      of Shopify Inc. (“Shopify”) you are agreeing to be bound by the following
      terms and conditions (“Terms of Service”). The Services offered by Shopify
      under the Terms of Service include various products and services to help
      you create and manage a retail store, whether an online store (“Online
      Services”), a physical retail store (“POS Services”), or both. Any new
      features or tools which are added to the current Service shall be also
      subject to the Terms of Service. You can review the current version of the
      Terms of Service at any time at https://www.shopify.com/legal/terms.
      Shopify reserves the right to update and change the Terms of Service by
      posting updates and changes to the Shopify website. You are advised to
      check the Terms of Service from time to time for any updates or changes
      that may impact you.
    </p>
  </Scrollable>
</Card>

HTML

<div>
  <div class="Polaris-Card">
    <div class="Polaris-Card__Header">
      <h2 class="Polaris-Heading">Terms of service</h2>
    </div>
    <div class="Polaris-Card__Section">
      <div class="Polaris-Scrollable Polaris-Scrollable--vertical Polaris-Scrollable--hasBottomShadow Polaris-Scrollable--verticalHasScrolling" data-polaris-scrollable="true" tabindex="0" style="height: 100px;">
        <p>By signing up for the Shopify service (“Service”) or any of the services of Shopify Inc. (“Shopify”) you are agreeing to be bound by the following terms and conditions (“Terms of Service”). The Services offered by Shopify under the Terms of Service include various products and services to help you create and manage a retail store, whether an online store (“Online Services”), a physical retail store (“POS Services”), or both. Any new features or tools which are added to the current Service shall be also subject to the Terms of Service. You can review the current version of the Terms of Service at any time at https://www.shopify.com/legal/terms. Shopify reserves the right to update and change the Terms of Service by posting updates and changes to the Shopify website. You are advised to check the Terms of Service from time to time for any updates or changes that may impact you.</p>
      </div>
    </div>
  </div>
  <div id="PolarisPortalsContainer"></div>
</div>

Props

children
React.ReactNode
スクロール可能な領域に表示するコンテンツ

focusable
boolean
children がフォーカスされていないときにscrollableにtabIndexを追加する。

hint
boolean
スクロール可能な場合、実装時にコンテンツがわずかに表示される

horizontal
boolean
Scroll content horizontally

shadow
boolean
コンテンツを水平方向にスクロール可能にする

vertical
boolean
コンテンツを縦方向にスクロール

onScrolledToBottom
() => void
スクロールエリアの最下部までスクロールしたときに呼び出される

ベストプラクティス

scrollable コンテナは以下のようにします。

コンテンツが折り返しの下または上にあることをマーチャントに知らせるための追加の視覚的な手がかりを提供するのに役立つ場合に使用する。
利用規約やその他の法的免責事項などの長さのテキストにのみ使用し、説明や行動を促すテキストには使用しない。

コンテンツガイドライン

scrollable コンテナは、スクロール機能を持つカードであり、カードのコンテンツガイドラインに従う必要があります。

Shopify アプリのご紹介

Discussion

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

【Polaris和訳】Components/Behavior

この記事について

Shopify アプリのご紹介

Behavior

Collapsible

Web

例

Props

アクセシビリティ

ベストプラクティス

コンテンツガイドライン

関連コンポーネント

Scrollable

例

Default scrollable container

Props

ベストプラクティス

コンテンツガイドライン

関連コンポーネント

Shopify アプリのご紹介

Discussion