⭐️
【Polaris和訳】Components/Lists and tables③
この記事について
この記事は、Polaris/Components/Lists and tablesの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Filters with children content
React
function FiltersExample() {
const [taggedWith, setTaggedWith] = useState(null)
const [queryValue, setQueryValue] = useState(null)
const handleTaggedWithChange = useCallback((value) => setTaggedWith(value), [])
const handleQueryValueChange = useCallback((value) => setQueryValue(value), [])
const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), [])
const handleQueryValueRemove = useCallback(() => setQueryValue(null), [])
const handleClearAll = useCallback(() => {
handleTaggedWithRemove()
handleQueryValueRemove()
}, [handleQueryValueRemove, handleTaggedWithRemove])
const filters = [
{
key: "taggedWith",
label: "Tagged with",
filter: (
<TextField
label="Tagged with"
value={taggedWith}
onChange={handleTaggedWithChange}
autoComplete="off"
labelHidden
/>
),
shortcut: true,
},
]
const appliedFilters = !isEmpty(taggedWith)
? [
{
key: "taggedWith",
label: disambiguateLabel("taggedWith", taggedWith),
onRemove: handleTaggedWithRemove,
},
]
: []
return (
<div style={{ height: "568px" }}>
<Card>
<ResourceList
resourceName={{ singular: "customer", plural: "customers" }}
filterControl={
<Filters
queryValue={queryValue}
filters={filters}
appliedFilters={appliedFilters}
onQueryChange={handleQueryValueChange}
onQueryClear={handleQueryValueRemove}
onClearAll={handleClearAll}
>
<div style={{ paddingLeft: "8px" }}>
<Button onClick={() => console.log("New filter saved")}>Save</Button>
</div>
</Filters>
}
items={[
{
id: 341,
url: "customers/341",
name: "Mae Jemison",
location: "Decatur, USA",
},
{
id: 256,
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 (
<ResourceList.Item
id={id}
url={url}
media={media}
accessibilityLabel={`View details for ${name}`}
>
<h3>
<TextStyle variation="strong">{name}</TextStyle>
</h3>
<div>{location}</div>
</ResourceList.Item>
)
}}
/>
</Card>
</div>
)
function disambiguateLabel(key, value) {
switch (key) {
case "taggedWith":
return `Tagged with ${value}`
default:
return value
}
}
function isEmpty(value) {
if (Array.isArray(value)) {
return value.length === 0
} else {
return value === "" || value == null
}
}
}
HTML
<div>
<div style="height: 568px;">
<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 data-key="taggedWith">
<button class="Polaris-Button" type="button">
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Text">Tagged with</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 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="PolarisTextField6Label"
for="PolarisTextField6"
class="Polaris-Label__Text"
>Filter customers</label
>
</div>
</div>
<div class="Polaris-Connected">
<div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
<div class="Polaris-TextField">
<div class="Polaris-TextField__Prefix" id="PolarisTextField6Prefix">
<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="PolarisTextField6"
placeholder="Filter customers"
autocomplete="off"
class="Polaris-TextField__Input Polaris-TextField__Input--hasClearButton"
aria-labelledby="PolarisTextField6Label PolarisTextField6Prefix"
aria-invalid="false"
value=""
/>
<div class="Polaris-TextField__Backdrop"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="Polaris-Filters-ConnectedFilterControl__MoreFiltersButtonContainer Polaris-Filters-ConnectedFilterControl--onlyButtonVisible"
>
<div class="Polaris-Filters-ConnectedFilterControl__Item">
<div>
<button class="Polaris-Button" type="button">
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Text">More filters</span></span
>
</button>
</div>
</div>
</div>
</div>
<div class="Polaris-Filters-ConnectedFilterControl__AuxiliaryContainer">
<div style="padding-left: 8px;">
<button class="Polaris-Button" type="button">
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Text">Save</span></span
>
</button>
</div>
</div>
</div>
<span class="Polaris-VisuallyHidden">
<div class="Polaris-Filters__TagsContainer" aria-live="polite"></div>
</span>
</div>
</div>
<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="341"
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="341">
<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="256"
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="256">
<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>
<div id="PolarisPortalsContainer">
<div data-portal-id="sheet-Polarisportal8"></div>
</div>
</div>
All filters disabled
React
function DisableAllFiltersExample() {
const [taggedWith, setTaggedWith] = useState(null)
const [queryValue, setQueryValue] = useState(null)
const handleTaggedWithChange = useCallback((value) => setTaggedWith(value), [])
const handleQueryValueChange = useCallback((value) => setQueryValue(value), [])
const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), [])
const handleQueryValueRemove = useCallback(() => setQueryValue(null), [])
const handleClearAll = useCallback(() => {
handleTaggedWithRemove()
handleQueryValueRemove()
}, [handleQueryValueRemove, handleTaggedWithRemove])
const filters = [
{
key: "taggedWith",
label: "Tagged with",
filter: (
<TextField
label="Tagged with"
value={taggedWith}
onChange={handleTaggedWithChange}
autoComplete="off"
labelHidden
/>
),
shortcut: true,
},
]
const appliedFilters = !isEmpty(taggedWith)
? [
{
key: "taggedWith",
label: disambiguateLabel("taggedWith", taggedWith),
onRemove: handleTaggedWithRemove,
},
]
: []
return (
<div style={{ height: "568px" }}>
<Card>
<ResourceList
resourceName={{ singular: "customer", plural: "customers" }}
filterControl={
<Filters
queryValue={queryValue}
filters={filters}
appliedFilters={appliedFilters}
onQueryChange={handleQueryValueChange}
onQueryClear={handleQueryValueRemove}
onClearAll={handleClearAll}
disabled
>
<div style={{ paddingLeft: "8px" }}>
<Button disabled onClick={() => console.log("New filter saved")}>
Save
</Button>
</div>
</Filters>
}
items={[
{
id: 341,
url: "customers/341",
name: "Mae Jemison",
location: "Decatur, USA",
},
{
id: 256,
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 (
<ResourceList.Item
id={id}
url={url}
media={media}
accessibilityLabel={`View details for ${name}`}
>
<h3>
<TextStyle variation="strong">{name}</TextStyle>
</h3>
<div>{location}</div>
</ResourceList.Item>
)
}}
/>
</Card>
</div>
)
function disambiguateLabel(key, value) {
switch (key) {
case "taggedWith":
return `Tagged with ${value}`
default:
return value
}
}
function isEmpty(value) {
if (Array.isArray(value)) {
return value.length === 0
} else {
return value === "" || value == null
}
}
}
HTML
<div>
<div style="height: 568px;">
<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 data-key="taggedWith">
<button class="Polaris-Button Polaris-Button--disabled" type="button" disabled="">
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Text">Tagged with</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 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="PolarisTextField8Label"
for="PolarisTextField8"
class="Polaris-Label__Text"
>Filter customers</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="PolarisTextField8Prefix">
<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="PolarisTextField8"
disabled=""
placeholder="Filter customers"
autocomplete="off"
class="Polaris-TextField__Input Polaris-TextField__Input--hasClearButton"
aria-labelledby="PolarisTextField8Label PolarisTextField8Prefix"
aria-invalid="false"
value=""
/>
<div class="Polaris-TextField__Backdrop"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="Polaris-Filters-ConnectedFilterControl__MoreFiltersButtonContainer Polaris-Filters-ConnectedFilterControl--onlyButtonVisible"
>
<div class="Polaris-Filters-ConnectedFilterControl__Item">
<div>
<button
class="Polaris-Button Polaris-Button--disabled"
type="button"
disabled=""
>
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Text">More filters</span></span
>
</button>
</div>
</div>
</div>
</div>
<div class="Polaris-Filters-ConnectedFilterControl__AuxiliaryContainer">
<div style="padding-left: 8px;">
<button class="Polaris-Button Polaris-Button--disabled" type="button" disabled="">
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Text">Save</span></span
>
</button>
</div>
</div>
</div>
<span class="Polaris-VisuallyHidden">
<div class="Polaris-Filters__TagsContainer" aria-live="polite"></div>
</span>
</div>
</div>
<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="341"
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="341">
<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="256"
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="256">
<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>
<div id="PolarisPortalsContainer">
<div data-portal-id="sheet-Polarisportal10"></div>
</div>
</div>
Some filters disabled
React
function DisableSomeFiltersExample() {
const [taggedWith, setTaggedWith] = useState(null)
const [vendor, setVendor] = useState(null)
const [queryValue, setQueryValue] = useState(null)
const handleTaggedWithChange = useCallback((value) => setTaggedWith(value), [])
const handleQueryValueChange = useCallback((value) => setQueryValue(value), [])
const handleVendorChange = useCallback((value) => setVendor(value), [])
const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), [])
const handleQueryValueRemove = useCallback(() => setQueryValue(null), [])
const handleVendorRemove = useCallback(() => setVendor(null), [])
const handleClearAll = useCallback(() => {
handleTaggedWithRemove()
handleQueryValueRemove()
handleVendorRemove()
}, [handleQueryValueRemove, handleTaggedWithRemove, handleVendorRemove])
const filters = [
{
key: "taggedWith",
label: "Tagged with",
filter: (
<TextField
label="Tagged with"
value={taggedWith}
onChange={handleTaggedWithChange}
autoComplete="off"
labelHidden
/>
),
shortcut: true,
},
{
key: "vendor",
label: "Vendor",
filter: (
<TextField
label="Vendor"
value={vendor}
onChange={handleVendorChange}
autoComplete="off"
labelHidden
/>
),
shortcut: true,
disabled: true,
},
]
const appliedFilters = !isEmpty(taggedWith)
? [
{
key: "taggedWith",
label: disambiguateLabel("taggedWith", taggedWith),
onRemove: handleTaggedWithRemove,
},
]
: []
return (
<div style={{ height: "568px" }}>
<Card>
<ResourceList
resourceName={{ singular: "customer", plural: "customers" }}
filterControl={
<Filters
queryValue={queryValue}
filters={filters}
appliedFilters={appliedFilters}
onQueryChange={handleQueryValueChange}
onQueryClear={handleQueryValueRemove}
onClearAll={handleClearAll}
>
<div style={{ paddingLeft: "8px" }}>
<Button disabled onClick={() => console.log("New filter saved")}>
Save
</Button>
</div>
</Filters>
}
items={[
{
id: 341,
url: "customers/341",
name: "Mae Jemison",
location: "Decatur, USA",
},
{
id: 256,
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 (
<ResourceList.Item
id={id}
url={url}
media={media}
accessibilityLabel={`View details for ${name}`}
>
<h3>
<TextStyle variation="strong">{name}</TextStyle>
</h3>
<div>{location}</div>
</ResourceList.Item>
)
}}
/>
</Card>
</div>
)
function disambiguateLabel(key, value) {
switch (key) {
case "taggedWith":
return `Tagged with ${value}`
default:
return value
}
}
function isEmpty(value) {
if (Array.isArray(value)) {
return value.length === 0
} else {
return value === "" || value == null
}
}
}
HTML
<div>
<div style="height: 568px;">
<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 data-key="taggedWith">
<button class="Polaris-Button" type="button">
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Text">Tagged with</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 data-key="vendor">
<button class="Polaris-Button Polaris-Button--disabled" type="button" disabled="">
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Text">Vendor</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 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="PolarisTextField4Label"
for="PolarisTextField4"
class="Polaris-Label__Text"
>Filter customers</label
>
</div>
</div>
<div class="Polaris-Connected">
<div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
<div class="Polaris-TextField">
<div class="Polaris-TextField__Prefix" id="PolarisTextField4Prefix">
<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="PolarisTextField4"
placeholder="Filter customers"
autocomplete="off"
class="Polaris-TextField__Input Polaris-TextField__Input--hasClearButton"
aria-labelledby="PolarisTextField4Label PolarisTextField4Prefix"
aria-invalid="false"
value=""
/>
<div class="Polaris-TextField__Backdrop"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="Polaris-Filters-ConnectedFilterControl__MoreFiltersButtonContainer Polaris-Filters-ConnectedFilterControl--onlyButtonVisible"
>
<div class="Polaris-Filters-ConnectedFilterControl__Item">
<div>
<button class="Polaris-Button" type="button">
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Text">More filters</span></span
>
</button>
</div>
</div>
</div>
</div>
<div class="Polaris-Filters-ConnectedFilterControl__AuxiliaryContainer">
<div style="padding-left: 8px;">
<button class="Polaris-Button Polaris-Button--disabled" type="button" disabled="">
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Text">Save</span></span
>
</button>
</div>
</div>
</div>
<span class="Polaris-VisuallyHidden">
<div class="Polaris-Filters__TagsContainer" aria-live="polite"></div>
</span>
</div>
</div>
<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="341"
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="341">
<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="256"
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="256">
<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>
<div id="PolarisPortalsContainer">
<div data-portal-id="sheet-Polarisportal5"></div>
</div>
</div>
Fiters without clear button
React
function Playground() {
const [taggedWith, setTaggedWith] = useState(null)
const [queryValue, setQueryValue] = useState(null)
const handleTaggedWithChange = useCallback((value) => setTaggedWith(value), [])
const handleQueryValueChange = useCallback((value) => setQueryValue(value), [])
const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), [])
const handleQueryValueRemove = useCallback(() => setQueryValue(null), [])
const handleClearAll = useCallback(() => {
handleTaggedWithRemove()
handleQueryValueRemove()
}, [handleQueryValueRemove, handleTaggedWithRemove])
const filters = [
{
key: "taggedWith",
label: "Tagged with",
filter: (
<TextField
label="Tagged with"
value={taggedWith}
onChange={handleTaggedWithChange}
autoComplete="off"
labelHidden
/>
),
shortcut: true,
hideClearButton: true,
},
]
const appliedFilters = !isEmpty(taggedWith)
? [
{
key: "taggedWith",
label: disambiguateLabel("taggedWith", taggedWith),
onRemove: handleTaggedWithRemove,
},
]
: []
return (
<div style={{ height: "568px" }}>
<Card>
<ResourceList
resourceName={{ singular: "customer", plural: "customers" }}
filterControl={
<Filters
queryValue={queryValue}
filters={filters}
appliedFilters={appliedFilters}
onQueryChange={handleQueryValueChange}
onQueryClear={handleQueryValueRemove}
onClearAll={handleClearAll}
>
<div style={{ paddingLeft: "8px" }}>
<Button disabled onClick={() => console.log("New filter saved")}>
Save
</Button>
</div>
</Filters>
}
items={[
{
id: 341,
url: "customers/341",
name: "Mae Jemison",
location: "Decatur, USA",
},
{
id: 256,
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 (
<ResourceList.Item
id={id}
url={url}
media={media}
accessibilityLabel={`View details for ${name}`}
>
<h3>
<TextStyle variation="strong">{name}</TextStyle>
</h3>
<div>{location}</div>
</ResourceList.Item>
)
}}
/>
</Card>
</div>
)
function disambiguateLabel(key, value) {
switch (key) {
case "taggedWith":
return `Tagged with ${value}`
default:
return value
}
}
function isEmpty(value) {
if (Array.isArray(value)) {
return value.length === 0
} else {
return value === "" || value == null
}
}
}
HTML
<div>
<div style="height: 568px;">
<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 data-key="taggedWith">
<button class="Polaris-Button" type="button">
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Text">Tagged with</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 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="PolarisTextField6Label"
for="PolarisTextField6"
class="Polaris-Label__Text"
>Filter customers</label
>
</div>
</div>
<div class="Polaris-Connected">
<div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
<div class="Polaris-TextField">
<div class="Polaris-TextField__Prefix" id="PolarisTextField6Prefix">
<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="PolarisTextField6"
placeholder="Filter customers"
autocomplete="off"
class="Polaris-TextField__Input Polaris-TextField__Input--hasClearButton"
aria-labelledby="PolarisTextField6Label PolarisTextField6Prefix"
aria-invalid="false"
value=""
/>
<div class="Polaris-TextField__Backdrop"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="Polaris-Filters-ConnectedFilterControl__MoreFiltersButtonContainer Polaris-Filters-ConnectedFilterControl--onlyButtonVisible"
>
<div class="Polaris-Filters-ConnectedFilterControl__Item">
<div>
<button class="Polaris-Button" type="button">
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Text">More filters</span></span
>
</button>
</div>
</div>
</div>
</div>
<div class="Polaris-Filters-ConnectedFilterControl__AuxiliaryContainer">
<div style="padding-left: 8px;">
<button class="Polaris-Button Polaris-Button--disabled" type="button" disabled="">
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Text">Save</span></span
>
</button>
</div>
</div>
</div>
<span class="Polaris-VisuallyHidden">
<div class="Polaris-Filters__TagsContainer" aria-live="polite"></div>
</span>
</div>
</div>
<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="341"
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="341">
<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="256"
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="256">
<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>
<div id="PolarisPortalsContainer">
<div data-portal-id="sheet-Polarisportal7"></div>
</div>
</div>
Filters with help text
React
function ResourceListFiltersExample() {
const [accountStatus, setAccountStatus] = useState(null)
const [moneySpent, setMoneySpent] = useState(null)
const [taggedWith, setTaggedWith] = useState(null)
const [queryValue, setQueryValue] = useState(null)
const handleAccountStatusChange = useCallback((value) => setAccountStatus(value), [])
const handleMoneySpentChange = useCallback((value) => setMoneySpent(value), [])
const handleTaggedWithChange = useCallback((value) => setTaggedWith(value), [])
const handleFiltersQueryChange = useCallback((value) => setQueryValue(value), [])
const handleAccountStatusRemove = useCallback(() => setAccountStatus(null), [])
const handleMoneySpentRemove = useCallback(() => setMoneySpent(null), [])
const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), [])
const handleQueryValueRemove = useCallback(() => setQueryValue(null), [])
const handleFiltersClearAll = useCallback(() => {
handleAccountStatusRemove()
handleMoneySpentRemove()
handleTaggedWithRemove()
handleQueryValueRemove()
}, [
handleAccountStatusRemove,
handleMoneySpentRemove,
handleQueryValueRemove,
handleTaggedWithRemove,
])
const filters = [
{
key: "accountStatus",
label: "Account status",
filter: (
<ChoiceList
title="Account status"
titleHidden
choices={[
{ label: "Enabled", value: "enabled" },
{ label: "Not invited", value: "not invited" },
{ label: "Invited", value: "invited" },
{ label: "Declined", value: "declined" },
]}
selected={accountStatus || []}
onChange={handleAccountStatusChange}
allowMultiple
/>
),
shortcut: true,
},
{
key: "taggedWith",
label: "Tagged with",
filter: (
<TextField
label="Tagged with"
value={taggedWith}
onChange={handleTaggedWithChange}
autoComplete="off"
labelHidden
/>
),
shortcut: true,
},
{
key: "moneySpent",
label: "Money spent",
filter: (
<RangeSlider
label="Money spent is between"
labelHidden
value={moneySpent || [0, 500]}
prefix="$"
output
min={0}
max={2000}
step={1}
onChange={handleMoneySpentChange}
/>
),
},
]
const appliedFilters = []
if (!isEmpty(accountStatus)) {
const key = "accountStatus"
appliedFilters.push({
key,
label: disambiguateLabel(key, accountStatus),
onRemove: handleAccountStatusRemove,
})
}
if (!isEmpty(moneySpent)) {
const key = "moneySpent"
appliedFilters.push({
key,
label: disambiguateLabel(key, moneySpent),
onRemove: handleMoneySpentRemove,
})
}
if (!isEmpty(taggedWith)) {
const key = "taggedWith"
appliedFilters.push({
key,
label: disambiguateLabel(key, taggedWith),
onRemove: handleTaggedWithRemove,
})
}
return (
<div style={{ height: "568px" }}>
<Card>
<ResourceList
resourceName={{ singular: "customer", plural: "customers" }}
filterControl={
<Filters
queryValue={queryValue}
filters={filters}
appliedFilters={appliedFilters}
onQueryChange={handleFiltersQueryChange}
onQueryClear={handleQueryValueRemove}
onClearAll={handleFiltersClearAll}
helpText="To reactivate filtering, remove your current filters."
disabled
/>
}
items={[
{
id: 341,
url: "customers/341",
name: "Mae Jemison",
location: "Decatur, USA",
},
{
id: 256,
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 (
<ResourceList.Item
id={id}
url={url}
media={media}
accessibilityLabel={`View details for ${name}`}
>
<h3>
<TextStyle variation="strong">{name}</TextStyle>
</h3>
<div>{location}</div>
</ResourceList.Item>
)
}}
/>
</Card>
</div>
)
function disambiguateLabel(key, value) {
switch (key) {
case "moneySpent":
return `Money spent is between $${value[0]} and $${value[1]}`
case "taggedWith":
return `Tagged with ${value}`
case "accountStatus":
return value.map((val) => `Customer ${val}`).join(", ")
default:
return value
}
}
function isEmpty(value) {
if (Array.isArray(value)) {
return value.length === 0
} else {
return value === "" || value == null
}
}
}
HTML
<div>
<div style="height: 568px;">
<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 data-key="accountStatus">
<button class="Polaris-Button Polaris-Button--disabled" type="button" disabled="">
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Text">Account status</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 data-key="taggedWith">
<button class="Polaris-Button Polaris-Button--disabled" type="button" disabled="">
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Text">Tagged with</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 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="PolarisTextField10Label"
for="PolarisTextField10"
class="Polaris-Label__Text"
>Filter customers</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="PolarisTextField10Prefix">
<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="PolarisTextField10"
disabled=""
placeholder="Filter customers"
autocomplete="off"
class="Polaris-TextField__Input Polaris-TextField__Input--hasClearButton"
aria-labelledby="PolarisTextField10Label PolarisTextField10Prefix"
aria-invalid="false"
value=""
/>
<div class="Polaris-TextField__Backdrop"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="Polaris-Filters-ConnectedFilterControl__RightContainer">
<div class="Polaris-Filters-ConnectedFilterControl__Item">
<div>
<button
id="Activator-accountStatus"
class="Polaris-Button Polaris-Button--disabled"
type="button"
disabled=""
aria-controls="Polarispopover4"
aria-owns="Polarispopover4"
aria-expanded="false"
>
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Text">Account status</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 class="Polaris-Filters-ConnectedFilterControl__MoreFiltersButtonContainer">
<div class="Polaris-Filters-ConnectedFilterControl__Item">
<div>
<button
class="Polaris-Button Polaris-Button--disabled"
type="button"
disabled=""
>
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Text">More filters</span></span
>
</button>
</div>
</div>
</div>
</div>
</div>
<span class="Polaris-VisuallyHidden">
<div class="Polaris-Filters__TagsContainer" aria-live="polite"></div>
</span>
<div id="FiltersHelpText" class="Polaris-Filters__HelpText">
<span class="Polaris-TextStyle--variationSubdued"
>To reactivate filtering, remove your current filters.</span
>
</div>
</div>
</div>
<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="341"
aria-label="View details for Mae Jemison"
class="Polaris-ResourceItem__Link"
tabindex="0"
id="PolarisResourceListItemOverlay23"
href="customers/341"
data-polaris-unstyled="true"
></a>
<div class="Polaris-ResourceItem__Container" id="341">
<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="256"
aria-label="View details for Ellen Ochoa"
class="Polaris-ResourceItem__Link"
tabindex="0"
id="PolarisResourceListItemOverlay24"
href="customers/256"
data-polaris-unstyled="true"
></a>
<div class="Polaris-ResourceItem__Container" id="256">
<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>
<div id="PolarisPortalsContainer">
<div data-portal-id="sheet-Polarisportal15"></div>
<div data-portal-id="popover-Polarisportal16"></div>
</div>
</div>
,
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion