⭐️
【Polaris和訳】Components/Lists and tables⑧
この記事について
この記事は、Polaris/Components/Lists and tablesの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Simple resource item
基本的なリソースアイテムで、使用時に詳細が記入されています。
React
function ResourceItemExample() {
const [selectedItems, setSelectedItems] = useState([])
return (
<Card>
<ResourceList
resourceName={{ singular: "blog post", plural: "blog posts" }}
items={[
{
id: 6,
url: "posts/6",
title: "How To Get Value From Wireframes",
author: "Jonathan Mangrove",
},
]}
selectedItems={selectedItems}
onSelectionChange={setSelectedItems}
selectable
renderItem={(item) => {
const { id, url, title, author } = item
const authorMarkup = author ? <div>by {author}</div> : null
return (
<ResourceItem
id={id}
url={url}
accessibilityLabel={`View details for ${title}`}
name={title}
>
<h3>
<TextStyle variation="strong">{title}</TextStyle>
</h3>
{authorMarkup}
</ResourceItem>
)
}}
/>
</Card>
)
}
HTML
<div>
<div class="Polaris-Card">
<div class="Polaris-ResourceList__ResourceListWrapper">
<div class="Polaris-ResourceList__HeaderOuterWrapper">
<div>
<div></div>
<div>
<div
class="Polaris-ResourceList__HeaderWrapper Polaris-ResourceList__HeaderWrapper--hasSelect"
>
<div class="Polaris-ResourceList__HeaderContentWrapper">
<div class="Polaris-ResourceList__HeaderTitleWrapper">Showing 1 blog post</div>
<div class="Polaris-ResourceList__CheckableButtonWrapper">
<div
class="Polaris-CheckableButton Polaris-CheckableButton__CheckableButton--plain"
>
<div class="Polaris-CheckableButton__Checkbox">
<label
class="Polaris-Choice Polaris-Choice--labelHidden"
for="PolarisCheckbox1"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="PolarisCheckbox1"
type="checkbox"
class="Polaris-Checkbox__Input"
aria-invalid="false"
role="checkbox"
aria-checked="false"
value="" /><span class="Polaris-Checkbox__Backdrop"></span
><span class="Polaris-Checkbox__Icon"
><span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><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">Select blog post</span></label
>
</div>
<span class="Polaris-CheckableButton__Label">Showing 1 blog post</span>
</div>
</div>
<div class="Polaris-ResourceList__SelectButtonWrapper">
<button class="Polaris-Button" type="button">
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Icon"
><span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M4.5 3A1.5 1.5 0 0 0 3 4.5v11A1.5 1.5 0 0 0 4.5 17h11a1.5 1.5 0 0 0 1.5-1.5v-11A1.5 1.5 0 0 0 15.5 3h-11zm9.207 5.707a1 1 0 0 0-1.414-1.414L9 10.586 7.707 9.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4z"
></path></svg></span></span
><span class="Polaris-Button__Text">Select</span></span
>
</button>
</div>
</div>
<div class="Polaris-ResourceList__BulkActionsWrapper">
<div>
<div
class="Polaris-BulkActions__Group Polaris-BulkActions__Group--largeScreen Polaris-BulkActions__Group--exited"
>
<div class="Polaris-BulkActions__ButtonGroupWrapper">
<div class="Polaris-CheckableButton">
<div class="Polaris-CheckableButton__Checkbox">
<label
class="Polaris-Choice Polaris-Choice--labelHidden"
for="PolarisCheckbox3"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="PolarisCheckbox3"
type="checkbox"
class="Polaris-Checkbox__Input"
aria-invalid="false"
role="checkbox"
aria-checked="false"
value="" /><span class="Polaris-Checkbox__Backdrop"></span
><span class="Polaris-Checkbox__Icon"
><span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><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">Select blog post</span></label
>
</div>
<span class="Polaris-CheckableButton__Label">0 selected</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ul class="Polaris-ResourceList" aria-live="polite">
<li class="Polaris-ResourceItem__ListItem">
<div class="Polaris-ResourceItem__ItemWrapper">
<div class="Polaris-ResourceItem Polaris-ResourceItem--selectable" data-href="posts/6">
<a
aria-describedby="6"
aria-label="View details for How To Get Value From Wireframes"
class="Polaris-ResourceItem__Link"
tabindex="0"
id="PolarisResourceListItemOverlay2"
href="posts/6"
data-polaris-unstyled="true"
></a>
<div class="Polaris-ResourceItem__Container" id="6">
<div class="Polaris-ResourceItem__Owned Polaris-ResourceItem__OwnedNoMedia">
<div class="Polaris-ResourceItem__Handle">
<div class="Polaris-ResourceItem__CheckboxWrapper">
<div>
<label
class="Polaris-Choice Polaris-Choice--labelHidden"
for="PolarisResourceListItemCheckbox2"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="PolarisResourceListItemCheckbox2"
type="checkbox"
class="Polaris-Checkbox__Input"
aria-invalid="false"
role="checkbox"
aria-checked="false"
value="" /><span class="Polaris-Checkbox__Backdrop"></span
><span class="Polaris-Checkbox__Icon"
><span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><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"
>How To Get Value From Wireframes</span
></label
>
</div>
</div>
</div>
</div>
<div class="Polaris-ResourceItem__Content">
<h3>
<span class="Polaris-TextStyle--variationStrong"
>How To Get Value From Wireframes</span
>
</h3>
<div>by Jonathan Mangrove</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
Item with media
メディア要素には、アバターやサムネイルなどの小サイズの画像を入れることができます。
React
<Card>
<ResourceList
resourceName={{ singular: "customer", plural: "customers" }}
items={[
{
id: 145,
url: "customers/145",
avatarSource:
"https://burst.shopifycdn.com/photos/freelance-designer-working-on-laptop.jpg?width=746",
name: "Yi So-Yeon",
location: "Gwangju, South Korea",
},
]}
renderItem={(item) => {
const { id, url, avatarSource, name, location } = item
return (
<ResourceItem
id={id}
url={url}
media={<Avatar customer size="medium" name={name} source={avatarSource} />}
accessibilityLabel={`View details for ${name}`}
name={name}
>
<h3>
<TextStyle variation="strong">{name}</TextStyle>
</h3>
<div>{location}</div>
</ResourceItem>
)
}}
/>
</Card>
HTML
<div>
<div class="Polaris-Card">
<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" data-href="customers/145">
<a
aria-describedby="145"
aria-label="View details for Yi So-Yeon"
class="Polaris-ResourceItem__Link"
tabindex="0"
id="PolarisResourceListItemOverlay4"
href="customers/145"
data-polaris-unstyled="true"
></a>
<div class="Polaris-ResourceItem__Container" id="145">
<div class="Polaris-ResourceItem__Owned">
<div class="Polaris-ResourceItem__Media">
<span
aria-label="Yi So-Yeon"
role="img"
class="Polaris-Avatar Polaris-Avatar--sizeMedium Polaris-Avatar--hasImage"
><img
src="https://burst.shopifycdn.com/photos/freelance-designer-working-on-laptop.jpg?width=746"
class="Polaris-Avatar__Image"
alt=""
role="presentation"
/></span>
</div>
</div>
<div class="Polaris-ResourceItem__Content">
<h3><span class="Polaris-TextStyle--variationStrong">Yi So-Yeon</span></h3>
<div>Gwangju, South Korea</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
Item with shortcut actions
ショートカットアクションは、リソースの詳細ページから人気のあるアクションを表示し、簡単にアクセスできるようにします。ショートカットアクションは、リストのすべてのアイテムで利用できます。
React
<Card>
<ResourceList
resourceName={{ singular: "customer", plural: "customers" }}
items={[
{
id: 145,
url: "customers/145",
avatarSource:
"https://burst.shopifycdn.com/photos/freelance-designer-working-on-laptop.jpg?width=746",
name: "Yi So-Yeon",
location: "Gwangju, South Korea",
latestOrderUrl: "orders/1456",
},
]}
renderItem={(item) => {
const { id, url, avatarSource, name, location, latestOrderUrl } = item
const shortcutActions = latestOrderUrl
? [{ content: "View latest order", url: latestOrderUrl }]
: null
return (
<ResourceItem
id={id}
url={url}
media={<Avatar customer size="medium" name={name} source={avatarSource} />}
shortcutActions={shortcutActions}
accessibilityLabel={`View details for ${name}`}
name={name}
>
<h3>
<TextStyle variation="strong">{name}</TextStyle>
</h3>
<div>{location}</div>
</ResourceItem>
)
}}
/>
</Card>
HTML
<div>
<div class="Polaris-Card">
<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" data-href="customers/145">
<a
aria-describedby="145"
aria-label="View details for Yi So-Yeon"
class="Polaris-ResourceItem__Link"
tabindex="0"
id="PolarisResourceListItemOverlay6"
href="customers/145"
data-polaris-unstyled="true"
></a>
<div class="Polaris-ResourceItem__Container" id="145">
<div class="Polaris-ResourceItem__Owned">
<div class="Polaris-ResourceItem__Media">
<span
aria-label="Yi So-Yeon"
role="img"
class="Polaris-Avatar Polaris-Avatar--sizeMedium Polaris-Avatar--hasImage"
><img
src="https://burst.shopifycdn.com/photos/freelance-designer-working-on-laptop.jpg?width=746"
class="Polaris-Avatar__Image"
alt=""
role="presentation"
/></span>
</div>
</div>
<div class="Polaris-ResourceItem__Content">
<h3><span class="Polaris-TextStyle--variationStrong">Yi So-Yeon</span></h3>
<div>Gwangju, South Korea</div>
</div>
<div class="Polaris-ResourceItem__Actions">
<div
class="Polaris-ButtonGroup Polaris-ButtonGroup--segmented"
data-buttongroup-segmented="true"
>
<div class="Polaris-ButtonGroup__Item">
<a
class="Polaris-Button Polaris-Button--sizeSlim"
href="orders/1456"
data-polaris-unstyled="true"
><span class="Polaris-Button__Content"
><span class="Polaris-Button__Text">View latest order</span></span
></a
>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
Item with vercel alignment
アイテムのコンテンツの垂直方向の配置を調整します。
React
<Card>
<ResourceList
resourceName={{ singular: "customer", plural: "customers" }}
items={[
{
id: 145,
url: "customers/145",
avatarSource:
"https://burst.shopifycdn.com/photos/freelance-designer-working-on-laptop.jpg?width=746",
name: "Yi So-Yeon",
location: "Gwangju, South Korea",
lastOrder: "Emerald Silk Gown",
},
]}
renderItem={(item) => {
const { id, url, avatarSource, name, location, lastOrder } = item
return (
<ResourceItem
verticalAlignment="center"
id={id}
url={url}
media={<Avatar customer size="medium" name={name} source={avatarSource} />}
accessibilityLabel={`View details for ${name}`}
name={name}
>
<h3>
<TextStyle variation="strong">{name}</TextStyle>
</h3>
<div>{location}</div>
<div>{lastOrder}</div>
</ResourceItem>
)
}}
/>
</Card>
HTML
<div>
<div class="Polaris-Card">
<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" data-href="customers/145">
<a
aria-describedby="145"
aria-label="View details for Yi So-Yeon"
class="Polaris-ResourceItem__Link"
tabindex="0"
id="PolarisResourceListItemOverlay8"
href="customers/145"
data-polaris-unstyled="true"
></a>
<div
class="Polaris-ResourceItem__Container Polaris-ResourceItem--alignmentCenter"
id="145"
>
<div class="Polaris-ResourceItem__Owned">
<div class="Polaris-ResourceItem__Media">
<span
aria-label="Yi So-Yeon"
role="img"
class="Polaris-Avatar Polaris-Avatar--sizeMedium Polaris-Avatar--hasImage"
><img
src="https://burst.shopifycdn.com/photos/freelance-designer-working-on-laptop.jpg?width=746"
class="Polaris-Avatar__Image"
alt=""
role="presentation"
/></span>
</div>
</div>
<div class="Polaris-ResourceItem__Content">
<h3><span class="Polaris-TextStyle--variationStrong">Yi So-Yeon</span></h3>
<div>Gwangju, South Korea</div>
<div>Emerald Silk Gown</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
アクセシビリティ
リソースアイテムは、そのアイテムの全ページ表現へのリンクとして機能します。それぞれのアイテムは固有の name prop を持つべきです。各 ResourceItem に対して、accessibilityLabel prop は、リンクにユニークな aria-label 値を与えるために使われるべきである。aria-label 値は、name 値を使ってリンクの目的を伝えるべきです。スクリーン・リーダーやその他の音声合成ツールを使用しているマーチャントは、各リンクを他のリンクと簡単に区別できるはずです。
リソースアイテムにカスタムコンテンツを追加する際には、すべてのテキストがすべてのユーザーに利用可能であること、また、すべてのカスタムコントロールにアクセス可能な固有の名前を付け、コントロールがアクティブになったときに何が起こるかをユーザーが理解できるようにすることを確認してください。
キーボード
リンクはデフォルトでは、enter/return キーで起動できます。
カスタムコントロールをリソースアイテムに追加する場合は、そのコントロールが以下のようになっていることを確認してください。
- キーボードで使用可能であること
- 論理的な順序でキーボードフォーカスを受ける
- フォーカスインジケータが表示されること
必須コンポーネント
リソースアイテムコンポーネントは、リソースリストコンポーネントにラップされている必要があります。
ベストプラクティス
リソースアイテムは
-
表示されるコンテキストの種類に合わせて作成する。
-
クリックされたときにアクションを実行する。アクションは、リソースの詳細ページに移動するか、アイテムの詳細を提供します。
リソースアイテムは、オプションで -
リソースの詳細ページから頻繁に行うアクションに素早くアクセスするためのショートカットアクションを提供する。
コンテンツのガイドライン
リソースアイテムは
- マーチャントが探しているアイテムを見つけるために必要な情報を提供する。
- リソースの種類に応じて、マーチャントのタスクをサポートする。
- コロンは避けてください。
- ショートカットアクションは、ボタンのための完全な動詞＋名詞の公式に従う必要はありません。
関連コンポーネント
関連コンテンツのシンプルなリストを表示するには、リストコンポーネントを使用します。
Resource list
リソースリストは、商品や顧客など、同じタイプのオブジェクトの集まりを表示します。リソースリストの主な役割は、マーチャントがオブジェクトを見つけて、そのオブジェクトの全ページ表示にナビゲートすることです。
リソースリストには以下の機能もあります。
- カスタマイズされたリストアイテムをサポートする
- 一度に複数のオブジェクトを操作できるバルクアクションの搭載
- 長いリストのソートやフィルタリングに対応
- 長いリストを読みやすくするためのページネーションとの組み合わせ
Simple resource list
シンプルなアイテムを持つリソースリストで、バルクアクション、ソート、フィルタリングはありません。
React
<Card>
<ResourceList
resourceName={{ singular: "customer", plural: "customers" }}
items={[
{
id: 100,
url: "customers/341",
name: "Mae Jemison",
location: "Decatur, USA",
},
{
id: 200,
url: "customers/256",
name: "Ellen Ochoa",
location: "Los Angeles, USA",
},
]}
renderItem={(item) => {
const { id, url, name, location } = item
const media = <Avatar customer size="medium" name={name} />
return (
<ResourceItem
id={id}
url={url}
media={media}
accessibilityLabel={`View details for ${name}`}
>
<h3>
<TextStyle variation="strong">{name}</TextStyle>
</h3>
<div>{location}</div>
</ResourceItem>
)
}}
/>
</Card>
HTML
<div>
<div class="Polaris-Card">
<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" data-href="customers/341">
<a
aria-describedby="100"
aria-label="View details for Mae Jemison"
class="Polaris-ResourceItem__Link"
tabindex="0"
id="PolarisResourceListItemOverlay3"
href="customers/341"
data-polaris-unstyled="true"
></a>
<div class="Polaris-ResourceItem__Container" id="100">
<div class="Polaris-ResourceItem__Owned">
<div class="Polaris-ResourceItem__Media">
<span
aria-label="Mae Jemison"
role="img"
class="Polaris-Avatar Polaris-Avatar--sizeMedium"
><span class="Polaris-Avatar__Initials"
><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
<path
fill="currentColor"
d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
></path></svg></span
></span>
</div>
</div>
<div class="Polaris-ResourceItem__Content">
<h3><span class="Polaris-TextStyle--variationStrong">Mae Jemison</span></h3>
<div>Decatur, USA</div>
</div>
</div>
</div>
</div>
</li>
<li class="Polaris-ResourceItem__ListItem">
<div class="Polaris-ResourceItem__ItemWrapper">
<div class="Polaris-ResourceItem" data-href="customers/256">
<a
aria-describedby="200"
aria-label="View details for Ellen Ochoa"
class="Polaris-ResourceItem__Link"
tabindex="0"
id="PolarisResourceListItemOverlay4"
href="customers/256"
data-polaris-unstyled="true"
></a>
<div class="Polaris-ResourceItem__Container" id="200">
<div class="Polaris-ResourceItem__Owned">
<div class="Polaris-ResourceItem__Media">
<span
aria-label="Ellen Ochoa"
role="img"
class="Polaris-Avatar Polaris-Avatar--sizeMedium"
><span class="Polaris-Avatar__Initials"
><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
<path
fill="currentColor"
d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
></path></svg></span
></span>
</div>
</div>
<div class="Polaris-ResourceItem__Content">
<h3><span class="Polaris-TextStyle--variationStrong">Ellen Ochoa</span></h3>
<div>Los Angeles, USA</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
Resource list with empty state
まだリソースが存在しないときに、リソースのリストの目的を説明するために使用します。これにより、読み込み状態のリストから、ゼロ、1、または多数のリソースが存在するリストへとスムーズに移行することができます。
React
function ResourceListWithEmptyStateExample() {
const items = []
const appliedFilters = []
const filters = []
const filterControl = (
<Filters
disabled={!items.length}
queryValue=""
filters={filters}
appliedFilters={appliedFilters}
/>
)
const emptyStateMarkup =
!appliedFilters.length && !items.length ? (
<EmptyState
heading="Upload a file to get started"
action={{ content: "Upload files" }}
image="https://cdn.shopify.com/s/files/1/2376/3301/products/emptystate-files.png"
>
<p>You can use the Files section to upload images, videos, and other documents</p>
</EmptyState>
) : undefined
return (
<Page title="Files">
<Layout>
<Layout.Section>
<Card>
<ResourceList
emptyState={emptyStateMarkup}
items={items}
renderItem={() => {}}
filterControl={filterControl}
resourceName={{ singular: "file", plural: "files" }}
/>
</Card>
</Layout.Section>
</Layout>
</Page>
)
}
HTML
<div>
<div class="Polaris-Page">
<div
class="Polaris-Page-Header Polaris-Page-Header--isSingleRow Polaris-Page-Header--mobileView Polaris-Page-Header--noBreadcrumbs Polaris-Page-Header--mediumTitle"
>
<div class="Polaris-Page-Header__Row">
<div class="Polaris-Page-Header__TitleWrapper">
<div>
<div class="Polaris-Header-Title__TitleAndSubtitleWrapper">
<h1 class="Polaris-Header-Title">Files</h1>
</div>
</div>
</div>
</div>
</div>
<div class="Polaris-Page__Content">
<div class="Polaris-Layout">
<div class="Polaris-Layout__Section">
<div class="Polaris-Card">
<div class="Polaris-ResourceList__ResourceListWrapper">
<div class="Polaris-ResourceList__FiltersWrapper">
<div class="Polaris-Filters">
<div
class="Polaris-Filters-ConnectedFilterControl__ProxyButtonContainer"
aria-hidden="true"
></div>
<div class="Polaris-Filters-ConnectedFilterControl__Wrapper">
<div
class="Polaris-Filters-ConnectedFilterControl Polaris-Filters-ConnectedFilterControl--right"
>
<div class="Polaris-Filters-ConnectedFilterControl__CenterContainer">
<div class="Polaris-Filters-ConnectedFilterControl__Item">
<div class="Polaris-Labelled--hidden">
<div class="Polaris-Labelled__LabelWrapper">
<div class="Polaris-Label">
<label
id="PolarisTextField2Label"
for="PolarisTextField2"
class="Polaris-Label__Text"
>Filter files</label
>
</div>
</div>
<div class="Polaris-Connected">
<div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
<div class="Polaris-TextField Polaris-TextField--disabled">
<div
class="Polaris-TextField__Prefix"
id="PolarisTextField2Prefix"
>
<span class="Polaris-Filters__SearchIcon"
><span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
d="M8 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm9.707 4.293-4.82-4.82A5.968 5.968 0 0 0 14 8 6 6 0 0 0 2 8a6 6 0 0 0 6 6 5.968 5.968 0 0 0 3.473-1.113l4.82 4.82a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414z"
></path></svg></span
></span>
</div>
<input
id="PolarisTextField2"
disabled=""
placeholder="Filter files"
autocomplete="off"
class="Polaris-TextField__Input Polaris-TextField__Input--hasClearButton"
aria-labelledby="PolarisTextField2Label PolarisTextField2Prefix"
aria-invalid="false"
value=""
/>
<div class="Polaris-TextField__Backdrop"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<span class="Polaris-VisuallyHidden">
<div class="Polaris-Filters__TagsContainer" aria-live="polite"></div>
</span>
</div>
</div>
<div class="Polaris-EmptyState Polaris-EmptyState--withinContentContainer">
<div class="Polaris-EmptyState__Section">
<div class="Polaris-EmptyState__DetailsContainer">
<div class="Polaris-EmptyState__Details">
<div class="Polaris-TextContainer">
<p class="Polaris-DisplayText Polaris-DisplayText--sizeSmall">
Upload a file to get started
</p>
<div class="Polaris-EmptyState__Content">
<p>
You can use the Files section to upload images, videos, and other
documents
</p>
</div>
</div>
<div class="Polaris-EmptyState__Actions">
<div
class="Polaris-Stack Polaris-Stack--spacingTight Polaris-Stack--distributionCenter Polaris-Stack--alignmentCenter"
>
<div class="Polaris-Stack__Item">
<button class="Polaris-Button Polaris-Button--primary" type="button">
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Text">Upload files</span></span
>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="Polaris-EmptyState__ImageContainer">
<img
src="https://cdn.shopify.com/s/files/1/2376/3301/products/emptystate-files.png"
role="presentation"
alt=""
class="Polaris-EmptyState__Image"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="PolarisPortalsContainer">
<div data-portal-id="sheet-Polarisportal2"></div>
</div>
</div>
Resource list with selection and no bulk actions
シンプルなアイテムとセレクションを持つリソースリストです。
React
function ResourceListWithSelectionExample() {
const [selectedItems, setSelectedItems] = useState([])
const resourceName = {
singular: "customer",
plural: "customers",
}
const items = [
{
id: 101,
url: "customers/341",
name: "Mae Jemison",
location: "Decatur, USA",
},
{
id: 201,
url: "customers/256",
name: "Ellen Ochoa",
location: "Los Angeles, USA",
},
]
return (
<Card>
<ResourceList
resourceName={resourceName}
items={items}
renderItem={renderItem}
selectedItems={selectedItems}
onSelectionChange={setSelectedItems}
selectable
/>
</Card>
)
function renderItem(item) {
const { id, url, name, location } = item
const media = <Avatar customer size="medium" name={name} />
return (
<ResourceItem id={id} url={url} media={media} accessibilityLabel={`View details for ${name}`}>
<h3>
<TextStyle variation="strong">{name}</TextStyle>
</h3>
<div>{location}</div>
</ResourceItem>
)
}
}
HTML
<div>
<div class="Polaris-Card">
<div class="Polaris-ResourceList__ResourceListWrapper">
<div class="Polaris-ResourceList__HeaderOuterWrapper">
<div>
<div></div>
<div>
<div
class="Polaris-ResourceList__HeaderWrapper Polaris-ResourceList__HeaderWrapper--hasSelect"
>
<div class="Polaris-ResourceList__HeaderContentWrapper">
<div class="Polaris-ResourceList__HeaderTitleWrapper">Showing 2 customers</div>
<div class="Polaris-ResourceList__CheckableButtonWrapper">
<div
class="Polaris-CheckableButton Polaris-CheckableButton__CheckableButton--plain"
>
<div class="Polaris-CheckableButton__Checkbox">
<label
class="Polaris-Choice Polaris-Choice--labelHidden"
for="PolarisCheckbox1"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="PolarisCheckbox1"
type="checkbox"
class="Polaris-Checkbox__Input"
aria-invalid="false"
role="checkbox"
aria-checked="false"
value="" /><span class="Polaris-Checkbox__Backdrop"></span
><span class="Polaris-Checkbox__Icon"
><span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><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">Select all 2 customers</span></label
>
</div>
<span class="Polaris-CheckableButton__Label">Showing 2 customers</span>
</div>
</div>
<div class="Polaris-ResourceList__SelectButtonWrapper">
<button class="Polaris-Button" type="button">
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Icon"
><span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M4.5 3A1.5 1.5 0 0 0 3 4.5v11A1.5 1.5 0 0 0 4.5 17h11a1.5 1.5 0 0 0 1.5-1.5v-11A1.5 1.5 0 0 0 15.5 3h-11zm9.207 5.707a1 1 0 0 0-1.414-1.414L9 10.586 7.707 9.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4z"
></path></svg></span></span
><span class="Polaris-Button__Text">Select</span></span
>
</button>
</div>
</div>
<div class="Polaris-ResourceList__BulkActionsWrapper">
<div>
<div
class="Polaris-BulkActions__Group Polaris-BulkActions__Group--largeScreen Polaris-BulkActions__Group--exited"
>
<div class="Polaris-BulkActions__ButtonGroupWrapper">
<div class="Polaris-CheckableButton">
<div class="Polaris-CheckableButton__Checkbox">
<label
class="Polaris-Choice Polaris-Choice--labelHidden"
for="PolarisCheckbox3"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="PolarisCheckbox3"
type="checkbox"
class="Polaris-Checkbox__Input"
aria-invalid="false"
role="checkbox"
aria-checked="false"
value="" /><span class="Polaris-Checkbox__Backdrop"></span
><span class="Polaris-Checkbox__Icon"
><span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><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"
>Select all 2 customers</span
></label
>
</div>
<span class="Polaris-CheckableButton__Label">0 selected</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ul class="Polaris-ResourceList" aria-live="polite">
<li class="Polaris-ResourceItem__ListItem">
<div class="Polaris-ResourceItem__ItemWrapper">
<div
class="Polaris-ResourceItem Polaris-ResourceItem--selectable"
data-href="customers/341"
>
<a
aria-describedby="101"
aria-label="View details for Mae Jemison"
class="Polaris-ResourceItem__Link"
tabindex="0"
id="PolarisResourceListItemOverlay7"
href="customers/341"
data-polaris-unstyled="true"
></a>
<div class="Polaris-ResourceItem__Container" id="101">
<div class="Polaris-ResourceItem__Owned">
<div class="Polaris-ResourceItem__Handle">
<div class="Polaris-ResourceItem__CheckboxWrapper">
<div>
<label
class="Polaris-Choice Polaris-Choice--labelHidden"
for="PolarisResourceListItemCheckbox7"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="PolarisResourceListItemCheckbox7"
type="checkbox"
class="Polaris-Checkbox__Input"
aria-invalid="false"
role="checkbox"
aria-checked="false"
value="" /><span class="Polaris-Checkbox__Backdrop"></span
><span class="Polaris-Checkbox__Icon"
><span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><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"
>View details for Mae Jemison</span
></label
>
</div>
</div>
</div>
<div class="Polaris-ResourceItem__Media">
<span
aria-label="Mae Jemison"
role="img"
class="Polaris-Avatar Polaris-Avatar--sizeMedium"
><span class="Polaris-Avatar__Initials"
><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
<path
fill="currentColor"
d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
></path></svg></span
></span>
</div>
</div>
<div class="Polaris-ResourceItem__Content">
<h3><span class="Polaris-TextStyle--variationStrong">Mae Jemison</span></h3>
<div>Decatur, USA</div>
</div>
</div>
</div>
</div>
</li>
<li class="Polaris-ResourceItem__ListItem">
<div class="Polaris-ResourceItem__ItemWrapper">
<div
class="Polaris-ResourceItem Polaris-ResourceItem--selectable"
data-href="customers/256"
>
<a
aria-describedby="201"
aria-label="View details for Ellen Ochoa"
class="Polaris-ResourceItem__Link"
tabindex="0"
id="PolarisResourceListItemOverlay8"
href="customers/256"
data-polaris-unstyled="true"
></a>
<div class="Polaris-ResourceItem__Container" id="201">
<div class="Polaris-ResourceItem__Owned">
<div class="Polaris-ResourceItem__Handle">
<div class="Polaris-ResourceItem__CheckboxWrapper">
<div>
<label
class="Polaris-Choice Polaris-Choice--labelHidden"
for="PolarisResourceListItemCheckbox8"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="PolarisResourceListItemCheckbox8"
type="checkbox"
class="Polaris-Checkbox__Input"
aria-invalid="false"
role="checkbox"
aria-checked="false"
value="" /><span class="Polaris-Checkbox__Backdrop"></span
><span class="Polaris-Checkbox__Icon"
><span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><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"
>View details for Ellen Ochoa</span
></label
>
</div>
</div>
</div>
<div class="Polaris-ResourceItem__Media">
<span
aria-label="Ellen Ochoa"
role="img"
class="Polaris-Avatar Polaris-Avatar--sizeMedium"
><span class="Polaris-Avatar__Initials"
><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
<path
fill="currentColor"
d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
></path></svg></span
></span>
</div>
</div>
<div class="Polaris-ResourceItem__Content">
<h3><span class="Polaris-TextStyle--variationStrong">Ellen Ochoa</span></h3>
<div>Los Angeles, USA</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
Resource list with bulk actions
マーチャントがアイテムを選択し、その選択に対してアクションを実行することができます。
React
function ResourceListWithBulkActionsExample() {
const [selectedItems, setSelectedItems] = useState([])
const resourceName = {
singular: "customer",
plural: "customers",
}
const items = [
{
id: 103,
url: "customers/341",
name: "Mae Jemison",
location: "Decatur, USA",
},
{
id: 203,
url: "customers/256",
name: "Ellen Ochoa",
location: "Los Angeles, USA",
},
]
const promotedBulkActions = [
{
content: "Edit customers",
onAction: () => console.log("Todo: implement bulk edit"),
},
]
const bulkActions = [
{
content: "Add tags",
onAction: () => console.log("Todo: implement bulk add tags"),
},
{
content: "Remove tags",
onAction: () => console.log("Todo: implement bulk remove tags"),
},
{
content: "Delete customers",
onAction: () => console.log("Todo: implement bulk delete"),
},
]
return (
<Card>
<ResourceList
resourceName={resourceName}
items={items}
renderItem={renderItem}
selectedItems={selectedItems}
onSelectionChange={setSelectedItems}
promotedBulkActions={promotedBulkActions}
bulkActions={bulkActions}
/>
</Card>
)
function renderItem(item) {
const { id, url, name, location } = item
const media = <Avatar customer size="medium" name={name} />
return (
<ResourceItem id={id} url={url} media={media} accessibilityLabel={`View details for ${name}`}>
<h3>
<TextStyle variation="strong">{name}</TextStyle>
</h3>
<div>{location}</div>
</ResourceItem>
)
}
}
HTML
<div>
<div class="Polaris-Card">
<div class="Polaris-ResourceList__ResourceListWrapper">
<div class="Polaris-ResourceList__HeaderOuterWrapper">
<div>
<div></div>
<div>
<div
class="Polaris-ResourceList__HeaderWrapper Polaris-ResourceList__HeaderWrapper--hasSelect"
>
<div class="Polaris-ResourceList__HeaderContentWrapper">
<div class="Polaris-ResourceList__HeaderTitleWrapper">Showing 2 customers</div>
<div class="Polaris-ResourceList__CheckableButtonWrapper">
<div
class="Polaris-CheckableButton Polaris-CheckableButton__CheckableButton--plain"
>
<div class="Polaris-CheckableButton__Checkbox">
<label
class="Polaris-Choice Polaris-Choice--labelHidden"
for="PolarisCheckbox4"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="PolarisCheckbox4"
type="checkbox"
class="Polaris-Checkbox__Input"
aria-invalid="false"
role="checkbox"
aria-checked="false"
value="" /><span class="Polaris-Checkbox__Backdrop"></span
><span class="Polaris-Checkbox__Icon"
><span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><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">Select all 2 customers</span></label
>
</div>
<span class="Polaris-CheckableButton__Label">Showing 2 customers</span>
</div>
</div>
<div class="Polaris-ResourceList__SelectButtonWrapper">
<button class="Polaris-Button" type="button">
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Icon"
><span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M4.5 3A1.5 1.5 0 0 0 3 4.5v11A1.5 1.5 0 0 0 4.5 17h11a1.5 1.5 0 0 0 1.5-1.5v-11A1.5 1.5 0 0 0 15.5 3h-11zm9.207 5.707a1 1 0 0 0-1.414-1.414L9 10.586 7.707 9.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4z"
></path></svg></span></span
><span class="Polaris-Button__Text">Select</span></span
>
</button>
</div>
</div>
<div class="Polaris-ResourceList__BulkActionsWrapper">
<div>
<div
class="Polaris-BulkActions__Group Polaris-BulkActions__Group--largeScreen Polaris-BulkActions__Group--exited"
>
<div class="Polaris-BulkActions__ButtonGroupWrapper">
<div
class="Polaris-ButtonGroup Polaris-ButtonGroup--segmented"
data-buttongroup-segmented="true"
>
<div class="Polaris-ButtonGroup__Item">
<div class="Polaris-CheckableButton">
<div class="Polaris-CheckableButton__Checkbox">
<label
class="Polaris-Choice Polaris-Choice--labelHidden"
for="PolarisCheckbox5"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="PolarisCheckbox5"
type="checkbox"
class="Polaris-Checkbox__Input"
aria-invalid="false"
role="checkbox"
aria-checked="false"
value="" /><span class="Polaris-Checkbox__Backdrop"></span
><span class="Polaris-Checkbox__Icon"
><span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><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"
>Select all 2 customers</span
></label
>
</div>
<span class="Polaris-CheckableButton__Label">0 selected</span>
</div>
</div>
<div class="Polaris-ButtonGroup__Item">
<div class="Polaris-BulkActions__BulkActionButton">
<button class="Polaris-Button" type="button">
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Text">Edit customers</span></span
>
</button>
</div>
</div>
<div class="Polaris-ButtonGroup__Item">
<div>
<div>
<div class="Polaris-BulkActions__BulkActionButton">
<button
class="Polaris-Button"
type="button"
tabindex="0"
aria-controls="Polarispopover2"
aria-owns="Polarispopover2"
aria-expanded="false"
>
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Text">More actions</span
><span class="Polaris-Button__Icon">
<div class="">
<span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ul class="Polaris-ResourceList" aria-live="polite">
<li class="Polaris-ResourceItem__ListItem">
<div class="Polaris-ResourceItem__ItemWrapper">
<div
class="Polaris-ResourceItem Polaris-ResourceItem--selectable"
data-href="customers/341"
>
<a
aria-describedby="103"
aria-label="View details for Mae Jemison"
class="Polaris-ResourceItem__Link"
tabindex="0"
id="PolarisResourceListItemOverlay11"
href="customers/341"
data-polaris-unstyled="true"
></a>
<div class="Polaris-ResourceItem__Container" id="103">
<div class="Polaris-ResourceItem__Owned">
<div class="Polaris-ResourceItem__Handle">
<div class="Polaris-ResourceItem__CheckboxWrapper">
<div>
<label
class="Polaris-Choice Polaris-Choice--labelHidden"
for="PolarisResourceListItemCheckbox11"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="PolarisResourceListItemCheckbox11"
type="checkbox"
class="Polaris-Checkbox__Input"
aria-invalid="false"
role="checkbox"
aria-checked="false"
value="" /><span class="Polaris-Checkbox__Backdrop"></span
><span class="Polaris-Checkbox__Icon"
><span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><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"
>View details for Mae Jemison</span
></label
>
</div>
</div>
</div>
<div class="Polaris-ResourceItem__Media">
<span
aria-label="Mae Jemison"
role="img"
class="Polaris-Avatar Polaris-Avatar--sizeMedium"
><span class="Polaris-Avatar__Initials"
><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
<path
fill="currentColor"
d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
></path></svg></span
></span>
</div>
</div>
<div class="Polaris-ResourceItem__Content">
<h3><span class="Polaris-TextStyle--variationStrong">Mae Jemison</span></h3>
<div>Decatur, USA</div>
</div>
</div>
</div>
</div>
</li>
<li class="Polaris-ResourceItem__ListItem">
<div class="Polaris-ResourceItem__ItemWrapper">
<div
class="Polaris-ResourceItem Polaris-ResourceItem--selectable"
data-href="customers/256"
>
<a
aria-describedby="203"
aria-label="View details for Ellen Ochoa"
class="Polaris-ResourceItem__Link"
tabindex="0"
id="PolarisResourceListItemOverlay12"
href="customers/256"
data-polaris-unstyled="true"
></a>
<div class="Polaris-ResourceItem__Container" id="203">
<div class="Polaris-ResourceItem__Owned">
<div class="Polaris-ResourceItem__Handle">
<div class="Polaris-ResourceItem__CheckboxWrapper">
<div>
<label
class="Polaris-Choice Polaris-Choice--labelHidden"
for="PolarisResourceListItemCheckbox12"
><span class="Polaris-Choice__Control"
><span class="Polaris-Checkbox"
><input
id="PolarisResourceListItemCheckbox12"
type="checkbox"
class="Polaris-Checkbox__Input"
aria-invalid="false"
role="checkbox"
aria-checked="false"
value="" /><span class="Polaris-Checkbox__Backdrop"></span
><span class="Polaris-Checkbox__Icon"
><span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><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"
>View details for Ellen Ochoa</span
></label
>
</div>
</div>
</div>
<div class="Polaris-ResourceItem__Media">
<span
aria-label="Ellen Ochoa"
role="img"
class="Polaris-Avatar Polaris-Avatar--sizeMedium"
><span class="Polaris-Avatar__Initials"
><svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
<path
fill="currentColor"
d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
></path></svg></span
></span>
</div>
</div>
<div class="Polaris-ResourceItem__Content">
<h3><span class="Polaris-TextStyle--variationStrong">Ellen Ochoa</span></h3>
<div>Los Angeles, USA</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div id="PolarisPortalsContainer">
<div data-portal-id="popover-Polarisportal3"></div>
</div>
</div>
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion