JS SDK

JS SDK

お知らせ:当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

前提条件

次のSDKメソッドを呼び出す前に、コードにJS https://js.zohocdn.com/projects/js/client_sdk.min.jsを含めます。
Zoho Projectsのスタイルを使用するには、コードにCSS https://css.zohocdn.com/projects/styles/zps-extn/client_sdk.cssを含めます。

init

拡張機能を初期化します。


zohoprojects.init().then(function(){});
 
他のSDKメソッドは、このメソッドの呼び出し後にのみ動作するため、最初に呼び出す必要があります。initの読み込み中に他の関数を使用する場合は、init関数内で使用できます。


zohoprojects.init().then(function () {
      zohoprojects.get('portal.name').then(function (response)
      });

metadata

拡張機能の支払い情報と設定情報を取得します。

zohoprojects.metadata().then(function(response)
{
      /* output
  {
      'data': {
       'configs': [
{
'name': 'Name',
'type': 'text',
'is_mandatory': true,
'is_secure': false,
'description': 'Enter your name',
'value': 'Helen Collins'
},
{
'name': 'Employee ID',
'type': 'text',
'is_mandatory': true,
'is_secure': false,
'description': 'Enter your Emp. ID',
'value': 'EMP08'
}
],
'payments_info': {
'edition': 'trial'
},
'status': 'success'
}
}
*/
});

context

現在の場所のモジュール名とエンティティIDを取得します。モジュール名は「tasks」または「issues」で、エンティティIDは該当するタスクまたは課題のIDです。


zohoprojects.context().then(function(response)
{
/* output
{
'module_name': 'tasks',
'entity_id': '27092000000031079'
}
*/
});

Notes ウィジェットの場所が「app_settings」、「attachment_picker」、「blueprint_during」、「top_band」の場合、エンティティIDは提供されません。

get

現在の場所に関連するインスタンス、現在のユーザー、ポータル、プロジェクト、タスク、課題の詳細を取得します。


zohoprojects.get('task.id

').then(function(response)
{
/* output
{
'data': 27092000000031080,
'status': 'success'
}
*/
});
getメソッドで使用できるキーは次のとおりです。

インスタンス

  • instances

現在のユーザー

  • current_user

ポータル

  1. portal.trial_enabled
  2. portal.settings
  3. portal.gmt_time_zone
  4. portal.project_count
  5. portal.role
  6. portal.avail_user_count
  7. portal.locale
  8. portal.project_prefix
  9. portal.available_projects
  10. portal.max_user_count
  11. portal.profile_id
  12. portal.name
  13. portal.id_string
  14. portal.bug_plural
  15. portal.plan
  16. portal.bug_plan
  17. portal.bug_singular
 portal.default
  18. portal.extensions
  19. portal.is_crm_partner
  20. portal.is_display_projectprefix
  21. portal.is_display_taskprefix
  22. portal.is_new_plan
  23. portal.layouts
  24. portal.link

プロジェクト

  1. project.is_strict
  2. project.role
  3. project.bug_count
  4. project.owner_id
  5. project.taskbug_prefix
  6. project.link
  7. project.description
  8. project.milestone_count
  9. project.updated_date_long
  10. project.task_count
  11. project.updated_date_format
  12. project.workspace_id
  13. project.billing_status
  14. project.key
  15. project.is_chat_enabled
  16. project.owner_name
  17. project.profile_id
  18. project.enabled_tabs
  19. project.name
  20. project.is_public
  21. project.layout_details
  22. project.status
  23. project.permissions
  24. project.IS_BUG_ENABLED
  25. project.bug_defaultview

  26. project.bug_prefix
  27. project.cascade_setting
  28. project.completed_on
  29. project.completed_on_long
  30. project.created_date
  31. project.created_date_format
  32. project.created_date_long

  33. project.custom_status_id
  34. 
project.id_string
  35. project.show_project_overview

  36. project.start_date

  37. project.start_date_long
  38. project.updated_date

  39. project.users
  40. project.customfields
  41. project.custom_fields

タスク

  1. task.name
  2. task.completed
  3. task.created_by
  4. task.priority
  5. task.percent_complete
  6. task.start_date
  7. task.end_date
  8. task.dependency
  9. task.duration
  10. task.details
  11. task.link
  12. task.created_person
  13. task.created_time
  14. task.created_time_format
  15. task.created_time_long

  16. task.custom_fields
  17. task.depth(サブタスクにのみ適用)
  18. task.duration_type

  19. task.id_string
  20. task.is_comment_added

  21. task.is_forum_associated

  22. task.is_recurrence_set

  23. task.is_reminder_set
  24. task.isparent
task.key

  25. task.last_updated_time
  26. task.last_updated_time_format

  27. task.last_updated_time_long
  28. task.milestone_id

  29. task.order_sequence
  30. task.parent_task_id(サブタスクにのみ適用)
  31. task.parenttask_id(サブタスクにのみ適用)
  32. task.root_task_id(サブタスクにのみ適用)
  33. task.status
  34. task.task_followers
  35. task.tasklist
  36. task.work
task.work_type
  37. task.comments
  38. task.subtasks

  39. task.customfields
  40. task.attachments

課題

  1. issue.module
  2. issue.created_time_long
  3. issue.customfields
  4. issue.status
  5. issue.reproducible
  6. issue.link
  7. issue.severity
  8. issue.reported_person
  9. issue.title
  10. issue.flag
  11. issue.assignee_name
  12. issue.reporter_id
  13. issue.classification
  14. issue.created_time_format
  15. issue.closed
  16. issue.created_time
  17. issue.key
  18. issue.attachment_count
  19. 
issue.bug_number
  20. 
issue.bug_prefix

  21. issue.comment_count
  22. 
issue.escalation_level
  23. 
issue.id_string

  24. issue.reporter_email
  25. 
issue.reporter_non_zuser
  26. 
issue.updated_time
  27. 
issue.updated_time_format
  28. 
issue.updated_time_long
  29. issue.attachments
  30. issue.comments
  31. issue.views

マイルストーン

  1. milestone.closed
  2. milestone.comments_count
  3. milestone.created_time
  4. milestone.created_time_format
  5. milestone.created_time_long
  6. milestone.end_date
  7. milestone.end_date_format
  8. milestone.end_date_long
  9. milestone.flag
  10. milestone.has_comments
  11. milestone.id
  12. milestone.id_string
  13. milestone.is_workfield_removed
  14. milestone.last_updated_time
  15. milestone.last_updated_time_format
  16. milestone.last_updated_time_long
  17. milestone.link
  18. milestone.name
  19. milestone.owner_id
  20. milestone.owner_name
  21. milestone.owner_zpuid
  22. milestone.project
  23. milestone.sequence
  24. milestone.start_date
  25. milestone.start_date_format
  26. milestone.start_date_long
  27. milestone.status
  28. milestone.status_det

選択したファイル

アップロード待ちのファイルは、chosen_filesに保存されます。このキーは、添付ファイルの選択画面でのみサポートされています。
  • chosen_files

デプロイの種類

現在のデータセンターを取得します。

zohoprojects.get('deployment_type').then(function() {
/* output
com
*/
});

プロフィール

ポータル内のすべてのプロフィールと、現在のユーザーのプロフィール詳細をそれぞれ取得する2つのキーをサポートしています。
  1. all_profiles:ポータル内のすべてのプロフィール情報を取得します。
  2. current_profile:現在のユーザーのプロフィール詳細を取得します。

テーマ

Zoho Projectsでは、ポータルにテーマを適用できます。
  • current_theme:現在のテーマを取得します。
zohoprojects.get('current_theme').then(function() {
/* output
{mode: 'default', zpPrimary: '255, 100, 0', zpPrimaryHover: '255, 247, 243'}
*/
});

ブループリントの実行中処理

  • blueprint_during:実行中アクションに設定された値を取得します
zohoprojects.get('blueprint_during').then(function(res) {
/* output
[ {field_id: 'UDF_CHAR1', is_visible: true, is_pii: false, is_encrypted: false}
{field_id: 'UDF_CHAR2', is_visible: true, is_pii: false, is_encrypted: false}]
*/
});

遷移

現在の遷移の詳細を取得します。
  1. transition:現在の遷移のIDと名前を取得します。
  2. blueprint:ブループリントのIDと名前を取得します。

set

現在の場所にある特定のタスクまたは課題の属性を更新します。


var nameObj={name:'Create a new checklist'};
zohoprojects.set('task',nameObj).then(function(response)
{
/* output
{
'data': {
'tasks': [
{
'milestone_id': '2*******************2',
'link': {
'timesheet': {
'url': 'https://p*************e.********.com/restapi/portal/5******7/projects/2****************9/tasks/2****************9/logs/'
},
'self': {
'url': 'https://p*************e.********.com/restapi/portal/5******7/projects/2****************9/tasks/2****************9/'
}
},
'description': '',
'duration': '0',
'last_updated_time_long': 1542193097398,
'details': {
'owners': [
{
'name': 'JOHN MARSH',
'id': '5************3'
}
]
},
'id': 2************0,
'key': 'WEUT-T1',
'created_person': 'Steve Banks',
'created_time_long': 1525668983347,
'created_time': '05-07-2018',
'is_reminder_set': false,
'is_recurrence_set': false,
'created_time_format': '05-07-2018 10:26:23 AM',
'subtasks': false,
'work': '0:00',
'custom_fields': [
{
'column_name': 'UDF_LONG1',
'label_name': 'Expense Amount',
'value': '24573'
},
{
'column_name': 'UDF_LONG3',
'label_name': 'sample',
'value': '0'
},
{
'column_name': 'UDF_LONG2',
'label_name': 'test',
'value': '200'
}
],
'isparent': false,
'work_type': 'work_hrs_per_day',
'completed': false,
'priority': 'None',
'created_by': '5******3',
'percent_complete': '0',
'last_updated_time': '11-14-2018',
'name': 'Create a new checklist',
'id_string': '2************9',
='last_updated_time_format': '11-14-2018 04:28:17 PM',
'tasklist': {
'name': 'General',
'id': '2************7'
},
'order_sequence': 1,
'status': {
'name': 'Open',
'id': '2************1',
'type': 'open',
'color_code': ''
}
}
]
},
'status': 'success'
}
*/
});
タスクのsetメソッドでは、次のキーを使用できます。

タスク

  1. person_responsible
  2. owner_work
  3. work_type
  4. name
  5. start_date
  6. end_date
  7. start_time
  8. end_time
  9. percent_complete
  10. duration
  11. duration_type
  12. reminder
  13. priority
  14. description
  15. custom_fields(このキーは、カスタム項目の作成にのみ使用できます。)
  16. clear_date
  17. index
  18. range
  19. json_string
  20. subtasks(このキーは、サブタスクの作成にのみ使用できます。サブタスクのパラメーターについては、こちらをクリックしてください。)
課題のsetメソッドでは、次のキーを使用できます。

課題

  1. title
  2. description
  3. assignee
  4. flag
  5. classification_id
  6. milestone_id
  7. due_date
  8. module_id
  9. severity_id
  10. reproducible_id
  11. status_id
  12. resolution
  13. affectedmile_id
プロジェクトを更新するためのsetメソッドでは、次のキーを使用できます。

プロジェクト

  1. name
  2. description
  3. status
  4. start_date
  5. end_date
  6. strict_project
  7. public
  8. group_id
  9. completed_on
  10. UDF_CHAR([1-9]|[1-2][0-9]|30)。例:UDF_CHAR1
  11. UDF_TEXT([1-9]|1[0-5])
  12. UDF_LONG([1-9]|1[0-5])
  13. UDF_USER[1-5]
  14. UDF_DOUBLE([1-9]|[1-2][0-9]|3[0-5])
  15. UDF_DATE[1-5]
  16. UDF_ENCRYPT([1-9]|10)
  17. owner
  18. billing_method
  19. bill_status
  20. show_project_overview
  21. custom_status
マイルストーンを更新するためのsetメソッドでは、次のキーを使用できます。

マイルストーン

  1. name
  2. start_date
  3. end_date
  4. owner
  5. flag
  6. budget
  7. threshold
  8. revenue_budge
linkfilesキーを使用して、ファイルを指定した場所に関連付けます。このキーは、タスクの詳細タブ課題の詳細タブ添付ファイル選択画面で使用できます。最大10件の配列として指定する必要があり、id、name、type、permanent_url、download_url、size、created_by、created_timeの各項目は必須です。画像ファイルの場合はpreview_urlも必須です。
  • linkfiles

linkfiles=[{
'created_time': 1561028014712,
'id': '1LavBS5sauJ-AAFJZWp8Ch9Cp2ehydahk',
'type': 'image/jpeg',
'created_by': 'Patricia Boyle',
'permanent_url': 'https://***************',
'size': 7409,
'preview_url': 'https://******************',
'name': 'sample-image.jpeg',
'download_url': 'https://drive.google.com/a/web-mailhosting.com/uc?id=1LavBS5sauJ-AAFJZWp8Ch9Cp2ehydahk&export=download',
}]
zohoprojects.set('linkfiles', linkFiles).then(function (response) {
zohoprojects.invoke('attachment_picker.close');
});

Blueprintの実行中処理

Blueprintの遷移で実行中処理を設定する際に、値を指定します。

var sample = [ {field_id: 'UDF_CHAR1', is_visible: true, is_pii: false, is_encrypted: false}
{field_id: 'UDF_CHAR2', is_visible: true, is_pii: false, is_encrypted: false}];
zohoprojects.set('blueprint_during', sample).then(function(res) {
/* output
[ {field_id: 'UDF_CHAR1', is_visible: true, is_pii: false, is_encrypted: false}
{field_id: 'UDF_CHAR2', is_visible: true, is_pii: false, is_encrypted: false}]
*/
});


エクスポート先

タスクをクラウドストレージサービスにエクスポートします。エクスポートの詳細ポップアップに表示するデータ項目を最大5件選択できます。表示データにリンクパラメーターを追加すると、選択した場所に簡単にアクセスできるリンクが設定されます。


let paramObj = {
'custom_data': {
'path': 'G/pics',
'portal_id': '89031033',
'project_id': '185977000000199005'
},
'display_data' : [
{
'name': 'Path',
'value': 'G's Drive',
'link': 'https://drive.google.com/drive/folders/1e1xWqREV'
}, {
'name': 'App Name',
'value': 'G- Drive'
}
]
      
zohoprojects.set('execute', paramObj);

request

plugin-manifest.jsonファイルで定義した接続を使用して、拡張機能から外部サービスのURLを呼び出します。接続のリンク名を指定しない場合、入力内容に基づいて応答が返されます。


var file = document.getElementById('inputbox').files[0];
var file_detail = {
type: 'GET',
files: [{
uploaddoc : file
type : 'binary' //If the file is uploaded as binary
}],
parameters: {
fields: 'id,name, thumbnailLink, webViewLink, webContentLink'
}
};
var url = 'https://www.googleapis.com/drive/v3/files/1-QabBt69U8myXYRDVU-1YiCo2k-JWRfu';
zohoprojects.request(url, file_detail, 'google_drive').then(function (response)
/* Output
{
'result': {
'webContentLink': 'https://drive.google.com/uc?id=1-QabBt69U8myXYRDVU-1YiCo2k-JWRfu&export=download',
'name': 'Eiffel_Tower_01.jpg',
'webViewLink': 'https://drive.google.com/file/d/1-QabBt69U8myXYRDVU-1YiCo2k-JWRfu/view?usp=drivesdk',
'id': '1-QabBt69U8myXYRDVU-1YiCo2k-JWRfu',
'thumbnailLink': 'https://lh3.googleusercontent.com/nhyq9mHrGDOZfNdQUHRj_xVlOoNAP5PEYkW4X2svGXKjVt53MvMGfjhQ2PlTv4cmv5-PgbjrR-c=s220'
},
'status': 'success'
}
*/});
引数名 データ型 説明
URL string 拡張機能から呼び出す外部サービスのURLです。
object JSONObject キー データ型
    type string 'GET'/'POST'/'PUT'/'DELETE'/'PATCH'
    parameters JSONObject APIのリクエストパラメーターです。
    headers JSONObject APIのヘッダーです。
    body JSONObject

APIの本文です。

 

    files JSONArray

ファイルをアップロードするためのパラメーターです。

値:実際のファイル。

*実際のファイルをアップロードした場合、本文は無視されます

*typeにbinaryを指定すると、ファイルはバイナリー形式で送信されます。ファイルの本文も処理対象になります

    replace_secure_config Boolean

plugin-manifest.jsonファイルのis_secureパラメーターがtrueの場合、このパラメーターの値をtrueに設定します。

URLおよびオブジェクトパラメーターでは、設定の値を{{name}} //nameの形式で渡すことができます。

Zoho Projectsによって設定値が置き換えられます。
メモ:初期値はfalseです。

connection_link_name string zappsのWebサイトで生成された接続リンク名です。接続リンク名はplugin-manifestから取得できます。

関数の実行

トリガーを使用せずに、Sigmaでカスタム関数を実行します。関数を実行するには、Function_uuidとそのバージョンが必須です。
 
let customData = {'name':'Create a new checklist'};
zohoprojects.function.execute('c8a9e660-95e2-11ef-9d3c-2d653cc724d7', '1.0', customData).then(function(response){
/* output
{ 'result':{'output':'{}','Tasks':[],'outputType':'void','message':{}},
'unique_id':'c8a9e660-95e2-11ef-9d3c-2d653cc724d7',
'code':3009,
'function_id':1234567890,
'message':'Function Executed Successfully',
'status':'Success'
}
*/
});

Notes
カスタムデータを取得するには、以下の構文を使用します。
metaData = data.getJSON('parameters').getJSON('metadata').toMap();
payload = metaData.getJSON('custom_data');

カラーシステム(CSS変数)

このセクションでは、アプリケーション全体で使用するテーマカラー変数について説明します。

すべての色には、以下の仕様が適用されます。

  • CSS変数(--zp*)を使用して定義

  • rgb(var(--variable))を通じて使用

  • デイモードダークモードに対応するよう設計

 使用パターン   

color: rgb(var(--zpOnData));
background-color: rgb(var(--zpSurface));
border-color: rgb(var(--zpFormElementBdr));

 

 テーマモード   

  • デイモード:明るいUIに暗いテキスト

  • ダークモード:暗いUIに明るいテキスト

 

カラートークンは以下のとおりです。

 

CSS変数名

デイモード
(rgb())

ダークモード
(rgb())

1

--zpPrimary

255, 100, 0

2

--zpPrimaryHover

255, 247, 243

40, 40, 40 !important

3

--zpOnPrimary

255, 255, 255

4

--zpBackground

255, 255, 255

0, 0, 0

5

--zpOnBackground

0, 0, 0

97, 97, 97

6

--zpSurface

255, 255, 255

0, 0, 0

7

--zpOnSurface

0, 0, 0

185, 185, 185

8

--zpSurfaceBdr

230, 230, 230

18, 18, 18

9

--zpSecondary

250, 250, 250

13, 13, 13

10

--zpOnSecondary

70, 70, 70

158, 158, 158

11

--zpSecondaryBdr

235, 235, 235

46, 46, 46

12

--zpData

255, 255, 255

18, 18, 18

13

--zpOnData

32, 33, 35

187, 187, 187

14

--zpOnDataLight

85, 85, 85

102, 102, 102

15

--zpPopupBase

255, 255, 255

30, 30, 30

16

--zpShadow

0, 0, 0

0, 0, 0

17

--zpBorderGrey

0, 0, 0

225, 225, 225

18

--zpMLTGroup

248, 248, 248

25, 25, 25

19

--zpOnMLTHeader

167, 169, 172

102, 102, 102

20

--zpOnMLTHeaderBdr

242, 242, 242

40, 40, 40

21

--zpFormElement

255, 255, 255

8, 8, 8

22

--zpFormElementBdr

232, 238, 244

23

--zpMandatory

255, 247, 247

39, 7, 7

24

--zpMandatoryBdr

119, 28, 33

25

--zpFreeze

50, 50, 50, .82

50, 50, 50, .82

26

--zpDisabled

241, 241, 241

62, 62, 62

27

--zpOnDisabled

142, 142, 142

152, 152, 152

28

--zpTooltip

0, 0, 0

222, 222, 222

29

--zpOnTooltip

242, 242, 242

0, 0, 0

30

--zpProgressGreen

135, 211, 124

108, 156, 101

31

--zpBlackOpac

0,0,0

255, 255, 255

32

--zpBulkUpdate

40, 40, 40

33

--zpDropDownShadow

-2px 0 15px rgba(0, 0, 0, .41)

 

カラートークンのカテゴリー  

  • プライマリーカラー用途:ボタン、有効な状態、強調表示)

    • --zpPrimary

    • --zpPrimaryHover

    • --zpOnPrimary

  • サーフェスと背景用途:ページの背景、カード、コンテナー

    • --zpBackground

    • --zpSurface

    • --zpSecondary

  • テキストカラー用途:ラベル、入力テキスト、補助テキスト

    • --zpOnData

    • --zpOnSurface

    • --zpOnSecondary

    • --zpOnDataLight

  • フォーム要素用途:入力欄、選択欄、検証状態

    • --zpFormElement

    • --zpFormElementBdr

    • --zpMandatory

    • --zpMandatoryBdr

  • 状態カラー

    • --zpDisabled

    • --zpOnDisabled

    • --zpMandatory

    • --zpProgressGreen

  • オーバーレイと効果

    • --zpPopupBase

    • --zpShadow

    • --zpDropDownShadow

    • --zpFreeze

