t-catalog
This component handles displaying the results of a catalog. It reads the parent catalog instance and displays the basic elements needed to paginate items.
Note that its API is minimal and does not cover most of catalog
options. Therefore it won't be suitable for many use cases. However, it's a good starting point to help you create your own component using the catalog
full API.
Read more about
catalog
to help you create a new instance based on your requirements.
Basic usage
By default, it shows a t-pagination
component below the results.
import { TCatalog, TText } from "@dija/tohama-components";
import { createCatalog } from "@dija/tohama-use";
import { defineComponent, onBeforeMount } from "vue";
export default defineComponent({
setup() {
const catalog = createCatalog({
/// catalog instance options
});
onBeforeMount(() => catalog.init());
return () => (
<TCatalog>
{catalog.entries.value.map((entry) => (
<TText>{entry.city}</TText>
))}
</TCatalog>
);
},
});
Infinite Mode
You can also specify the mode
to infinite
in the catalog options. In this mode, it will display two t-icon-button
components to load the previous and next entries.
The load previous button will only be displayed if the initial page is not the first.
import { TCatalog, TText } from "@dija/tohama-components";
import { createCatalog } from "@dija/tohama-use";
import { defineComponent, onBeforeMount } from "vue";
export default defineComponent({
setup() {
const catalog = createCatalog({
/// catalog instance options
mode: "infinite",
aggregates: {
page: 2,
},
});
onBeforeMount(() => catalog.init());
return () => (
<TCatalog>
{catalog.entries.value.map((entry) => (
<TText>{entry.city}</TText>
))}
</TCatalog>
);
},
});
Slots
You can also add components in the prepend
and append
slots. This is only a minimal example.
Cities
Showing 0 of 0 cities.
import { TCatalog, TText, TCard, TFlex } from "@dija/tohama-components";
import { createCatalog } from "@dija/tohama-use";
import { defineComponent, onBeforeMount } from "vue";
export default defineComponent({
setup() {
const catalog = createCatalog({
/// catalog instance options
aggregates: {
limit: 4,
},
});
onBeforeMount(() => catalog.init());
return () => (
<TCatalog
prepend={() => <TText>Cities</TText>}
append={() => (
<TText>
Showing {catalog.entries.value.length} of {catalog.total.value} cities.
</TText>
)}
>
<TCard design="raised" color="surface" py="sm" elevated px>
{catalog.entries.value.map((entry) => (
<TFlex justify="between" py="sm">
<TText>{entry.city}</TText>
<TText>{entry.country}</TText>
</TFlex>
))}
</TCard>
</TCatalog>
);
},
});
API
No options available