SHARE

ナビゲーションバーの構築

ナビゲーションバーの構築

ナビゲーションバーの構築

2023/08/23

ナビゲーションは任意のデジタルインターフェース内で重要です。スマートコンポーネントを使用すると、カスタムインタラクティブナビゲーションコンポーネントを作成し、これをプロトタイプの残りの部分と完璧に連携させることができます。 このガイドでは、コンポーネントのネストの概念、イベント変数を使用してコンポーネント内の要素にイベントを追加し、これらをコンポーネントに渡す方法について説明します。 ネストされたコンポーネントを使用する主な利点の1つは、別のコンポーネント内の要素の一意のホバーステートなど、その状態に完全に制御できることです。

原子レベルから始める

Framerを使用すると、完全にインタラクティブでアニメーション化されたコンポーネントを作成し、他のコンポーネント内にコンポーネントをネストすることさえできます。 ウェブサイトのナビゲーションバーコンポーネントを構築しており、独自のユニークな相互作用を持つ2種類のネストされたコンポーネントを含むプロジェクトを作成しています。私たちのプロジェクトには、さまざまなネストされたコンポーネント、つまり5つのNavアイテムと1つのショッピングカートコンポーネントを含むナビゲーションバーが含まれます。 ネストされたコンポーネント、ナビゲーションリストアイテム、およびショッピングカートのデザインは、ナビゲーションバーの設計方法に影響を与えます。 このため、最適なワークフローには、「最も深い」ネストされたコンポーネントから始めて、そこから構築することが含まれます。

コンポーネントのネスト

これら2つのコンポーネントが準備できたら、これらをネストするコンポーネントを作成できます。 ナビゲーションバーを描画し、キャンバス上で選択し、ツールバーのコンポーネントツールをクリックします。 新しいコンポーネントに別のコンポーネントをネストするには、単に別のコンポーネントをコンポーネントキャンバスにドラッグし、設計したナビゲーションバー内に配置します。

ナビゲーションバーからの相互作用のトリガー

メインキャンバスに戻り、「衣類」をタップして完全に新しい画面に移動できるようにしたいと思います。 プロトタイピングコネクタを使用してコンポーネントを新しい画面に接続し、インタラクションを設定できます。 ただし、これはコンポーネント内のどこをタップしてもトリガーされるため、これは私たちがやりたいことではありません。 この場合、イベント変数が役立ちます。 これは、プロパティ(不透明度や塗りつぶしなど)にアタッチされていない特別なタイプの変数であり、代わりにイベントにアタッチされます。

Disclaimer

This piece has been written by humans; it has also been reviewed and approved by humans. However, there was a touch of AI: it assisted us in correcting grammar, enhancing syntax, and improving sentence clarity. Thanks for reading!

SHARE

CodeRabbit􏰁コードレビュー􏰀方法を変革する革新的なAI駆動型プラットフォームです。そ􏰀自動化されたコードレビューによって従来􏰀手作業による時間と労力を大幅に削減しなが ら、コード品質を向上させます。

CodeRabbit􏰁コード􏰀変更に対する洞察に満ちたフィードバックを提供し、コード􏰀効率や堅牢 性を高める改善案を提供します。

ニュースレターへ登録

CodeRabbit © 2023。

CodeRabbit􏰁コードレビュー􏰀方法を変革する革新的なAI駆動型プラットフォームです。そ􏰀自動化されたコードレビューによって従来􏰀手作業による時間と労力を大幅に削減しなが ら、コード品質を向上させます。

CodeRabbit􏰁コード􏰀変更に対する洞察に満ちたフィードバックを提供し、コード􏰀効率や堅牢 性を高める改善案を提供します。

ニュースレターへ登録

CodeRabbit © 2023。

CodeRabbit􏰁コードレビュー􏰀方法を変革する革新的なAI駆動型プラットフォームです。そ􏰀自動化されたコードレビューによって従来􏰀手作業による時間と労力を大幅に削減しなが ら、コード品質を向上させます。

CodeRabbit􏰁コード􏰀変更に対する洞察に満ちたフィードバックを提供し、コード􏰀効率や堅牢 性を高める改善案を提供します。

ニュースレターへ登録

CodeRabbit © 2023。