フォームUIのCSS

  • すべてのフォームコンポーネントで一貫したUI/UX

  • CSS変数を使用したテーマベースのスタイル設定

  • アクセシビリティと複数の状態をサポート

対応コンポーネント  

入力項目  

  • テキスト

  • メール

  • パスワード

  • 検索

  • 数値

その他の要素  

  • <select>(ネイティブおよびカスタム)

  • <textarea>

  • Select2ドロップダウン

  • カスタムチェックボックス(.c-checkbox)

  • カスタムラジオボタン(.cradio)

 

状態と動作  

ホバー:枠線の色が明るいプライマリカラーに変わります

フォーカス:枠線がより強調され、アウトラインが適用されます

必須/不正  

使用例<input type='text' mandatory='yes'>

枠線が強調され(--zpMandatoryBdr)、背景に薄い色が付きます

無効  

使用例:<input type='text' disabled>

動作:背景がグレーになり、文字色が薄くなり、カーソルに「not-allowed」が適用されます

読み取り専用

使用例<input type='text' readonly>

動作編集不可、デフォルトカーソル

プレースホルダーのスタイル  

::placeholder {
color: rgba(var(--zpOnDataLight), 0.5);
}

カスタム選択(.select-style)  

使用例  

<div class='select-style'>
<select>
<option>選択肢1</option>
</select>
</div>

