spz-currency#

#When to use

When you need to display an amount with a currency symbol.

#Code demonstration

#Basic usage

The simplest usage, you only need to specify the amount. The symbol, position, and format of the amount are all defaulted through the window.SHOPLAZZA object. The element will create a child with the money class to display the amount.

<script>
  window.SHOPLAZZA = {
    currency_symbol: '¥',
    currency_symbol_pos: 'left',
    money_format: 'amount'
  };
</script>

<spz-currency value="999998888" layout="container"></spz-currency>

#Add a custom class

Add a custom font color class to the child element with the money class.

<spz-currency container-class="text-pink-500" value="999998888" layout="container"></spz-currency>

#Customize the format of the amount

Customize the currency symbol and its position.

<spz-currency
  value="999998888"
  layout="container"
  format="amount_with_comma_separator"
  symbol="€"
  symbol-position="left"
></spz-currency>

Use a currency code, equivalent to the custom currency symbol and position above.

<spz-currency
  value="999998888"
  layout="container"
  format="amount_with_comma_separator"
  code="EUR"
></spz-currency>

#Properties

#formatType

#AI Summary (LLM Ready)

• Component ID: spz-currency
• One-line purpose: Display an amount with currency symbol.
• Detected attribute rows: 0
• Detected method subsections: 0
• Detected event subsections: 0
• Top attribute names: none (needs manual completion)
• Top method names: none (needs manual completion)
• Top event names: none (needs manual completion)
• Reading order: start from usage/examples, then verify attributes, methods, and events.
• Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/