strapi-state-element

The strapi-state-element attribute specifies an element to be hidden or shown based on the state of the parent Strapify element. Elements with this attribute must be a descendant of an element with a strapi-collection, strapi-relation, strapi-repeatable, strapi-single-type-relation, strapi-single-type-repeatable, strapi-auth, strapi-form or strapi-ezforms-form attribute.

The possible values are loading, error and success. This is useful to show an element that indicates the collection is loading, or to display error/success messages to the user. It may also be used to display success/error messages on form and auth register/login attempts.

Below is the HTML to render a collection Person (plural people), with three state elements to display a message indicating an error, success or a loading state.

<div strapi-collection="people">
	<div strapi-template="">
		<p strapi-field="name">name</p>
		<p strapi-field="age">age</p>
	</div>

	<p strapi-state-element="loading">LOADING...</p>
	<p></p>
	<p strapi-state-element="success">SUCCESS</p>
	<p></p>
	<p strapi-state-element="error">ERROR</p>
	<p></p>
</div>

Below is the HTML to use state elements with a strapi-auth element.

<form strapi-auth="authenticate">
	<label for="username">Username</label>
	<input
		type="text"
		placeholder="Enter Username"
		name="username"
		strapi-auth-input="identifier"
		required
	/>

	<label for="psw">Password</label>
	<input
		type="password"
		placeholder="Enter Password"
		name="psw"
		strapi-auth-input="password"
		required
	/>

	<button type="submit" strapi-auth-submit>Login</button>

	<p strapi-state-element="loading">LOADING...</p>
	<p></p>
	<p strapi-state-element="success">SUCCESS</p>
	<p></p>
	<p strapi-state-element="error">ERROR</p>
	<p></p>
</form>

Allows Multiple Arguments: 🚫 NO

Examples

<p strapi-state-element="loading">LOADING...</p>

The p element is displayed only when the parent collection element is loading the Strapi data.

<p strapi-state-element="success">SUCCESS</p>

The p element is displayed only when the parent collection element has loaded the data and finished rendering.

<p strapi-state-element="error">ERROR</p>

The p element is displayed only when the parent collection element has failed to retrieve the Strapi data.