機能  

  • カスタムドロップダウン矢印

  • ブラウザー標準のスタイルを削除

  • 完全レスポンシブ対応

 

チェックボックスコンポーネント(.c-checkbox)  

使用例  

<div class='c-checkbox'>
<input type='checkbox' id='chk1'>
<label for='chk1'>選択肢</label>
</div>

機能  

  • カスタムUI表示

  • 対応する状態:

    • 選択済み/未選択

    • 不確定

    • 無効

    • エラー状態

不確定状態の例  

<div class='c-checkbox'>
<input type='checkbox' id='indChk'>
<label for='indChk'>一部選択済み</label>
</div>

<script>
document.getElementById('indChk').indeterminate = true;
</script>

注意事項  HTMLでは設定できません。JavaScriptを使用して設定する必要があります。

 

ラジオボタンコンポーネント(.cradio)  

使用例  

<div class='cradio'>
<input type='radio' id='r1' name='group'>
<label for='r1'>選択肢</label>
</div>

機能  

  • カスタム円形UI

  • 滑らかな選択アニメーション

  • 無効状態に対応

 無効状態の例  

入力欄  

<input type='text' value='無効な入力欄' disabled>

選択リスト  

<div class='select-style'>
<select disabled>
<option>無効な選択リスト</option>
</select>
</div>

