Mantineを使用して、改行を有効にしたテキストを表示するためには、Textコンポーネントと<br />タグを使用して改行を追加する方法があります。または、Textコンポーネントのcomponentプロパティを使って、HTMLの<p>タグを使用することもできます。以下にその例を示します。
1. <br />タグを使って改行を追加する方法
import { Text } from '@mantine/core';
function TaskInstructions() {
return (
<Text>
タスクのステータスを変更するには、2つの方法があります。<br /><br />
1. ドラッグアンドドロップでの変更<br />
- タスクカードをドラッグアンドドロップし、該当のステータスエリアへタスクカードを移動してください。<br /><br />
2. ステータスボタンでの変更<br />
- タスクカード左下のステータスボタンをクリックしてください。<br />
- 移動先のステータス候補が表示されるので、該当のステータスを選択してください。<br />
- 選択後、タスクカードが選択したステータスへ移動します。
</Text>
);
}
export default TaskInstructions;
2. componentプロパティを使って<p>タグを使用する方法
import { Text } from '@mantine/core';
function TaskInstructions() {
return (
<Text component="p">
タスクのステータスを変更するには、2つの方法があります。
<p>1. ドラッグアンドドロップでの変更</p>
<ul>
<li>タスクカードをドラッグアンドドロップし、該当のステータスエリアへタスクカードを移動してください。</li>
</ul>
<p>2. ステータスボタンでの変更</p>
<ul>
<li>タスクカード左下のステータスボタンをクリックしてください。</li>
<li>移動先のステータス候補が表示されるので、該当のステータスを選択してください。</li>
<li>選択後、タスクカードが選択したステータスへ移動します。</li>
</ul>
</Text>
);
}
export default TaskInstructions;
このようにして、MantineのTextコンポーネントを使いながら改行を有効にしてテキストを表示することができます。どちらの方法でも目的を達成できますが、HTMLタグを直接使用する方法の方が柔軟で、リストや段落のような複雑な構造を扱う際に便利です。
株式会社Grandreamでは、フルリモートであなたのスキルを活かし、活躍できるエンジニアを募集しております。
詳しくは採用ページをご確認いただき、お気軽にお問い合わせください。
