トマシープが学ぶ

アイコン

tooltip

Quick Start - Ant Design Mobile

アイコンはAntDesignのだけじゃ足りなかったので、MaterialDesignのも使った。しかもMaterialDesignってなんかいろいろ種類ある・・・？

VRのアイコンがこのページにはない。ARはあった。このページはReact用なのでアイコンやPackageインストールなどのコードがコピペできる

mui.com

VRのほうはGoogleフォントのMaterial Symbolsという新しいものにしかなかった。

fonts.google.com

Google Fontsはいったん置いておいて、ant designとmaterialdesignのアイコンだけを使ってやってみた

import { FloatButton } from 'antd';
import { FundOutlined, DesktopOutlined } from '@ant-design/icons';
import ViewInArOutlinedIcon from '@mui/icons-material/ViewInArOutlined';

～～

          <FloatButton.Group shape="circle" style={{ right: 24 }}>
          <Tooltip placement="left" title="XXX">
          <FloatButton icon={<FundOutlined/>} />
          </Tooltip>
          <Tooltip placement="left" title="PCで見る">
          <FloatButton icon={<DesktopOutlined/>} />
          </Tooltip>
            <Tooltip placement="left" title="ARで見る">
            <FloatButton icon={<ViewInArOutlinedIcon/>} />
            </Tooltip>
          </FloatButton.Group>

MaterialDesignのアイコン、そのままだと真ん中に入らないな～

これとか使うのか？？

www.npmjs.com

FloatButtonをToggleみたいにする

マイクオンオフみたいなのできるかな？ドキュメントには見当たらなかったけど

Colipotに聞いたらできた

            import { FloatButton } from 'antd';
            import { useState } from 'react'; // Import useState hook
import { AudioOutlined, AudioMutedOutlined } from '@ant-design/icons';

            export const MicToggle: React.FC = () => {
                const [isMuted, setIsMuted] = useState(false); // Add state for mute/unmute

                const handleToggle = () => {
                    setIsMuted(!isMuted); // Toggle the mute state
                };

                return (
                    <FloatButton
                        shape='circle'
                        type={isMuted ? 'default' : 'primary'} // Change the button type based on the mute state
                        style={{
                            left: '50%', // Left position 50%
                            transform: 'translateX(-50%)', // Center alignment
                            backgroundColor: isMuted ? '#f0f0f0' : undefined, // Change the background color based on the mute state
                        }}
                        icon={isMuted ? <AudioMutedOutlined /> : <AudioOutlined />} // Change the icon based on the mute state
                        onClick={handleToggle} // Add onClick event handler
                    />
                );
            };

横長ボタン

Mobileのほうのコンポーネントにあった横長のボタン

Mobileは別パッケージなのか

両方のButtonを使ったら怒られた

ダイアログ

デフォルトだとOKとかが中国語になる？一応OKとかの項目を独自の文字にするコードはあったけど、そもそもデフォルトを変えたい

この記事に書いてある/src/index.jsとか見当たらない

それっぽいファイルにも書いてないし、書き込んでも変わらない

こっちの記事もやったが変わらない

Avatar

            {/* アバター */}
            <div style={{ position: 'relative' }}>
                <Avatar
                    style={{
                        zIndex: 1,
                        position: 'absolute',
                        top: '24px', // 上から10%の位置
                        right: '24px', // 右から10%の位置
                    }}
                    icon={<UserOutlined />}
                />
            </div>

カード

使いたいのと完全に同じデザインはないので、このデザインのいらない部分を消して使った

            <Card style={{ width: 300 }}>
                <Meta avatar={<Avatar src='https://api.dicebear.com/7.x/miniavs/svg?seed=8' />} 
title='Test1' 
description='ｘｘｘｘ' />
            </Card>

Grid（うまくいかない）

コンポーネント化したCardをGrid状に表示するスクリプトをcopilotに書いてもらった。

これが理想形

なのだが、同じCardGridコンポーネントを呼び出しているのに、別のページではこんな感じでマージンが固定されない

なんで

Progress Bar

Selector

InputField

これもモバイル用とPC用両方ある・・・PC用のほうがよさそう

Navbar/PageHeader

これもスマホ用のNavBarを使うか、PC向けのHeaderを使うかムズイ。あとPC向けのHeaderがFigmaにあったデータがドキュメントにない。

pro-componentというのに移動されたらしい；；

NavBarだとこれを使いたいけど、実際使ってPCで表示すると副題とタイトルが同じサイズで表示されて見栄えが悪い・・・

日本語フォント

GoogleFontのWebの情報をreact風に書くといいみたい

https://fonts.google.com/selection/embed

記事とはちょっとUI変わってた

拡張機能

VSCodeにいろいろ拡張機能入れた

VSCodeの拡張機能を入れたり有効化したらここにエラーが出る

ChatGPTに聞いた

このエラーメッセージは、ESLint が tsconfig.json ファイルを読み込めないことを示しています。tsconfig.json は TypeScript のプロジェクト設定ファイルで、TypeScript を使用するプロジェクトには必須です。このエラーが発生する原因として考えられるいくつかの点は以下の通りです。

ESLiteを消した

あとコード整形も働かない