テキストエリア  

<textarea disabled>無効なテキストエリア</textarea>

チェックボックス  

<div class='c-checkbox'>
<input type='checkbox' id='chk-disabled' disabled>
<label for='chk-disabled'>無効なチェックボックス</label>
</div>

ラジオボタン  

<div class='cradio'>
<input type='radio' id='r-disabled' name='group' disabled>
<label for='r-disabled'>無効なラジオボタン</label>
</div>

チェック済みかつ無効  

<div class='c-checkbox'>
<input type='checkbox' id='chk2' checked disabled>
<label for='chk2'>チェック済みかつ無効</label>
</div>

 

ユーティリティクラス  

クラス

用途

.formfield-style

項目の高さを統一するためのラッパー

.disabled-element

無効化スタイルを手動で適用

RTL(右から左に記述する言語)のサポート  

右から左方向のレイアウトに対応しています。

<body dir='rtl'>

Select2との連携  

対応しているクラス。

  • .select2-container

  • .select2-choice

  • .select2-choices

完全な例


<form>
<input type='text' placeholder='Name' mandatory='yes'>

<div class='select-style'>
<select>
<option>Select Country</option>
</select>
</div>

<textarea placeholder='Message'></textarea>

<div class='c-checkbox'>
<input type='checkbox' id='agree'>
<label for='agree'>Agree</label>
</div>

<div class='cradio'>
<input type='radio' id='r1' name='g'>
<label for='r1'>Option 1</label>
</div>
</form>