Change parameters based on grow and shrink status

Ignition
,
1

I have started using perspective and feel like I am doing something wrong. I want to make my widgets very resizable as all sorts of devices will use the final product, but I don’t want to keep adding breakpoint containers. Why is there no parameter in each component that allows it to know its own state. For example, if the component has a basis of 20px, but is currently 30px, that information would be critical. Currently I have a label which says “New South Wales” and rather than wrap when the label gets too small, I would like it to switch to “NSW”. But I cannot work out how to do this without breakpoint containers, and this is frustrating because I don’t want two labels, I want one which modifies itself. It feels like all the pieces are here, I can add a binding to the label, but what would the input be?

2

Instead of changing text, what about changing font size? I use rem units for everything from font sizes to basis settings. You can use media queries to set the root font size based on the orientation and screen width.

Others have also used container query units, cqh or cqw

However, to answer your question about switching text based on viewport size, you can bind to the {page.props.dimensions.viewport.width} prop.

Alternatively…

Alternatively, asking Claude for general web techniques, it recommended two labels and 2 classes with media queries:

1. CSS-based solutions (most flexible)
/* Show full text by default, abbreviation on mobile */
.psc-text-full { display: inline; }
.psc-text-short { display: none; }

@media (max-width: 768px) {
  .psc-text-full { display: none; }
  .psc-text-short { display: inline; }
}
<span class="psc-text-full">New South Wales</span>
<span class="psc-text-short">NSW</span>

You could fairly easily template this up in a view template

For Ignition, you’ll need to make the settings important:

.psc-text-full { display: inline !important; }
.psc-text-short { display: none !important; }

@media (max-width: 768px) {
  .psc-text-full { display: none !important;  }
  .psc-text-short { display: inline !important; }
}

TextLabel.zip (9.1 KB)