Apidog Markdown構文
  1. コンポーネント
Apidog Markdown構文
  • Apidog Markdown 概要
  • 基本的記法と機能
    • タイトルとテキスト
    • リストとテーブル
    • 画像
    • ビデオ
    • コード
    • アイコン
    • Tailwind CSSサポート
  • コンポーネント
    • お知らせ
    • ハイライトブロック
    • 折りたたみブロック
    • 折りたたみグループ
    • 複数列
    • カード
    • カードグループ
    • 画像の枠線
    • 画像の背景
    • ステップ
    • タブ
    • ヒント
    • クリックして文字をコピー
    • テキストのツールチップ
    • コンテナ
    • チャートの利用 - Mermaid
      • フローチャート
      • タイミングチャート
      • クラス図
      • 状態図
      • 関係図
      • ジャーナル図
      • ガントチャート
      • 円グラフ
    • 数式
      • インライン式
      • ブロックレベルの式
  • その他の問題
    • ショートカットキー
  1. コンポーネント

画像の背景

<Background> コンポーネントを使用して、画像を背景として設定します。

使用例#

image
コード：
<Background>
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

画像の背景色を設定する#

背景色: preset1
image
背景色: preset2
image
... (preset3 から preset20 まで同様に続きます) ...
コード：
// 背景色: preset1
<Background bgColor="preset1">
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

// 背景色: preset2
<Background bgColor="preset2">
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

... (preset3 から preset20 まで同様に続きます) ...

画像の位置を設定する#

image
コード：
<Background position="bottom">
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342520/image-preview)
</Background>

コンテンツの角丸を設定する#

image
コード：
<Background radius={14}>
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

画像の枠線を設定する#

image
コード：
<Background borderWidth={1}>
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342520/image-preview)
</Background>

画像の上/下/左/右マージンを設定する#

image
コード：
<Background paddingTop={40} paddingBottom={40} paddingLeft={20} paddingRight={20}>
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

画像の背景グラデーションの方向を設定する#

image
コード：
<Background bgDirection={90}>
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

画像の背景パターンを設定する#

背景パターン: ploka
image
背景パターン: ploka2
image
... (paper、paper2、paper3、wave、electronics、stars、noneも同様に続きます) ...
コード：
// 背景パターン: ploka
<Background bgGridOverlay="ploka">
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

// 背景パターン: ploka2
<Background bgGridOverlay="ploka2">
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

... (paper、paper2、paper3、wave、electronics、stars、noneも同様に続きます) ...

画像の背景パターンの色を設定する#

背景パターンの色: white
image
背景パターンの色: gray
image
背景パターンの色: black
image
コード：
// 背景パターンの色: white
<Background bgGridOverlay="ploka" bgGridOverlayColor="white">
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

// 背景パターンの色: gray
<Background bgGridOverlay="ploka" bgGridOverlayColor="gray">
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

// 背景パターンの色: black
<Background bgGridOverlay="ploka" bgGridOverlayColor="black">
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

画像の背景の角丸を設定する#

image
コード：
<Background bgRadius={20}>
  ![image](https://api.apidog.com/api/v1/projects/550428/resources/342519/image-preview)
</Background>

パラメータの説明#

ImageBackground
position
enum<string> 
可選
画像の位置
列挙型:
centertopbottomleftrighttopLefttopRightbottomLeftbottomRight
デフォルト値:
center
radius
number 
可選
コンテンツの角丸（px）
borderWidth
number 
可選
画像の枠線の幅（px）
shadow
enum<string> 
可選
影
列挙型:
xsmallsmallmiddlelargexlargenone
デフォルト値:
middle
paddingX
number 
可選
左右の余白（px）
paddingY
number 
可選
上下の余白（px）、デフォルト値は paddingX * 5/7
paddingTop
number 
可選
上の余白（px）
paddingBottom
number 
可選
下の余白（px）
paddingLeft
number 
可選
左の余白（px）
paddingRight
number 
可選
右の余白（px）
bgColor
string 
可選
ビルトイン: "preset1", "preset2", "preset3", "preset4"... 単色: "blue", "#1DA1F2" グラデーション: "#1DA1F2, #5BB1F4", "blue,green", "blue,red:30%,green" 色名はTailwind CSSの色名に直接対応します。
bgDirection
number 
可選
背景のグラデーション方向（度）
bgGridOverlay
string 
可選
背景パターン
bgGridOverlayColor
string 
可選
背景パターンの色
bgRadius
number 
可選
背景の角丸（px）
更新日時 2024-06-28 03:45:29
前へ
画像の枠線
次へ
ステップ
Built with